Color Contrast Ratio Checker: WCAG Compliance Guide

Color contrast is the most common accessibility failure on the web, and one of the easiest to fix. WCAG, the Web Content Accessibility Guidelines, sets minimum contrast ratios between text and its background.

The ratios you need

• Normal text, level AA: 4.5:1. This is the level most laws and policies point to.
• Large text, level AA: 3:1. Large means at least 18 point (about 24px) regular, or 14 point (about 18.7px) bold.
• Normal text, level AAA: 7:1. Large text AAA: 4.5:1.
• Interface parts and graphics, level AA: 3:1. Icons, input borders, focus indicators, and chart lines need 3:1 against what's next to them.

Logos and purely decorative text are exempt, as is text in disabled controls.

How the ratio works

The ratio compares the relative luminance, or perceived brightness, of two colors, from 1:1 (identical) to 21:1 (black on white). It's calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. Hue doesn't count, only brightness. That's why red on green can look very different yet still fail.

How to check

• Single pairs: the free WCAG contrast checker gives the ratio and pass or fail for each level.
• A whole palette: the color contrast matrix tests every combination at once.
• In the browser: Chrome DevTools shows contrast in the color picker. See contrast analyzers in Chrome.

Common fixes

1. Light gray text is the usual failure. Darken it until it passes 4.5:1.
2. Text on images needs a solid or semi-opaque overlay behind it.
3. Check hover, focus, and disabled states, not just the default.
4. Test both light and dark themes; a color that passes in one can fail in the other.

Contrast also matters for color blindness, but it isn't the whole story; designing for colorblind users covers the rest.