AA and AAA for normal and large text, plus the 3:1 minimum for interface parts and graphics, each with a clear pass or fail.
Color & CSS
Color Contrast Checker
See whether your text is readable on its background. The ratio is checked against every WCAG level, and if it falls short you get the nearest color that passes.
ColorsAny CSS color format works
Large text, 24 px bold
Normal text at 16 px. The quick brown fox jumps over the lazy dog.
Small print at 12 px for comparison.
ResultAgainst the WCAG 2.x thresholds
14.68:1Excellent: meets the strictest level
- AA, normal textneeds 4.5:1Pass
- AA, large textneeds 3:1Pass
- AAA, normal textneeds 7:1Pass
- AAA, large textneeds 4.5:1Pass
- Interface parts and graphicsneeds 3:1Pass
What it handles
Accessible color choices, checked properly.
Low contrast is one of the most common accessibility failures. WCAG sets minimum ratios so text stays readable for people with low vision or in bright light.
A live preview shows large, normal, and small text on your colors, so you can judge legibility as well as the number.
If the ratio is too low, the tool finds the nearest text color that passes, keeping your hue and adjusting only the lightness.
Frequently asked questions
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text (18 pt, or 14 pt bold) and interface components. AAA needs 7:1 for normal text and 4.5:1 for large text.
How is the ratio calculated?
It compares the relative luminance of the two colors, a measure of how bright each appears, using the formula in WCAG 2.x: (lighter + 0.05) divided by (darker + 0.05).
Why does a pair pass AA but fail AAA?
AAA is a stricter, optional target. Most sites aim for AA everywhere and use AAA where they can, such as long-form reading text.
Does it handle transparent colors?
Yes. A translucent text color is blended over the background, and a translucent background is blended over white, so the ratio reflects what people actually see.