Contrast Checker
Check text/background color pairs against WCAG AA and AAA contrast requirements.
Contrast Checker — Low-contrast text is one of the most common accessibility failures. This checker computes the WCAG contrast ratio between any two colors and tells you whether the pair passes AA and AAA for normal and large text.
Contrast calculations run locally in your browser.
What is contrast checker?
Low-contrast text is one of the most common accessibility failures. This checker computes the WCAG contrast ratio between any two colors and tells you whether the pair passes AA and AAA for normal and large text.
A live preview shows your exact combination, so you can judge readability with your own eyes before shipping a palette.
How to use it
-
Pick text and background colors
Use the two color pickers or type HEX values.
-
Read the ratio and badges
Pass/fail is shown for AA and AAA at both text sizes.
Examples
Maximum contrast
Black on white is the reference maximum.
#000000 on #ffffff
Result: 21.00 : 1 — passes AA and AAA at all sizes