What the WCAG thresholds actually mean
Contrast ratio is a single number between 1:1 (same color) and 21:1 (black on white), computed from the relative luminance of the two colors. You do not need to compute it by hand - a contrast checker does it instantly.
- AA for normal text - minimum contrast 4.5:1
- AAA for normal text - enhanced level, 7:1
- Large text (24 px regular, or 18.66 px bold) - needs only 3:1
The failures that show up again and again
Gray-on-gray text in modern UI themes, brand colors chosen for vibrancy rather than legibility, and white text on brand-tinted buttons are the three classics. Each looks fine on a designer's calibrated monitor and fails for everyone else.
A contrast checker names the problem immediately: the ratio, the failing threshold, and the closest compliant color you can swap in.
The two-minute check before you ship
- Collect the color pairs that carry meaning: body text, buttons, links, badges, placeholders.
- Check each pair against AA and AAA for normal text, and 3:1 for large text.
- For every failing pair, apply the suggested compliant color and re-check.
- Re-test after any theme or brand color change - this is where regressions hide.
Check WCAG color contrast in one click
Frequently asked questions
What is the difference between AA and AAA?
AA (4.5:1 for normal text) is the baseline most policies reference. AAA (7:1) is the enhanced level recommended for content where readability is critical.
What counts as large text?
Text at least 24 px regular weight, or 18.66 px bold. Large text only needs a 3:1 ratio under WCAG.
Do I need to check contrast for images?
Solid color pairs are what contrast checkers evaluate. For photos behind text, sample representative light and dark areas and check the worst case.
How do I fix a failing color pair?
Darken the foreground or lighten the background until the ratio passes. Most checkers suggest a nearby compliant color you can apply with one click.