Colour contrast for websites: ratios, tools and quick fixes
Low contrast is the most common issue automated scans find. Light grey text, pastel buttons and text over photos are hard to read for people with low vision, older visitors, and anyone looking at a phone in sunlight.
The numbers
- 4.5:1 for normal body text (WCAG 1.4.3, AA).
- 3:1 for large text: 24px regular, or about 18.5px bold.
- 3:1 for icons, input borders and focus indicators that people need to see (WCAG 1.4.11).
How to test
Use a contrast checker (WebAIM's is free): paste the text colour and background colour. Browser developer tools also show the ratio when you inspect text. For text on photos, test against the lightest part of the image behind the text.
Quick fixes
- Darken the text rather than changing your brand colour: #767676 is about the lightest grey that passes on white.
- For brand-colour buttons that fail with white text, use dark text instead, or a darker shade of the brand colour.
- For text over images, add a semi-transparent dark overlay:
.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.hero > * { position: relative; }
Don't forget
Placeholder text, disabled-looking links, footer text and cookie banners are frequent offenders.
Related guides
- How to make your contact form accessible
- How to test your website with only a keyboard (5-minute check)
- Accessibility overlay widgets vs. fixing your site's code
- Heading structure: how H1–H6 help accessibility and SEO
Check your own site
Run a free homepage snapshot to see your top 3 issues, or order the $149 Fix-Pack for up to 10 pages with copy-paste fixes.