A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities
Developer

WCAG Contrast Checker

Check foreground and background color contrast ratios against WCAG 2.1 AA and AAA accessibility standards.

Loading interactive tool…

About this tool

The WCAG Contrast Checker calculates the luminance contrast ratio between any two colors and reports whether the combination passes the WCAG 2.1 AA and AAA accessibility guidelines for both normal text and large text. A contrast ratio of 4.5:1 is required for normal text (WCAG AA), and 3:1 for large text (18pt+ or 14pt+ bold). AAA compliance requires 7:1 for normal text and 4.5:1 for large text. The tool accepts colors in hex, RGB, or HSL format, shows the computed contrast ratio, and provides a live preview of the foreground text on the background so you can visually assess readability alongside the numerical result.

Why use it

  • Shows pass/fail for all four WCAG 2.1 contrast scenarios simultaneously instead of a single ratio number.

  • Accepts colors in hex, RGB, and HSL — no format conversion needed.

  • Live preview pane shows actual text appearance at the chosen colors.

  • Instant calculation — no submit button needed.

  • Accepts colors in hex, RGB, and HSL — no manual format conversion needed before checking.

How to use

  1. Enter the foreground (text) color in hex, RGB, or HSL format.
  2. Enter the background color in the second field.
  3. The contrast ratio and WCAG AA/AAA pass/fail status update instantly.
  4. View the live preview pane to see how the colors look together.
  5. Read the contrast ratio (e.g. 7.21:1) and the four pass/fail badges for AA normal, AA large, AAA normal, and AAA large.
  6. View the live preview pane to see actual rendered text on the chosen background.
  7. Tweak either color slightly (HSL lightness is the easiest dimension) until you cross the AA 4.5:1 threshold.

When it helps

  • Verifying UI color choices meet WCAG 2.1 AA accessibility requirements before shipping a design system.
  • Auditing an existing color palette for contrast compliance during a quarterly accessibility review.
  • Designing accessible typography — checking text and background combinations.
  • Meeting legal or contractual accessibility requirements (ADA, EN 301 549).

Examples

AAA pass (high contrast body text)

Input
#000000 on #ffffff
Expected result
Ratio 21.00:1 — AA normal PASS, AA large PASS, AAA normal PASS, AAA large PASS.

AA pass, AAA fail (typical brand link)

Input
#1a73e8 on #ffffff
Expected result
Ratio 4.55:1 — AA normal PASS, AA large PASS, AAA normal FAIL (needs 7:1), AAA large PASS.

Common failure (light gray on white)

Input
#aaaaaa on #ffffff
Expected result
Ratio 2.85:1 — AA normal FAIL, AA large FAIL (needs 3:1 minimum), AAA fails both.

Dark mode success state

Input
#4ade80 on #0d0d0d
Expected result
Ratio 11.27:1 — passes AA and AAA for normal and large text.

Tips

  • When a combination just fails AA, adjust the lighter color toward white or the darker color toward black in HSL space to gain ratio quickly.
  • Aim for AA on body text and AAA on small UI labels — the extra contrast helps users with mild low-vision.
  • Don't rely solely on contrast for state changes (focus, error). Pair color with iconography or text per WCAG 1.4.1.
  • Test against pure white (#ffffff) and your darkest brand surface — those are the most common production extremes.
  • Remember that disabled buttons are exempt from contrast requirements, but everything else interactive must meet 3:1 for non-text and 4.5:1 for text.
  • Use HSL when iterating — adjusting lightness in HSL preserves hue identity better than nudging RGB channels.

Frequently Asked Questions

What is a passing WCAG contrast ratio?
WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold). AAA requires 7:1 and 4.5:1 respectively.
How is the contrast ratio calculated?
The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are the relative luminances of the lighter and darker colors, calculated per the WCAG formula using sRGB values.
What qualifies as 'large text' under WCAG?
Large text is defined as 18pt (24px) or larger regular weight, or 14pt (approximately 18.67px) or larger bold weight.
Does this tool check WCAG 3.0 (APCA)?
This tool implements the WCAG 2.1 contrast algorithm. WCAG 3.0 uses a different algorithm (APCA) that is not yet an official standard.
What about non-text contrast (icons, UI components)?
WCAG 2.1 Success Criterion 1.4.11 requires a 3:1 minimum ratio for non-text UI components. This checker calculates the ratio you need — apply the 3:1 threshold for UI elements.

Explore the category

DNS Propagation Checker Check DNS propagation across multiple global nameservers to see how widely a recent DNS change has spread. Website Status Checker Check whether any website or URL is up or down and see its HTTP response code, response time, and server headers. Color Converter Convert between HEX, RGB, HSL Glob Tester Test glob patterns against newline file/path candidates. HTTP Headers Checker Inspect response status and headers from public HTTPS origins SSL Certificate Checker Peek TLS certificate metadata with SSRF-safe hostname rules

Glossary

Contrast ratio
The luminance ratio between two colors, expressed as N:1 where N ranges from 1 (no contrast) to 21 (black on white). Computed as (L1 + 0.05) / (L2 + 0.05).
Relative luminance
The brightness of a color normalized to 0 (darkest) - 1 (brightest), calculated from the sRGB channel values using the WCAG 2.1 formula with gamma correction.
WCAG AA
The middle conformance level of the Web Content Accessibility Guidelines. Requires 4.5:1 contrast for normal text and 3:1 for large text — the minimum legal target in most jurisdictions.
WCAG AAA
The highest conformance level. Requires 7:1 for normal text and 4.5:1 for large text. Recommended but not legally mandated; suitable for sites where readability is critical (gov, finance, health).
Large text
Per WCAG, text that is 18pt (24px) regular or 14pt (~18.67px) bold. Large text is allowed a lower contrast threshold because the strokes are wider and easier to read.
Non-text contrast
WCAG 2.1 Success Criterion 1.4.11. Requires 3:1 ratio for UI components such as form input borders, icons, and focus rings against adjacent colors.
sRGB
The standard RGB color space used on the web. WCAG luminance calculations assume sRGB and apply gamma correction (linearization) before computing brightness.
APCA
Advanced Perceptual Contrast Algorithm — a candidate replacement for the WCAG 2.x ratio formula in WCAG 3.0. Returns Lc values, not ratios; not yet a ratified standard.