About the Contrast Checker
Make sure your text is readable for everyone. Enter a text and background color to get the WCAG contrast ratio, pass or fail results for normal text, large text and icons, and the nearest colors that pass.
Key features
- WCAG 2 contrast ratio
- AA and AAA for normal and large text
- Icons and borders (3:1) check
- Live preview with text, button and icon
- One-click fixes that pass
- HEX, RGB, HSL and color names
Why contrast matters
Low-contrast text is one of the most common accessibility problems on the web. It's hard to read for people with low vision, older readers and anyone using a phone outdoors. Accessibility laws in many countries point to the WCAG standard, and Google's Lighthouse audit checks it too.
WCAG contrast requirements
| Content | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text (24 px, or 18.66 px bold) | 3:1 | 4.5:1 |
| Icons, borders, focus rings | 3:1 | – |
| Logos and disabled controls | No requirement | No requirement |
Common color pairs
| Text | Background | Ratio | Result |
|---|---|---|---|
| #000000 | #ffffff | 21:1 | AAA |
| #333333 | #ffffff | 12.6:1 | AAA |
| #767676 | #ffffff | 4.5:1 | AA |
| #999999 | #ffffff | 2.8:1 | Fail |
| #ffffff | #2563eb | 5.2:1 | AA |
| #ffffff | #f97316 | 2.8:1 | Fail |
Related tools
Color shades generator, color blindness simulator and color picker.
How to use the Contrast Checker
- Enter a color code, use the picker, or start from a preset.
- Adjust the options; the preview updates instantly.
- Check the result, including contrast and how it looks in context.
- Copy the CSS, Tailwind or HEX code, or download it.