Colour contrast: why the pretty grey text is a problem
Light grey on white looks refined in a design file and unreadable on a phone in daylight. The contrast rule and how to meet it.
The short answer
Light grey text on a white background looks refined in a design file on a calibrated monitor in a dim studio. On a phone in daylight, on a cheap laptop screen, for anyone over fifty or anyone with low vision, it is somewhere between tiring and invisible. The accessibility standard puts a number on it: normal text needs a contrast ratio of at least 4.5 to 1 against its background, large text and interface components at least 3 to 1. Most fashionable grey body text fails. The fix almost never costs the design anything: a slightly darker shade, a heavier weight or a larger size, decided once in the design tokens and enforced by automated checks.
The requirement
| Element | Minimum contrast ratio | Typical failure |
|---|---|---|
| Normal body text | 4.5 to 1 | Light grey on white; white on a pale brand colour |
| Large text, roughly 24 pixels regular or 19 pixels bold and up | 3 to 1 | Pale headings on light backgrounds |
| Interface components: input borders, icons, focus indicators | 3 to 1 | Faint form field outlines; grey icons |
| Placeholder text | 4.5 to 1, it is text | Almost every default placeholder style |
| Disabled controls, pure decoration | Exempt | Using disabled styling for active elements |
Why it matters beyond compliance
- Low vision is common and increases with age; the customers with the most purchasing power are often the ones squinting.
- Colour vision differences make some combinations vanish entirely.
- Environment: sunlight, glare, dim screens, night mode, battery saving all reduce effective contrast for everyone.
- Reading speed and error rates degrade with contrast for all readers, which shows up in forms abandoned and messages misread.
- Legislation in the EU and elsewhere references the standard, and contrast is the most mechanically checkable requirement in it.
Fixing it without losing the look
Darken the grey a few steps until it passes; the eye barely notices, the ratio jumps. Use the lighter greys where the threshold is lower: large headings, or elements that are decorative. Increase weight or size for secondary text instead of lightening it. Check every text colour against every background it appears on, including hover states, buttons and cards on tinted backgrounds. Put the passing values in the design tokens so every future page inherits them, and let the automated checks catch regressions.
What this means for you
Contrast is the accessibility requirement with no excuse: it is a number, it is checkable in seconds, and the fix is a shade or a weight. Have the site checked, fix the tokens once, and let the pipeline enforce them. Your design will look the same to the people who could already read it, and readable to the people who could not, which is a larger group than most design reviews assume.
Frequently asked questions
Our brand grey is part of our identity. Do we have to change it?
For body text on white, if it fails 4.5 to 1, yes, or use it only for large headings and decorative elements where the lower threshold or no threshold applies. A brand usually survives a slightly darker shade of its grey for running text far better than it survives customers who cannot read the site.
Does the rule apply to placeholder text and disabled buttons?
Placeholder text in form fields is real text people need to read, so yes, and it is among the most common failures. Disabled controls are exempt, which is why disabled should mean genuinely inactive, not a style choice for something people are expected to use.
How do we check the whole site?
Automated accessibility checks in the build and QA pipeline flag every text and background combination that fails, on every page, at desktop and mobile sizes. A design system with contrast-tested tokens prevents new failures from being introduced. Between them, contrast becomes a solved problem rather than a recurring one.
Sources
- W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum) (accessed 2026-09-11)