Can people read it?
Pick a text colour and a background colour and see the contrast ratio, whether it passes the accessibility standard, and the nearest colour that does.
Everything is worked out in your browser. Nothing is sent anywhere.
The tool
Large text sample
Normal text sample. The quick brown fox jumps over the lazy dog.
5.74 to 1
Good. This pair meets the usual standard for body text on a website.
- Normal text, AA (needs 4.5 to 1)Pass
- Large text, AA (needs 3 to 1)Pass
- Normal text, AAA (needs 7 to 1)Fail
- Large text, AAA (needs 4.5 to 1)Pass
- Icons and borders (needs 3 to 1)Pass
What the numbers mean.
4.5 to 1
The usual minimum for normal text on a website (WCAG AA). Most brand palettes need one text colour chosen with this in mind.
3 to 1
Enough for large text, icons and borders, but not for body copy.
7 to 1
The stricter AAA level, comfortable for almost everyone.
Brand colours
A logo colour is not always a good text colour. Keep one darker version of each brand colour for text.
About this tool.
Something we haven’t covered? Ask us.
What do AA and AAA mean?
They are levels in the Web Content Accessibility Guidelines. AA is the usual target for websites and needs a contrast ratio of at least 4.5 to 1 for normal text. AAA is stricter, at 7 to 1.
What counts as large text?
Text of about 24 px or more, or about 19 px or more when bold. Large text needs a lower ratio, 3 to 1 at AA.
How is the ratio worked out?
From the relative luminance of the two colours using the WCAG formula. The tool shows the result to two decimal places.
Why does it suggest a different colour?
If the pair fails, it finds the closest colour to your text colour, keeping the same hue, that passes AA on your background. It is a starting point, not a design decision.
Need a hand?
If your brand colours fail on a website, we can adjust the palette without losing the character of the brand.
Start a projectWe reply within four working hours, from a person.