Color Contrast Checker

Pick a text color and a background color to check their contrast ratio against the WCAG accessibility guidelines.

The quick brown fox

jumps over the lazy dog

17.29Contrast ratio
Normal text (AA needs 4.5, AAA needs 7)AAA
Large text (AA needs 3, AAA needs 4.5)AAA

Check a full palette

See every color against every other one at once, useful for checking a whole palette rather than one pair at a time.

-
10.3AAA
2.7Fail
2.0Fail
1.4Fail
10.3AAA
-
3.8Fail
5.1AA
7.2AAA
2.7Fail
3.8Fail
-
1.4Fail
1.9Fail
2.0Fail
5.1AA
1.4Fail
-
1.4Fail
1.4Fail
7.2AAA
1.9Fail
1.4Fail
-

Rows are text color, columns are background. AA needs 4.5:1 for normal text, AAA needs 7:1.

How this works

The Web Content Accessibility Guidelines (WCAG) define two levels of contrast: AA, the minimum most sites should meet, and AAA, an enhanced level for maximum readability. AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt and up, or bold 14pt and up). AAA raises that to 7:1 for normal text and 4.5:1 for large text.

Every swatch across Colorfool, in the generator, on palette pages, and on color pages, runs through this same check against white and black automatically. This page just lets you test any two colors directly.