WCAG Contrast Checker
Check if two colors meet WCAG AA and AAA contrast requirements.
Quick answer: WCAG Contrast Checker: check if two colors meet WCAG AA and AAA contrast requirements. Runs entirely in your browser, free, no signup.
Last updated
Good to know
Contrast is measured as a ratio between the relative luminance of two colors, running from 1:1 (identical) to 21:1 (pure black on pure white). The WCAG 2.1 thresholds this tool reports are the accessibility bar most sites are held to: 4.5:1 for normal body text and 3:1 for large text at Level AA, tightening to 7:1 and 4.5:1 at the stricter Level AAA. "Large" here means roughly 18pt, or 14pt bold.
The formula is based on perceived luminance, not on how different two colors look, which produces some counterintuitive results. Two vivid but similarly bright colors — say a saturated red on a saturated green — can have poor contrast even though they clash violently to the eye, while a light gray on white may pass more easily than you expect. That is why relying on your own judgment is unreliable and a numeric check is worth the two seconds it takes.
One limitation to plan around: WCAG contrast is only defined for opaque colors. If your foreground uses transparency, the effective color depends on whatever sits behind it, so pre-blend it against the actual solid background before checking. Since luminance ignores hue entirely, a passing ratio does not guarantee a design is color-blind-friendly — confirm that separately with the color blindness simulator, and grab exact values with the color picker.
Frequently asked questions
- Is the contrast checker free?
- Yes — free, with no signup or limits.
- Which formula do you use?
- The official WCAG 2.1 relative-luminance formula — the same one Google's Lighthouse uses.
- What ratios pass?
- AA needs 4.5:1 for normal text or 3:1 for large text; AAA raises that to 7:1 and 4.5:1.
- Can I check transparent colors?
- WCAG doesn't define ratios for transparent foregrounds — pre-blend your color against a solid background first.
- Is data uploaded?
- No — the check runs in your browser.