Colour contrast checker
If people cannot read your headline, nothing else on the page matters. Check any two colours against the WCAG standard.
Your colours
Type a hex code or use the picker. Everything updates live.
Contrast ratio
How to use this colour contrast checker
- Enter your text colour.
- Enter your background colour.
- Read the ratio and the pass or fail for each text size, or swap the two colours to compare.
Who it is for
For designers, developers and site owners checking whether text is readable and whether a page passes Lighthouse's color contrast audit.
What the ratio means
Contrast is measured as a ratio between the lightness of two colours. Black on white is 21:1, the highest possible. Two identical colours are 1:1.
| Needs | Applies to | Level |
|---|---|---|
| 4.5:1 | Normal body text under 18px | AA |
| 3.0:1 | Large text: 24px+, or 19px and bold | AA |
| 3.0:1 | Buttons, form borders, icons | AA |
| 7.0:1 | Body text, strictest level | AAA |
Where this actually bites
The problem is rarely the main body text. It is the small grey things almost everyone gets wrong:
- Light grey captions under headings and images
- Placeholder text in form fields
- Brand colours used as text. A bright orange that looks great as a button fill is often unreadable as text on white — the same colour can pass as a background and fail as a foreground.
- Text over photographs, where the contrast changes with the image. Those need a dark overlay behind the text, not a colour change.
Why this is not only an accessibility question
Around one in twelve men has some form of colour vision deficiency. Far more people are reading on a phone, outdoors, on a dim screen, or with tired eyes at the end of the day.
Low-contrast text does not just fail an audit — it quietly costs you readers, and on a landing page it costs you enquiries. It is one of the cheapest fixes available: change one hex code.
Common questions
What contrast ratio does WCAG require?
Level AA needs at least 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 and 4.5:1.
What is the difference between AA and AAA?
AA is the level most organisations aim for and the one that appears in most legal requirements. AAA is stricter and often impractical for a whole site. Passing AA everywhere is a good, realistic target.
Does this apply to text over an image?
The maths applies, but you have to know which colour the text actually sits on — and over a photo that changes pixel by pixel. The reliable fix is a dark overlay behind the text so the background is predictable, rather than adjusting the text colour.
My brand colour fails. What should I do?
Keep the brand colour for large elements — buttons, fills, icons, big headings — and use a darker version of it for body text. That is very common practice, and readers do not notice the difference.
Need more customers as well?
This tool is free and always will be. If you also want ads, search and follow-up that bring in customers, I offer a free 45-minute consultation for businesses in the USA, UK, UAE, Australia and India.
Book a free consultationBuilt and maintained by Premkumar Ragav, an independent performance marketing specialist. Updated November 2026.