Tool Fu
$ toolfu run wcag-contrast-checker

WCAG Contrast Checker — Color Contrast Accessibility

Free WCAG color contrast checker. Check contrast ratios against WCAG 2.1 AA and AAA standards. See pass/fail badges, live preview — test color accessibility instantly.

all processing runs in your browser
wcag-contrast-checker
foreground
background

The quick brown fox jumps over the lazy dog

Sample text at normal and small sizes

17.06:1
contrast ratio
AA
✓ Normal text (≥4.5:1)✓ Large text (≥3:1)
AAA
✓ Normal text (≥7:1)✓ Large text (≥4.5:1)

WCAG Contrast Checker — Test Color Accessibility Online

This free WCAG contrast checker tests color contrast ratios against WCAG 2.1 AA and AAA accessibility standards. Color contrast is one of the most common accessibility failures on the web — WCAG defines specific contrast ratios that text must meet to be readable by people with low vision or color deficiency.

Enter your foreground and background colors and instantly see the contrast ratio, a live text preview, and pass/fail badges for both WCAG AA and AAA levels at normal and large text sizes. This contrast checker WCAG tool runs entirely in your browser.

WCAG color contrast requirements

  • WCAG AA Normal Text — minimum 4.5:1 contrast ratio
  • WCAG AA Large Text — minimum 3:1 contrast ratio
  • WCAG AAA Normal Text — minimum 7:1 contrast ratio
  • WCAG AAA Large Text — minimum 4.5:1 contrast ratio
$ cat FAQ.md
What are WCAG AA and AAA?▶
WCAG (Web Content Accessibility Guidelines) defines two conformance levels for color contrast. AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text.
What counts as 'large text'?▶
Large text is defined as 14pt (18.66px) bold or 18pt (24px) regular weight. This threshold matters because larger text is inherently easier to read, so the contrast requirements are lower.
How is contrast ratio calculated?▶
The contrast ratio is calculated using relative luminance values of the two colors per the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker. The result ranges from 1:1 (no contrast) to 21:1 (black on white).
Why does accessibility contrast matter?▶
About 1 in 12 men and 1 in 200 women have color vision deficiency. Low contrast text is difficult to read for people with low vision, in bright sunlight, or on low-quality displays. Meeting WCAG contrast requirements ensures your content is readable for the widest possible audience.