Contrast Checker
Check any two colors against WCAG AA and AAA, live.
Three steps
How to use it
-
1
Set the two colors
Type hex codes, or use the pickers. Swap reverses them, which is worth doing. Contrast is symmetric but your design usually is not.
-
2
Read the verdicts
AA needs 4.5:1 for normal text and 3:1 for large. AAA needs 7:1 and 4.5:1. Non-text elements like icons and input borders need 3:1.
-
3
Fix a failure
If a pair fails, the suggestion panel offers the nearest passing version of your foreground, keeping the hue and adjusting lightness only.
About this tool
The contrast ratio compares the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white). Luminance is not brightness as you perceive it, the formula weights green far more heavily than blue, because the eye is far more sensitive to it. That is why a saturated blue on black can fail badly while a mid green on black passes comfortably.
"Large text" in WCAG means 18.66px and bold, or 24px and up. Below that, 4.5:1 is the AA floor. One practical consequence: a heading that passes at 3:1 will fail as soon as someone reuses that color pair for a caption.