What is color contrast?

Color contrast is the luminance ratio between text colour and its background — WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px regular). The ratio runs from 1:1 (identical colours — invisible) to 21:1 (black on white). It's an accessibility requirement, not a style preference: roughly 1 in 4 adults has some form of vision limitation, and for them a 2.8:1 grey-on-white paragraph isn't merely awkward — it's unreadable. Contrast is also the accessibility failure most likely to affect every user, since everyone reads grey text on a phone in sunlight.

The audit resolves the computed styles of text elements — colour, background, font size and weight, including text sitting over images via overlays and gradients — and calculates the WCAG contrast ratio for each, flagging the elements below threshold with the measured ratio and the failing selector. Design-system failures cluster: one pale-grey token used in body copy fails the same way on every page, which is why findings typically name a handful of components rather than scattered one-offs.

In the corpus: 18 of 28 sites had at least one contrast failure — tied for the most common accessibility finding we generate, level with ambiguous link text and identical-purpose links (both 18/28), and ahead of missing skip links (17/28).

The human cost is exclusion of a known-sized group: low-vision, colour-blind and older visitors — plus everyone on a cheap phone in daylight. The legal cost is real and rising: contrast is a WCAG 2.1 AA criterion, the level referenced by the ADA in US demand letters and lawsuits (thousands per year, e-commerce targeted) and required by the European Accessibility Act from mid-2025. Contrast failures are the most-cited criterion in virtually every published overlay of accessibility lawsuits.

The business cost is quieter: low-contrast text is read less — by everyone. If your pricing, your phone number, or your checkout button is the pale-grey element, the friction lands exactly where you can least afford it.

1. Test your palette — every text colour against every background it appears on, using a checker like WebAIM's Contrast Checker. Feed it the real hex values from your CSS; the report's fix list names the failing pairs with their measured ratios.
2. Fix the design tokens, not the instances. If the grey used for body text is 2.9:1, darken the token once and every page inherits the fix. Target 4.5:1 for body text; 7:1 (AAA) where you're feeling generous.
3. Watch the classic offenders: light grey body text (the default sin of minimal design), placeholder text in form fields, white text on photos without a dark overlay, and low-contrast buttons — a button nobody can read is a conversion bug, not just an a11y one.
4. Don't rely on colour alone to carry meaning — pair the red error state with an icon or label, so colour-blind users get the message too.
5. Re-verify after any rebrand. Contrast passes die quietly when someone swaps the palette — add the check to your launch checklist, or let a recurring audit catch it.

• Accessibility auditing — The full WCAG pass our report runs, explained.
• What is a title tag? — Another top-corpus finding — the search-side basics.
• What 28 real audits found — The frequency data behind this series.