WCAG Contrast Ratios Explained

Accessibility · 6 min read

"Your contrast ratio is 3.2:1 and needs to be 4.5:1." If you've run an accessibility audit, you've seen a sentence like that. Here's what the numbers actually mean, which threshold applies where, and how to fix failures without wrecking your design.

What the ratio measures

A contrast ratio compares the relative luminance — perceived brightness, with the eye's uneven color sensitivity factored in — of two colors. The scale runs from 1:1 (identical colors, invisible text) to 21:1 (pure black on pure white). It is not about hue: red on green can have terrible contrast even though the hues are opposites, because their brightness is nearly identical.

Green contributes the most to perceived brightness, blue the least. That's why yellow (#FFFF00, no blue missing much) on white is nearly unreadable (~1.07:1), while blue (#0000FF) on white passes AA (8.6:1).

The thresholds that matter

• 4.5:1 — AA, normal text. The legal-baseline standard in most jurisdictions and the number to remember. Body copy, labels, captions.
• 3:1 — AA, large text. Large text is easier to read, so the bar is lower. "Large" means at least 24px regular or 18.5px bold.
• 7:1 — AAA, normal text. The enhanced standard, valuable for reading-heavy products and low-vision users. Nice to hit; rarely mandated.
• 4.5:1 — AAA, large text.
• 3:1 — UI components. Since WCAG 2.1, icons, input borders, and focus indicators also need 3:1 against adjacent colors — the most commonly missed rule.

AA or AAA — which should you target?

AA is the practical answer. It's what accessibility laws (ADA settlements, the European Accessibility Act, Section 508) reference, and it's achievable without visually flattening your brand. AAA is worth targeting for long-form reading surfaces — documentation, articles, e-readers — where sustained legibility matters most. Treat AAA as a goal for body text, not a blanket requirement.

The mistakes that cause most failures

1. Gray-on-gray minimalism. #999999 body text on white is 2.8:1 — a failure. The fashionable "quiet" gray is usually one or two steps too light. #767676 is the lightest gray that passes AA on pure white.
2. White text on brand colors. Mid-tone brands (oranges, teals, corals) often sit near 2.5–3.5:1 with white text. Test the button, not just the logo.
3. Text over photos. The photo's brightest region decides your ratio, not the average. Add a scrim (dark overlay) or text backdrop instead of hoping.
4. Placeholder and disabled text. Placeholders are still text people must read. Disabled controls are exempt from WCAG — but if users need to read the label to know what's disabled, don't make it invisible.
5. Trusting dark mode to fix it. Ratios change in both directions when you invert. A palette that passes in light mode can fail in dark mode; check both.

How to fix a failing pair

You rarely need a new palette — you need a darker (or lighter) step of the same hue. Keep the hue and saturation, move lightness until the ratio passes. Working from an extracted photo palette? Sort it by lightness in the Palette Extractor and use the darkest step for text. And remember contrast is only half of color accessibility — verify your palette also survives the Colorblind Simulator, because a passing ratio can still hide meaning from red-green colorblind users when hue alone carries information.

Contrast is the cheapest accessibility win there is: no ARIA, no refactoring — just better numbers. Measure, nudge lightness, ship.

Try it yourself

Everything above is hands-on in the free tools — no signup, nothing uploaded: Contrast Checker · Shades & Tints Generator. More reads in the guides section.