Contrast Checker
Check that text is readable on its background, using WCAG standards.
- 100% free
- WCAG 2 AA and AAA
Last reviewed by the OnlineToolPro team
Large text preview
Normal body text looks like this. Can you read it comfortably?
Contrast ratio
14.85:1
- Normal text · AA (needs 4.5:1)Pass
- Normal text · AAA (needs 7:1)Pass
- Large text · AA (needs 3:1)Pass
- Large text · AAA (needs 4.5:1)Pass
- Icons & UI parts · AA (needs 3:1)Pass
Large text means at least 24px, or 18.5px bold. Thresholds from WCAG 2.
What is the Contrast Checker?
Low-contrast text is hard to read, especially on phones and for people with low vision. This tool calculates the contrast ratio between two colours and checks it against the WCAG AA and AAA levels.
How it works
How to use the Contrast Checker
3 simple steps. No experience needed.
What can you use it for?
- Make sure button text is readable.
- Check brand colours before using them for text.
- Meet accessibility requirements on a website.
FAQ
Frequently asked questions
What ratio should I aim for?
At least 4.5:1 for normal text and 3:1 for large text (WCAG AA). 7:1 meets the stricter AAA level.
What counts as large text?
About 24px and up, or 18.5px and up when bold.
Related tools
Other tools you might find useful next.
More Colour Tools
Convert, check and build colour palettes. 3 free tools.