Color Contrast Checker
Check whether text and background colors are readable enough for WCAG AA and AAA, and get the nearest color that passes.
Large heading text
Normal body text, the size most people read on screen. It needs more contrast than large text to be easy to read.
ButtonContrast ratio
4.54:1
- Normal text · AA 4.5:1Pass
- Normal text · AAA 7:1Fail
- Large text · AA 3:1Pass
- Large text · AAA 4.5:1Pass
- Icons and borders · AA 3:1Pass
Closest text color that passes:
Measured with the WCAG 2.2 formula. Large text is 24 px, or 18.5 px bold, and up. See-through text is measured as it looks on the background.
Color Contrast Checker measures the contrast ratio between a text color and its background with the WCAG 2.2 formula, and shows whether it passes AA and AAA for normal text, large text, and icons and borders. A live preview shows real text on the background. When a pair fails, the tool suggests the closest text color that passes, keeping its hue, so you change your design as little as possible.
How to use Color Contrast Checker
- 1
Choose two colors
Enter the text color and the background, or pick them.
- 2
Read the result
See the ratio and whether it passes AA and AAA.
- 3
Fix it if needed
Use the suggested color that passes.
What it does
- WCAG 2.2 levels
- AA and AAA for normal and large text, plus icons and borders.
- Live preview
- See headings, body text and a button on the background.
- Closest fix
- The nearest passing color, with the same hue.
Questions
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text, icons and borders. AAA asks for 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
24 px and up, or bold text from about 18.5 px (14 pt).
Does it handle see-through colors?
Yes. A transparent text color is measured as it looks on the background.
Does it need an internet connection?
Only to open the page. Everything is calculated on your device, and nothing you type is sent anywhere.