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
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 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.
Want this checked on your real account?
A tool can only work with the numbers you give it. If you want someone to look at what is actually happening in your ad account, the first conversation is free.
Book a free consultation