Developer & Text Utilities · Free
Colour Contrast Checker
Check whether your text colours are readable for everyone, using the WCAG 2.2 contrast standard.
Use the Colour Contrast Checker
Loading tool…
How to use the Colour Contrast Checker
- Enter or pick a text colour and a background colour.
- See the contrast ratio and AA/AAA results.
- Preview how the text looks.
- Use the suggested colour if your combination fails.
About this tool
Contrast is calculated with the WCAG 2.2 relative luminance formula. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1. Ratios are not rounded up, so a pass is a real pass.
Free to use. Your inputs are processed in your browser and are not sent to our servers. Results are for general information; see the disclaimer.
Frequently asked questions
What contrast ratio do I need?
For most websites, aim for WCAG AA: at least 4.5:1 for body text and 3:1 for large text and icons.
What counts as large text?
At least 24px regular, or about 19px bold.
Why does my brand colour fail?
Light or mid-tone colours on white often fall short. Use the suggested darker shade for text and keep the brand colour for larger elements.