Color contrast beyond 4.5:1: a practical guide

Where 4.5:1 comes from

WCAG's contrast ratio compares the relative luminance of two colors, on a scale from 1:1 (identical) to 21:1 (black on white). The 4.5:1 threshold in success criterion 1.4.3 wasn't pulled from the air — it's calibrated so that text remains readable for users with 20/40 vision (roughly typical for a 70-year-old) and moderate color deficiencies. That's why contrast is the accessibility requirement with the broadest beneficiary group: it's not just blind users — it's most users over 50, anyone on a cheap panel, and everyone outdoors.

The actual rules, in one table

What	Level AA	Level AAA
Normal body text	4.5:1	7:1
Large text (≥ 24px, or ≥ 18.66px bold)	3:1	4.5:1
UI components & graphical objects (1.4.11)	3:1	3:1
Logos, decorative text, disabled controls	exempt

The one people miss is the third row: since WCAG 2.1, non-text contrast (1.4.11) requires 3:1 for the parts of UI components you need to perceive — input borders, focus indicators, icon-only buttons, the selected state of a tab, the slices of a chart. A pale-gray input border at 1.4:1 against white is one of the most common failures on the modern web, and no amount of body-text discipline fixes it.

When AAA's 7:1 is worth it

AAA contrast (1.4.6) targets readers with 20/80 vision. The W3C itself says AAA conformance across an entire site isn't always achievable — but contrast is one of the cheapest AAA criteria to meet, because it's a design-token decision, not a per-page one. If your product serves an older demographic, healthcare, government, or long-form reading, set body text at 7:1 and you've bought real usability, not just a badge. (This site's body ink on its paper background is over 14:1.)

Keeping the brand palette alive

The standoff is always the same: the brand color fails on white, and the design team won't replace it. You don't have to. The practical playbook:

• Split the role from the color. Keep the bright brand color for large headlines, fills, and decoration (where 3:1 or no minimum applies) and derive a darker "ink" variant of the same hue for body-size text and links. Users perceive them as the same brand.
• Test the pair, not the swatch. A color isn't accessible or inaccessible — a combination is. Brand orange may fail on white but pass beautifully on near-black.
• Mind text on photos and gradients. The ratio must hold at the worst point, not the average. Scrims, blurred backdrops, or solid text plates are the honest fixes.
• Don't forget states. Hover, focus, visited, placeholder, selection. Placeholder text is the serial offender — that default light gray usually sits around 2.5:1.

Two myths worth killing

"Disabled buttons need to pass." They don't — disabled controls are explicitly exempt. But if users need to read why something is disabled, that explanation needs contrast.

"Higher is always better." Mostly true, with one caveat: some readers with dyslexia or light sensitivity find maximum-contrast pure black on pure white harsh. Slightly warm off-whites (like this page) keep AAA ratios while softening glare. Contrast requirements are floors, not aesthetics — you have room to design above them.

Make it unfailable

Contrast is the most automatable WCAG criterion in existence: two colors, one formula, a deterministic answer. There is no excuse for a contrast failure to survive past the editor. Encode your passing pairs as design tokens, lint against hard-coded colors, and let your tooling do the arithmetic forever.