The same grey passed on a white background but fails on my store's beige background. Why?

The grey that sits on the edge

#767676 is popular with designers because it is one of the lightest greys that passes on white for normal text. That is exactly its weakness: the margin is tiny. 4.54:1 clears the line by a sliver, so any shift of the background toward darker knocks it under. Its neighbour #777777 already fails on white at 4.48:1.

Beige, cream and off-white are favourite backgrounds for perfume, bakery and fashion stores because they feel warmer than white. They are also a little darker than white, and that little is enough to eat the whole grey margin.

Check it yourself in a minute

1. Open the Color contrast checker, type #767676 in 'Text color' and #FFFFFF in 'Background color': 4.54:1 and a pass for AA normal text.
2. Change the background to your store colour, for example #F5F0E6: 4.00:1, and 'AA normal text' is now a fail.
3. Watch the live sample: the difference may not catch your eye on your screen, but the number does not flatter.

Where to get the right background colour

The common mistake is checking text colours on white because that is the default in design tools, then shipping the site on a different background. Take the background colour straight from your store theme settings where you can. If you cannot find it, take a screenshot of the page, open it in the Image color picker and click the background area behind the text to get its code.

If the page has more than one background, such as a beige page with white product cards, check the text against every background it appears on. One ratio is not enough for a colour that moves between sections.

The fix: a shade slightly darker

• In the suggestions section, with background #F5F0E6 and the 4.5:1 target, 'Nearest darker color' shows #6D6D6D at 4.56:1.
• The same shade on white gives 5.17:1, so it passes on both backgrounds and you can use it across the whole store.
• Brand colour #0F6B5F on the beige gives 5.62:1 and passes, so not every colour is hit equally; colours with a wide margin cope with warm backgrounds.

The practical rule: do not pick a text colour that barely clears the line on white if your background is not white, or if you expect to change the background later. Let the number on the real background decide. A pass here is about reading the colour only, not proof that the store is fully accessible.