Light grey text on a white background looks calm and modern. It is also the single most common accessibility failure on the web. In WebAIM's 2026 study of a million home pages (external site), text with too little contrast turned up on 83.9% of them, well ahead of every other problem.

It is common because someone usually chose that grey on purpose, on a bright, sharp monitor, where it read perfectly well. The people it fails are reading on something else, or with different eyes.

Who it affects

The World Health Organization estimates that at least 2.2 billion people (external site) have a near or distance vision impairment. For many of them, faint text is the difference between reading a product description and giving up on it. The W3C puts it plainly: "Some people cannot read faint text."

Contrast also catches people with perfectly good eyesight: anyone reading a phone outdoors in sunlight, on a cheap screen with washed-out colours, or late at night with the brightness turned down. Most of your customers will hit at least one of those this week.

What a contrast ratio is

Contrast is measured as a ratio between the lightness of the text and the lightness of the background. It runs from 1:1, where the two are identical and the text is invisible, up to 21:1, which is black on white.

The Web Content Accessibility Guidelines set two thresholds for text (external site):

  • 4.5:1 for normal text.
  • 3:1 for large text, which means at least 18 point (about 24 pixels), or 14 point bold (about 18.5 pixels).

Logos and brand names are exempt, and so are buttons and fields that are switched off.

Here is how a few common greys do on a white background:

Text colour Contrast on white Passes for normal text?
#CCCCCC 1.61:1 Fails
#999999 2.85:1 Fails
#777777 4.48:1 Fails, just
#767676 4.54:1 Passes
#595959 7.0:1 Passes comfortably

The line falls between two greys that look almost the same. That is why it pays to measure: the difference between passing and failing is often too small to see, and still large enough to matter to someone with low vision.

Where it hides on a store

A few places come up again and again:

  • Grey body text and descriptions. The product description, the small print under a price, delivery notes.
  • Placeholder text in forms. The faint "Enter your email" inside a field is usually far below 4.5:1, and some people mistake it for a field that is already filled in.
  • Text on photos. A banner headline over a busy product shot can pass on one part of the image and fail on another. A solid or semi-transparent panel behind the text fixes it.
  • Brand-coloured buttons. Bright yellows, oranges and light greens are popular for buttons, and white text on them often fails.
  • Sale prices and badges. Small red or pink text on a light background is easy to get wrong.

The parts that are not text

A second rule covers everything else people need to see in order to use the page. Non-text contrast (external site) asks for at least 3:1 against the surrounding colours for the visual information that identifies controls and their states, and for the parts of graphics needed to understand them.

In practice that means the border of a text field, so people can find it; the outline that shows which element has keyboard focus; icons that act as buttons, like the basket or the search glass; and the difference between a selected and an unselected option, such as the chosen size of a shirt.

A colour we changed ourselves

Allcess's own brand orange is #FF5A1F. With white text on it, the contrast is 3.12:1, which passes for large text but fails for the normal-sized labels on most buttons. So the buttons on this site use a deeper orange, #CC4410, where white text reaches 4.77:1. The bright orange stays in the logo and the small marks, where no one has to read anything off it.

Most brands can do the same: keep the signature colour for decoration, and use a slightly darker or lighter shade of it wherever text sits on top.

How to check your store

  1. Run a scan. Contrast is one of the things automated tools test well, because it can be measured exactly. A scan lists every piece of text that fails and the ratio it reached.
  2. Check your brand colours once. Put your text and background colours into the free WebAIM Contrast Checker (external site). Do this for body text, buttons, links and prices, and write down the pairs that pass.
  3. Fix it in the theme. Contrast problems almost always come from a handful of colour settings in your theme, so changing three or four values usually fixes them across the whole store.
  4. Look at it on a phone outside. It is an unscientific test, and a very convincing one.

Most visitors will never notice that your text got a little darker, and the ones who needed it will finally be able to read what you wrote.

Sources