Contrast Checker
Two colors in, WCAG pass or fail out.
17.45: 1
Pass · AA normal textPass · AA large textPass · AAA normal textPass · AAA large text
Large text sample, 24px and up
Normal text sample. The quick brown fox jumps over the lazy dog.
Nothing you type is stored or sent.
About
Pick a text color and a background color and see the WCAG contrast ratio between them, checked against the AA and AAA thresholds for normal and large text, with a live preview in the actual colors. Nothing you type is stored or sent.
- What contrast ratio do I need?
- WCAG AA, the common baseline, needs at least 4.5:1 for normal text and 3:1 for large text (24px and up, or 19px and bold). AAA is stricter: 7:1 normal, 4.5:1 large.
- How is the ratio calculated?
- From each color's relative luminance using the WCAG 2.x formula, then (lighter + 0.05) / (darker + 0.05). The result ranges from 1:1 (no contrast) to 21:1 (black on white).
- What colors can I enter?
- 3- or 6-digit hex, with or without the leading #. The swatch next to each box is a native color picker if you'd rather click than type.
- Does passing AA mean the design is accessible?
- It means this one pair of colors has enough contrast. Accessibility also covers things like focus states, font size and non-color cues, which this tool doesn't check.