Colour Contrast Checker
Check any text and background colour pair against WCAG AA and AAA contrast ratios, with an instant pass or fail. A free accessibility checker.
Colours
Large heading text
Body copy at a normal size — this is the hardest case to pass, and the one most of your readers actually see.
Small print and captions
Contrast result
- Normal text · AA4.5:1Pass
- Normal text · AAA7:1Pass
- Large text · AA3:1Pass
- Large text · AAA4.5:1Pass
- UI components & graphics3:1Pass
Check text colours against WCAG before shipping
Enter a text colour and a background, as hex, rgb(), hsl() or a CSS colour name, and the contrast ratio appears to two decimal places along with a pass or fail for each WCAG 2.2 threshold: 4.5:1 for normal text at AA, 7:1 at AAA, 3:1 and 4.5:1 for large text, and 3:1 for user-interface components and graphics under success criterion 1.4.11. A sample block renders a heading, body copy and small print in the chosen pair so the numbers can be judged against actual text.
Large text means 24px and above, or 18.66px (14pt) and above when bold; anything smaller is normal text and needs the higher ratio. Body copy is the case that fails most often, which is why the sample includes a paragraph rather than just a headline. A swap button reverses the two colours, useful when checking a dark-mode variant.
The ratio uses the WCAG relative luminance formula, so it matches browser devtools and audit tools such as Lighthouse. It is a blunt instrument: it ignores font weight, whether text is light-on-dark or dark-on-light, and colour-vision deficiency, so treat a pass as necessary rather than sufficient. The check runs in the browser as you type.
Frequently asked questions
What contrast ratio do I need?
For WCAG AA, 4.5:1 for normal text and 3:1 for large text, icons and input borders. AAA raises those to 7:1 and 4.5:1. Most organisations target AA.
Does passing AA mean my design is accessible?
It means the colour pair meets one criterion. Readability also depends on font size, weight, line length and spacing, and the ratio does not model colour blindness. Test with real users and a screen reader as well.
Why does my light grey text keep failing?
Greys lighter than roughly #767676 on white fall under 4.5:1. Either darken the text, darken the background, or make the text large enough to qualify for the 3:1 threshold.
Do placeholder text and disabled buttons have to pass?
Disabled controls are exempt under WCAG. Placeholder text is not exempt if it conveys information, and in practice it is often the least readable text on a form.