WCAG Contrast Checker

Test any foreground and background color combination for WCAG 2.2 Level AA and AAA compliance. Get exact contrast ratios for normal and large text — instantly.

Large heading sample
Normal body text sample. This is how your text will look at regular size on the chosen background.
14.32:1
WCAG Contrast Ratio
AA Normal (≥4.5:1)
Pass
AA Large (≥3:1)
Pass
AAA Normal (≥7:1)
Pass
AAA Large (≥4.5:1)
Pass

What Is WCAG Contrast?

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background so that content is readable for people with low vision, color blindness or anyone using a screen in bright light. Contrast is calculated using the WCAG relative luminance formula and reported as a ratio from 1:1 (identical colors) to 21:1 (black on white).

WCAG Levels Explained

  • AA Normal text (≥4.5:1): The baseline requirement for all body text under 18pt (or under 14pt bold). This is the minimum most sites should meet.
  • AA Large text (≥3:1): Larger text (18pt+ or 14pt+ bold) is easier to read, so a lower ratio is acceptable.
  • AAA Normal text (≥7:1): The enhanced requirement for maximum accessibility.
  • AAA Large text (≥4.5:1): Enhanced requirement for large text.

How This Checker Works

We compute the exact relative luminance of each color using the WCAG formula, then calculate the contrast ratio as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance and L2 is the darker one's. The result is compared against the four WCAG thresholds and displayed as Pass/Fail for each.

Frequently Asked Questions