Free tool
Color Contrast Checker
Make sure everyone can read your website. Check any colour pair against WCAG accessibility standards with a live preview.
Try a pair
Large heading text
Normal body text looks like this. Can everyone read it comfortably?
Contrast ratio
5.96:1
- AA normal text (4.5:1)Pass
- AA large text (3:1)Pass
- AAA normal text (7:1)Fail
- AAA large text (4.5:1)Pass
- UI components & icons (3:1)Pass
Why colour contrast matters
About 1 in 12 men has some form of colour blindness, and everyone struggles with low contrast on a phone in sunlight. Good contrast makes your site easier to use for every visitor.
Tips for brand colours
- Bright brand colours often work best as backgrounds with dark text on top.
- Keep body text close to black on white (or white on near-black).
- Check hover and disabled states too, not just the default.
FAQs
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). AAA needs 7:1 and 4.5:1.
Does contrast affect SEO?
Indirectly. Accessibility audits like Lighthouse flag low contrast, and readable pages keep visitors longer.
What counts as large text?
Text at least 18pt (24px) regular, or 14pt (about 19px) bold.
Do buttons and icons need contrast too?
Yes. WCAG asks for 3:1 between UI components like buttons, form borders and icons and their surroundings.
More free tools
Website Grader
Score any website for SEO, speed, mobile, trust and AI search, with a fix list.
App Cost Estimator
Ballpark the hours, weeks and cost of a web app, mobile app or internal tool.
Customer Lifetime Value Calculator
Work out customer lifetime value, CAC and your LTV:CAC ratio in seconds.
Sales Funnel Calculator
Model every funnel step, find your biggest drop-off and see what fixing it is worth.
Want experts to do it for you?
Book a free strategy call. We'll audit your current marketing and show you exactly where the growth is.