WCAG Contrast Ratios Explained

Text that’s hard to read against its background isn’t just a design nitpick — for anyone with low vision, colour blindness, or simply a phone screen in bright sunlight, it’s a genuine barrier. The Web Content Accessibility Guidelines (WCAG) define exact, measurable contrast thresholds so “readable enough” stops being a subjective guess.

How the ratio is calculated

WCAG’s contrast ratio compares the relative luminance — perceived brightness, not raw colour values — of the foreground and background, producing a number from 1:1 (identical colours, no contrast at all) to 21:1 (pure black on pure white, the maximum possible).

The formula weights the colour channels the way human vision actually works:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

Green contributes over seven times more to perceived brightness than blue. That’s why a saturated blue on black is nearly unreadable while a saturated yellow on black is fine, despite both being “a bright colour on black.”

The ratio itself is (L1 + 0.05) / (L2 + 0.05), lighter over darker. The 0.05 floor accounts for ambient screen glare — real screens never reach true black.

The actual thresholds

WCAG 2.x defines two conformance levels in its Contrast (Minimum) criterion, each with a separate bar for normal text vs. large text (18pt+, or 14pt+ bold):

	Normal text	Large text	UI components
AA (minimum)	4.5:1	3:1	3:1
AAA (enhanced)	7:1	4.5:1	—

AA is the level most accessibility standards and legal requirements target. AAA is a stricter bar that’s harder to hit with brand colours that aren’t near-black or near-white, but it’s worth reaching for on body text where possible.

That third column is the one most people miss. Since WCAG 2.1, non-text elements need 3:1 too — form input borders, focus indicators, icons carrying meaning, chart segments you have to distinguish. A pale grey input border on white is one of the most common failures on otherwise careful sites.

Why large text gets a lower bar

Larger text is inherently easier to read at lower contrast — the shapes are bigger and the strokes thicker even with less colour difference — so WCAG relaxes the requirement rather than forcing every heading to meet the same bar as small body copy.

Note the definition is about rendered size, not semantics. An <h3> styled at 16px is normal text and needs 4.5:1. A <p> at 24px qualifies as large. “Large” means 18pt (24px) regular or 14pt (18.66px) bold, whatever the tag.

Common ways designs fail without meaning to

• Light grey text on white. The most frequent failure by a wide margin. #999999 on white is 2.85:1 — a clear fail. That “subtle secondary text” look needs about #767676 to reach 4.5:1.
• Brand colour on brand colour. Two colours from the same palette can look harmonious while having almost no luminance difference.
• White text over a photo. Contrast against the image’s average brightness hides pockets where a bright patch drops the effective ratio to nothing. A scrim or gradient overlay behind the text is the standard fix.
• Placeholder text as a label. Placeholders are usually styled light grey and usually fail. They also disappear when the user starts typing, which is a usability problem independent of contrast.
• Disabled controls. WCAG formally exempts them, but a disabled button nobody can read is still a button nobody can read.
• Focus indicators. A default browser outline replaced with something prettier and fainter frequently drops below 3:1 — and keyboard users depend on it entirely.

What the ratio doesn’t cover

Passing 4.5:1 is a floor, not proof of readability.

Colour blindness isn’t measured. Red and green of similar luminance can score fine and still be indistinguishable to the roughly 1 in 12 men with a colour vision deficiency. This is why “the required fields are red” fails as a sole signal regardless of contrast — never encode meaning in hue alone.

Thin fonts aren’t measured. A 300-weight typeface at 4.5:1 is measurably compliant and practically harder to read than a 400-weight at the same ratio. The formula sees colour, not stroke width.

Very high contrast can hurt too. Pure #000 on pure #FFF (21:1) causes visible halation for some readers, particularly those with dyslexia or astigmatism. Most well-designed sites use a very dark grey on an off-white — comfortably above the threshold without being maximal.

A note on APCA and WCAG 3

You may run into APCA (Accessible Perceptual Contrast Algorithm), a newer model being developed for WCAG 3. It handles some of WCAG 2’s known weaknesses better — particularly dark mode, where the current formula is widely agreed to be too lenient on light-text-on-dark combinations.

For now, WCAG 2.x AA remains the standard that regulations and audits reference. WCAG 3 is still a working draft with no fixed timeline. Build to 2.x; treat APCA as useful extra signal, not as the target.

Checking your own colours

Color Contrast Checker takes two hex colours and reports the exact ratio plus a pass/fail for all four thresholds above, updated live as you adjust either colour. Checking as you design is far less painful than an audit that flags forty violations at once.

If you’re starting from a screenshot or a design file rather than a known hex code, Image Color Picker samples the exact colour at any pixel first. And Hex to RGB and Hex to HSL are useful when you need to nudge a colour’s lightness slightly to clear a threshold without shifting its hue — HSL is the friendlier space for that, since you can hold hue and saturation fixed and move lightness alone until the ratio passes.