Is grey text on white readable? Usually not — here's the line.

Grey text on a white background is everywhere — and most of it fails. It’s the single most common contrast mistake on the web, and it’s easy to see why: light grey looks calm, modern and understated in a design mockup, on a bright monitor, indoors. Then it ships, and a big chunk of your audience can’t read it.

Let’s put actual numbers on it.

Where grey stops working

On a pure white background (#FFFFFF), here’s roughly how common greys score against the WCAG AA threshold for normal text, which is 4.5:1:

#767676 — about 4.5:1. This is the lightest grey that passes for body text on white. Anything lighter fails.
#999999 — about 2.85:1. Fails. Yet this is a hugely popular choice for secondary text.
#AAAAAA — about 2.3:1. Fails clearly.
#CCCCCC — about 1.6:1. This is barely distinguishable from the background.

So the practical rule is simple: on white, #767676 is your floor for normal text. If your grey is lighter than that, it doesn’t pass — no matter how nice it looks in Figma.

Test your exact pair in the contrast checker — it’ll tell you instantly whether you’re above or below the line.

Why “it looks fine to me” is a trap

The reason grey-on-white keeps happening is that it genuinely does look fine — to the person choosing it. Designers tend to have good eyes, good screens, good lighting and are looking at the text up close while they work. Strip away any one of those advantages and the pale grey starts to disappear:

On a phone in daylight, glare flattens the contrast.
On a cheap or ageing monitor, the light end of the range is compressed.
For anyone over about 50, the eye simply needs more contrast to resolve the same text.

You’re not designing for your own eyes on your own screen. You’re designing for the worst realistic combination of reader, device and lighting.

The places grey fails most

It’s rarely the main body text that’s the problem — it’s the secondary text, which is exactly the text people most need to read carefully:

Form placeholder and helper text. “Enter your email” in pale grey, then the hint below it in even paler grey.
Captions and metadata. Timestamps, author names, image credits.
Disabled states. Often faded so far they drop below 2:1.
Footer links. Grey-on-grey in the footer is a classic.

How to fix it without losing the look

You don’t have to switch to harsh black. You have two easy levers:

Darken the grey. Going from #999 to #767676 keeps the same neutral, understated feel and clears AA. If you want comfortable headroom, #595959 (about 7:1) also hits the stricter AAA level.
Make the text bigger or bolder. Large text (24px+ regular, or 19px+ bold) only needs 3:1, so a heavier or larger grey has more room. But be careful — a grey that only passes because it’s large will still fail everywhere you use it small.

Generally, darkening the colour is the better fix, because it works at every size. Save the “make it bigger” move for genuine headings.

The quick checklist

On white, normal grey text needs to be #767676 or darker.
#999 and #AAA are popular and both fail.
Secondary text (hints, captions, disabled states) is where this bites hardest.
Darken the grey rather than relying on a large font size.

Paste your two colours into the checker and you’ll know in about a second whether your grey is on the right side of the line. If it isn’t, the “Fix it for me” button will hand you the nearest grey that passes.