Colour Contrast Checker
Check if your text is easy to read on its background, test it against WCAG AA and AAA, and get a fixed colour if it fails.
Large heading text
Normal paragraph text. This is how your visitors will read it on your website, in sunlight and on small phone screens.
Small print, like captions or footers. ButtonColour Contrast Checker in 3 steps
- Pick two coloursType the HEX codes or use the colour pickers for text and background.
- Read the resultAA is the normal goal for websites. AAA is the highest level.
- Fix it in one tapIf it fails, use the suggested colour. It keeps your colour’s hue and only changes how light or dark it is.
Want a website everyone can use?
We design accessible, fast websites in your brand colours, tested on phones, tablets and screen readers.
Common questions
What contrast ratio do I need?
WCAG AA needs at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold) and for buttons and icons. AAA needs 7:1 for normal text and 4.5:1 for large text.
Why does contrast matter?
Low contrast is hard to read in sunlight, on cheap screens and for people with low vision. Good contrast helps everyone and is part of accessibility laws in Australia, the UK and the US.
Is light grey text OK?
Often not. Light grey on white is one of the most common failures. Try it here: most greys lighter than #767676 fail on white.
How is the ratio worked out?
We use the WCAG 2 formula: the relative brightness of the lighter colour plus 0.05, divided by the darker colour’s plus 0.05. The result goes from 1:1 (no contrast) to 21:1 (black on white).