In plain English
Pale gray text on a white background looks sleek in a design mockup, and is a struggle to read for millions of people. This rule puts a number on “readable”: your text has to be dark enough (or light enough) against whatever is behind it.
The magic numbers are 4.5:1 for normal text and 3:1 for large text (about 24px, or 18px bold). The bigger the ratio, the more the text pops. Pure black on white is 21:1; light gray on white might be 2:1 and fail.
Who this is for
- People with low vision, which is common and increases with age, a huge share of online shoppers.
- Anyone in bright light, like a phone outdoors where glare washes the screen out.
- People with color vision differences, who lose some of the subtle distinctions a design relies on.
What “good” looks like
Check the ratio between each text color and the color directly behind it, and meet the threshold for its size.
Body text (16px): needs 4.5:1 → #55565d on #ffffff = 5.2:1 ✓ pass
Large heading (32px): needs 3:1 → #8a8d99 on #ffffff = 3.1:1 ✓ pass
"Sale" label (13px): needs 4.5:1 → #b8bcc4 on #ffffff = 2.0:1 ✗ failOnly the contrast between the text and its background counts. Making the page white doesn’t help if the text sits on a mid-gray card or a photo.
Where stores get it wrong
The repeat offenders: faint placeholder text in form fields, light-gray “helper” and price-comparison text, sale badges in brand pastels, and white captions laid over product photos where the photo is sometimes light. Theme defaults are often just barely under the line. Our guide on hitting 4.5:1 in Shopify themes walks through fixing these without wrecking your brand look.