Accessible contrast

Text needs ≥ 4.5:1 against its background (3:1 for large text / UI).

How to apply it

Check interactive text with a contrast tool — pale primaries are the usual culprit.

Accessible contrast in practice: a concrete example

The elegant grey that vanishes in sunlight

Light-grey placeholder text at 2.5:1 looks refined in the mockup and disappears on a phone screen outdoors. Raise body text to at least 4.5:1 (and large text to 3:1) and it stays readable for everyone, including the roughly 1 in 12 people with a colour-vision deficiency, for whom the “elegant” low-contrast version was never elegant at all.

Common Accessible contrast mistakes

Treating contrast as a nice-to-have. It's a WCAG AA requirement (4.5:1 for normal text, 3:1 for large) and, in many markets, a legal one.
Checking contrast only against white. The same grey can pass on a white page and fail on a tinted card or image.
Using colour as the only cue for state (error red, success green) with no icon or text label to back it up.

When Accessible contrast doesn't apply

Contrast minimums are floors, not targets. You almost never want to drop below them. The narrow exception is genuinely decorative, non-informational elements like a faint background texture or a disabled control's placeholder, which are exempt. But “it's just a label” usually isn't decorative. It carries meaning, so it counts.

Practise it on a real challenge

Settings — the Save button you can't see

A settings screen shipped with 'Save changes' in pale grey on white — about 1.6:1. The one control that commits the user's work is the one they can't find.

Accessible contrast

How to apply it