Color Contrast Checker
Test whether text colours are readable and meet WCAG accessibility rules.
How to use: Pick or type the text colour and background colour; the contrast ratio and pass or fail results update instantly. Use the suggestion to fix a failing colour.
Large heading text
Normal body text looks like this. The quick brown fox jumps over the lazy dog.
Small print and captions.
How to use the Color Contrast Checker
Low-contrast text is one of the most common accessibility problems on the web. It makes reading hard for people with low vision, colour blindness or ageing eyes, and for everyone using a phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios so text stays readable.
Choose a text colour and a background colour with the pickers or type HEX codes. The tool calculates the contrast ratio, from 1:1 for identical colours up to 21:1 for black on white, using the relative luminance formula from WCAG 2. It then checks each rule: AA requires 4.5:1 for normal text and 3:1 for large text, while the stricter AAA level asks for 7:1 and 4.5:1. Icons, input borders and other interface parts need at least 3:1.
Large text means at least 24 pixels, or about 18.7 pixels if bold. The preview shows your colours at several sizes so you can judge them yourself.
When a combination fails AA, the checker suggests the closest version of your text colour, darker or lighter with the same hue, that passes. Click it to apply. Everything runs in your browser.
Frequently asked questions
What contrast ratio do I need?
At least 4.5:1 for normal text and 3:1 for large text to meet WCAG AA, which most laws and policies refer to.
Does colour blindness matter here?
Contrast ratio is based on brightness, which helps everyone, but you should also avoid using colour alone to convey meaning.
Why is grey text on white often failing?
Light greys such as #999 only reach about 2.8:1 on white. Use #767676 or darker for body text.