Light grey text on white is the signature look of minimalist design — and one of the most quietly hostile choices on the modern web. The aesthetic is real. So is the failure rate: a large share of the greys designers reach for do not meet the minimum contrast that body text requires, and the people it excludes are exactly the ones who cannot complain about it in a usability test.
Where the line actually is
On a pure white background, WCAG AA (4.5:1) for body text draws the line at roughly #767676. Anything lighter fails.
| Grey on #FFFFFF | Ratio | Verdict |
|---|---|---|
| #333333 | 12.6:1 | AAA — soft “black” for body text |
| #444444 | 9.7:1 | AAA |
| #595959 | 7.0:1 | AAA floor |
| #6B6B6B | 5.3:1 | AA — good secondary text |
| #767676 | 4.54:1 | AA floor for body text |
| #888888 | 3.5:1 | Fails body text; passes large text only |
| #999999 | 2.8:1 | Fails |
| #AAAAAA | 2.3:1 | Fails |
| #CCCCCC | 1.6:1 | Fails — decorative only |
#999999 and #AAAAAA are everywhere in “clean” templates. Both are unreadable for a large share of users in bright light, on cheap panels, on phones outdoors, or with aging eyes.
Why designers keep failing this
Design happens on excellent monitors, at full brightness, with young eyes, in controlled lighting. Every one of those advantages disappears in the real world. A grey that looks refined on a calibrated studio display becomes fog on a three-year-old laptop next to a window. Contrast is not a taste judgment made at the desk; it is a floor that has to hold on the worst screen your reader owns.
The hierarchy myth
The usual defense is “it’s secondary text — it’s supposed to recede.” Hierarchy is legitimate; illegibility is not. You can signal secondary content with size, weight, spacing and position while keeping the color at #6B6B6B or darker. Captions, timestamps and helper text are still content someone needs to read.
Keeping the aesthetic legally
- Body text: #333–#444Visibly softer than pure black, still 9:1+. This alone delivers most of the “not harsh” feel people want from grey.
- Secondary text: #6B6B6B minimumReads as grey, passes AA with margin, survives elevated surfaces and slight tints.
- Soften the background insteadNear-black text on a warm off-white (#FAF9F6, #F7F5F0) gives the low-harshness look with none of the contrast loss. See off-white backgrounds.
- Never grey on greyGrey text on a light grey card compounds the problem. Re-check every surface.
- Large text can go lighterAt 24px+ (or 18px bold) the requirement drops to 3:1 — #888888 passes there, and only there.
Placeholder text, the worst offender
Form placeholders default to light grey in most frameworks and routinely land near 2.5:1. Users with low vision cannot read what the field is asking for. Style placeholders to at least #767676, or move the label outside the field where it belongs.
Test any color pair yourself with our free contrast checker — live WCAG ratios as you pick.
Frequently asked questions
What is the lightest grey that passes on white?
#767676 is the AA floor for body text (4.54:1). For AAA, #595959 (7:1).
Does #999999 pass WCAG on white?
No — 2.8:1. It fails body text and even fails the 3:1 large-text minimum.
Is grey text easier on the eyes than black?
Very dark grey (#333–#444) can feel softer on bright screens with negligible legibility loss. Light greys are not “easier” — they are simply harder to see.
The inverse problem — light greys on dark — is covered in white text on dark backgrounds. And for the science of why dark-on-light works at all, see black text on white.