WCAG color contrast: the 4.5:1 rule, explained properly

Published October 19, 2026 · about a 7-minute read

If you run an automated accessibility scan on almost any website, the single biggest pile of errors it spits back is color contrast. Low-contrast text is everywhere — that trendy light-grey-on-white body copy, the pale placeholder in a search box, the ghostly disabled-looking button that's actually clickable. It's also the single easiest category to fix, because it's math, not judgment. Let me lay out what WCAG actually asks for, including the part most people miss.

The ratio, and what it means

WCAG measures contrast as a ratio between the luminance of your text and the luminance of whatever sits directly behind it. Pure black on pure white is 21:1, the maximum. Identical colors are 1:1. The requirement depends on the conformance level and the text size:

Almost every law, procurement rule and internal policy I've seen targets Level AA, so in practice the numbers you care about are 4.5:1 for ordinary text and 3:1 for large text and interface bits. AAA is a stretch goal; most real sites don't hold themselves to 7:1 across the board, and WCAG itself doesn't recommend AAA as a blanket requirement. These thresholds haven't changed in WCAG 2.2 — they're the same as 2.0 and 2.1, so nothing you learned is out of date.

What counts as "large text" (the loophole people misuse)

Large text gets the easier 3:1 bar because big letterforms stay readable at lower contrast. The definition:

• 18pt or larger at regular weight — roughly 24px in CSS.
• 14pt or larger if bold — roughly 18.66px bold.

I see teams reach for this as an escape hatch: "the heading's big, so 3:1 is fine." Sometimes true. But your body text, form labels, nav links and captions are almost never large text, so they owe the full 4.5:1. Don't let one compliant <h1> convince you the page passes.

The rule everyone forgets: non-text contrast

Here's the one that trips up even careful teams. Success Criterion 1.4.11 (Non-text Contrast) is also AA, and it requires 3:1 for meaningful non-text things against their neighbors:

• Input borders. That elegant form field with a 1px #e0e0e0 border on white? It's likely under 3:1, which means a low-vision user can't see where the field is.
• Focus indicators. The outline that shows which element is selected when you tab through — it has to be visible, not a faint 1px hairline.
• Icon-only buttons and meaningful graphics. A hamburger menu or a chart segment you need to understand the content.

Automated scanners catch text contrast reliably but are weaker on 1.4.11, because deciding what's "meaningful" takes judgment. So this is exactly the kind of thing that passes an automated check and still fails a real accessibility audit. Check your focus states and form borders by hand.

What's exempt

Not everything needs to meet the ratio. WCAG explicitly exempts:

• Logos and brand names — a logo's colors aren't regulated.
• Disabled / inactive controls — a greyed-out button that genuinely can't be used.
• Pure decoration — text in a background image that conveys nothing.
• Incidental text — text that happens to be in a photo you didn't stage.

Don't over-apply these. "It's basically decorative" is a story teams tell themselves about text that actually matters. If a user needs to read it or act on it, it's in scope.

Where APCA fits (short version: not yet)

You'll hear about APCA — the Advanced Perceptual Contrast Algorithm. It's a newer, more perceptually accurate way to measure contrast, and it genuinely handles dark mode better than the old ratio math, which can mislead you on dark backgrounds. APCA is being prototyped for the future WCAG 3. But WCAG 3 is still a working draft with no conformance status, so for anything you have to actually certify today — an ADA posture, a VPAT, an EAA obligation — you measure against WCAG 2's 4.5:1 and 3:1. Use APCA as a design sanity check if it helps; don't report compliance against it.

Fixing it is usually a few lines

The good news: contrast failures are the cheapest accessibility wins you'll ever ship. You're not restructuring markup or rewriting components — you're darkening a grey. Take your #999 body text to something like #595959 on white and you clear 4.5:1. Give form inputs a border that actually hits 3:1. Make the focus ring 2px and visible. A single afternoon on a design system's color tokens can wipe out the majority of a site's reported errors.

The catch is drift: a new marketing section ships with pale-grey captions, a rebrand lightens the link color, a dark-mode variant nobody contrast-checked goes live. Contrast isn't a one-time fix, it's a thing that rots. Re-check after every visual change.