Free color contrast checker
Enter a text colour and a background colour to see the contrast ratio and whether it passes WCAG AA and AAA for normal and large text. If it fails, the tool suggests a nearby colour that passes.
The quick brown fox jumps over the lazy dog. مرحبا بكم في متجرنا.
- Normal text, AA (4.5:1)Pass
- Large text, AA (3:1)Pass
- Normal text, AAA (7:1)Pass
- Large text, AAA (4.5:1)Pass
- Icons and buttons (3:1)Pass
Free, no sign-up. It runs in your browser: your files and text never leave your device.
What is color contrast?
Contrast is the difference in brightness between text and the colour behind it, written as a ratio from 1 to 1 (none) to 21 to 1 (black on white). Low contrast, like pale grey on white, is hard to read for many people, especially in sunlight, on a small phone or with low vision.
The Web Content Accessibility Guidelines (WCAG) set the targets. Level AA needs 4.5 to 1 for normal text and 3 to 1 for large text and for the parts of a screen people need to see, such as buttons. Level AAA needs 7 to 1 and 4.5 to 1. Large text means 18 point, or 14 point bold, and bigger.
How to check colour contrast
- Enter your text colour and your background colour, or pick them with the colour boxes.
- Read the ratio and the pass or fail for each WCAG level.
- If it fails, use the suggested colour: it keeps your hue and changes only the lightness until it passes.
Questions people ask
What contrast ratio do I need?
At least 4.5 to 1 for normal text (WCAG AA) and 3 to 1 for large text. For the strictest level, AAA, 7 to 1 for normal text.
What counts as large text?
Text of 18 point (24 pixels) or bigger, or 14 point (about 18.7 pixels) bold or bigger.
Does contrast matter for social media posts?
Yes. Text in a post or a Story that is hard to read gets scrolled past. Aim for at least 4.5 to 1 and avoid text over busy parts of a picture.
Is the check done on a server?
No. The colours are compared in your browser.