All UX laws

Accessible contrast

Text has to stand out from its background enough for everyone to read it.

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

Accessible contrast, side by side

Grey-on-white looks refined on your monitor and disappears on a laptop outdoors. AA needs 4.5:1 for body text.

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.

Put Accessible contrast into practice

  • UI Design System Manager — Track components, tokens, and brand in one source of truth.
  • Product Designer Workspace — From concept to launch, without losing the thread.

Related reading

  • UX audit: what it is and how to run one, with a checklist
  • Bad UX examples: 10 common mistakes and how to fix them

More UX laws

  • WCAG 1.4.3 Contrast
  • WCAG 2.5.5 Target Size
  • WCAG baselines
  • Aesthetic-Usability Effect
  • Alignment Principle
  • Calibrated Trust
UX QuestUX Laws and PrinciplesNotion TemplatesBlogPricingAboutContactPrivacy PolicyTerms of ServiceRefund PolicySitemapChangelogPopular UX laws:60-30-10 RuleDesign every stateStatistical PowerFunnel TriageAccessible contrastDensity Matches ContextHick's LawFitts's LawAll UX laws