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

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.