The short verdict
- Low contrast is the single most common accessibility failure on the web, and generated sites are no exception.
- The target is simple: 4.5 to 1 for body text, 3 to 1 for large text and interface parts.
- You can fix most of it by changing three or four colour values.
01Why it keeps happening
Soft grey text on a white background looks calm and expensive in a screenshot. Builders learned from thousands of polished design shots, and those shots are often viewed on bright, high-quality screens. On a phone in daylight, or for anyone with weaker eyesight, the same text is hard work.
WebAIM’s yearly scan of the top million homepages finds low-contrast text on the large majority of them. It is the most common problem on the web, not a niche one.
02The numbers to aim for
Contrast is measured as a ratio between the text colour and its background, from 1 to 1 (none) to 21 to 1 (black on white). WCAG level AA sets the minimums most audits use.
| What | Minimum ratio | Example |
|---|---|---|
| Body text | 4.5 to 1 | Paragraphs, labels, captions |
| Large text | 3 to 1 | 24px and up, or 18.7px bold and up |
| Interface parts | 3 to 1 | Input borders, icons, focus rings |
For a sense of scale: the popular Tailwind grey #9CA3AF on white is about 2.5 to 1. It fails for body text. #6B7280 is about 4.8 to 1 and passes.
03Where we find it
Body copy and captions
The main offender. Secondary text set one or two shades too light, often to create hierarchy. Hierarchy should come from size and weight, not from making text harder to read.
Text on gradients and images
White text over a purple-to-blue gradient might pass at one end and fail at the other. Text over a photo depends entirely on which part of the photo sits behind it, and that changes at every screen size.
Placeholder text and disabled states
Placeholder grey is almost always too light. That is one more reason not to use placeholders as labels.
Ghost buttons
A thin outline button in a pale colour on a pale background. The text might pass, but the button’s edge does not, so people do not see it as clickable.
04How to fix it
- Check the palette, not each page. Most sites use three or four greys. Fix those values once and every page improves.
- Darken, do not just bolden. Making light text bold helps a little. Darkening it helps a lot.
- Put a layer behind text on images. A dark overlay at 40 to 60 percent, or a solid panel, keeps contrast stable whatever the photo does.
- Test the worst point of a gradient. Check the text against the lightest colour it ever sits on.
- Keep hierarchy with size and weight. Secondary text can be smaller and lighter in weight while still passing.
“If the design only works when the text is hard to read, the design is the problem.”
05How to check
Chrome DevTools shows the contrast ratio when you inspect any text element. The WebAIM contrast checker lets you paste two hex values. Lighthouse and WAVE will list every failing element on a page. Ten minutes with any of these will tell you how big the job is.
06Questions people ask
Does fixing contrast mean my site has to look harsh?
No. You do not need pure black on pure white. A dark grey on an off-white can pass comfortably and still feel soft.
Does dark mode have the same problem?
Yes, in reverse. Mid-grey text on a near-black background often fails. Check both themes if you have both.
Do logos have to meet contrast rules?
No. WCAG exempts logos and brand names. Text inside your logo can stay as it is.
Can you check my whole site at once?
Yes. Send us the link and we will tell you which colours fail and what to change them to.
