How to Fix Low Colour Contrast So Your Text Is Readable
Light grey text on a white background looks elegant and reads terribly. Here is how to hit the contrast ratios that keep your text legible for everyone.
Reviewed by Jacob Rhinehart for Strelva's co-founder; products and operations lead responsibilities.
Low colour contrast is the most common accessibility failure on the web, and it usually comes from good intentions: pale grey text looks clean and modern. The trouble is that people with low vision, colour blindness, or simply an aging pair of eyes on a sunny day cannot read it. Contrast is measured as a ratio, and WCAG 2.2 AA sets clear minimums.
The numbers to hit
- Normal text: 4.5:1 contrast against its background.
- Large text (18px and up, or 14px bold): 3:1.
Step by step
- Find the failing pairs. Your audit lists the colour combinations that fall short, with their current ratio.
- Test in a contrast checker. Drop the text and background colours into a free contrast checker to see exactly where you stand.
- Adjust to pass. Darken the text or lighten the background until you clear 4.5:1 for body text. Usually one or two shades darker is enough.
- Fix it globally. Change the colour in your theme settings or CSS variables so every element using that colour updates at once.
- Check the easy-to-miss spots. Placeholder text, disabled buttons, captions, and footer fine print are the usual repeat offenders.
- Handle text on images. Add a dark overlay behind text that sits on a photo so it stays readable regardless of the image.
Keeping your brand
If a brand colour fails, you rarely have to abandon it. A slightly darker shade of the same hue usually passes while still looking like your brand. Readable is not the enemy of beautiful; unreadable is just unfinished.
Frequently asked
What business owners ask next.
What contrast ratio do I actually need?
Under WCAG 2.2 AA, normal text needs 4.5:1 against its background and large text (18px or more, or 14px bold) needs 3:1. A free contrast checker tells you whether a colour pair passes.
My brand colour fails the test. Do I have to change it?
Rarely. A shade or two darker of the same colour usually passes while staying recognisably on-brand. You keep the identity and gain readability.
I changed the colour but the audit still fails. Why?
Hard-refresh to clear the cache, then check that a more specific CSS rule is not overriding your change, and that you fixed it on both mobile and desktop styles.