Contrast Checker

Check WCAG AA and AAA compliance for any text and background color combination.

Text color

Contrast ratio
-
-

Background color

Large Text Example (18pt+)

Normal text: The quick brown fox jumps over the lazy dog. This is regular body text to test readability and contrast against the selected background color.

AA Normal-
≥ 4.5:1 required
AA Large-
≥ 3:1 required
AAA Normal-
≥ 7:1 required
AAA Large-
≥ 4.5:1 required

Large text = 18pt (24px) normal or 14pt (18.67px) bold. WCAG 2.1 guidelines. AA is the minimum standard; AAA is enhanced.

What is WCAG contrast compliance?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for people with low vision or color blindness. Level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA is the enhanced standard requiring 7:1 and 4.5:1 respectively.

AA vs AAA - which should you target?

AA is the legal minimum for most accessibility regulations (including EN 301 549 in Europe and Section 508 in the US). AAA is the gold standard - harder to achieve but recommended for body text and critical interfaces. Most teams target AA for all text and AAA for body copy where possible.

What counts as "large text"?

WCAG defines large text as 18pt (24px) or larger at normal weight, or 14pt (18.67px) or larger at bold weight. Large text benefits from a more lenient contrast ratio (3:1 for AA) because size itself aids legibility. Headlines and display text usually qualify; most body copy does not.

How to use this tool

Pick your text color and background color using the color pickers or type hex codes directly. The contrast ratio updates instantly and all four WCAG checks show Pass or Fail in real time. Use the Swap button to reverse the colors. The live preview shows how your combination looks on actual text.