Color Contrast Checker
Check whether two colors have enough contrast to be readable — against WCAG AA and AAA, for normal and large text — with a live preview. It all runs in your browser.
The quick brown fox — sample text
The quick brown fox — sample text
Contrast ratio15.85 : 1
✓AA · normal text
✓AA · large text
✓AAA · normal text
✓AAA · large text
Runs in your browser. Your input is not uploaded to PayloadIQ.
Readable, and provably so
Pick a text color and a background, and the checker shows the exact contrast ratio plus a pass or fail against all four WCAG thresholds — AA and AAA, for normal and large text. The live preview shows the colors on real text so you can judge it by eye and by number at once. Swap the two with one click to test both directions.
Local and instant
The math runs as you type, entirely in your browser. Pair it with the Color Picker to grab colors straight from a design and check them here.
FAQ
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (about 18px bold or 24px regular). AAA is stricter: 7:1 for normal and 4.5:1 for large. The tool checks all four at once.
How is the ratio calculated?
From the relative luminance of each color using the official WCAG formula, in your browser. The result is a number from 1:1 (no contrast) to 21:1 (black on white).
Why does contrast matter?
Low contrast text is hard to read for everyone and fails accessibility requirements for people with low vision. Meeting AA is the baseline most sites and laws expect.