Contrast Checker
Check the WCAG contrast ratio between any text and background color, with instant pass/fail grades and fix suggestions.
Large heading text
Normal body text at 16px. The quick brown fox jumps over the lazy dog, testing legibility at typical reading size.
Small caption text at 12.8px — the hardest to read.
Color-blindness check
Frequently asked questions
What contrast ratio does WCAG require?
WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt bold) and UI components. AAA raises these to 7:1 and 4.5:1.
How is the contrast ratio calculated?
It compares the relative luminance of the two colors using the WCAG formula (L1 + 0.05) / (L2 + 0.05), producing a ratio between 1:1 and 21:1.
What if my colors fail?
The tool automatically suggests the nearest shade of your text color that passes AA — click Apply to use it.
Does this cover color blindness too?
Yes — every check includes a simulation of your color pair under protanopia, deuteranopia, tritanopia and achromatopsia, with recalculated ratios.