whitebackground.io Open editor

Grey Text on a White Background: The Contrast Trap

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.

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: #999999 manages only 2.8:1, #AAAAAA about 2.3:1 — both common in “clean” designs, both unreadable for a large share of users in bright light, on cheap panels, or with aging eyes. Greys that pass comfortably: #595959 (7:1, AAA), #6B6B6B (~5.3:1), #767676 (4.54:1, the AA floor).

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 studio display becomes fog on a three-year-old laptop by a window.

Keeping the aesthetic legally

Use real grey only for genuine secondary content (captions, timestamps) and keep it at #6B6B6B or darker. For body text that should feel softer than black, go #333–#444 — visibly softer than #000, still 9:1+. Or soften the background instead: near-black text on a warm off-white (see off-white backgrounds) gives the low-harshness feel with none of the contrast loss. The inverse rules for dark mode live in white text on dark backgrounds.

Test any color pair yourself with our free contrast checker — live WCAG ratios as you pick.