Color Contrast Checker
Check whether your text is readable for everyone. Enter a text color and background color to get the WCAG contrast ratio, with clear AA and AAA pass or fail results for both normal and large text.
Large sample heading
Normal sample text. The quick brown fox jumps over the lazy dog, shown exactly in your chosen colors.
-
Contrast ratio
-
AA normal text (4.5)
-
AA large text (3.0)
-
AAA normal text (7.0)
-
AAA large text (4.5)
How to use
- Pick or type the text color and the background color.
- Read the contrast ratio and the four WCAG pass or fail boxes.
- Adjust colors until your text size passes the level you need.
Tips
- Normal text needs a 4.5 to 1 ratio to pass AA; large text needs 3 to 1.
- AAA is the stricter level - aim for 7 to 1 for body text if you can.
- Light gray text on white almost always fails - darken the text first.
- Test your brand colors early; fixing contrast after launch is expensive.
Ratios use the WCAG 2 relative luminance formula. Large text means at least 24 px, or 19 px bold. This is a guide, not a full accessibility audit.