Contrast Checker
Check WCAG accessibility contrast ratios
Contrast Ratio
21.00:1
✓
AA Normal
4.5:1
✓
AA Large
3:1
✓
AAA Normal
7:1
✓
AAA Large
4.5:1
Preview
Large Text (24px)
Large Text Bold (18px)
Normal text at 16px - The quick brown fox jumps over the lazy dog.
Small text at 14px - The quick brown fox jumps over the lazy dog.
Very small text at 12px.
AA Normal: Minimum for body text
AA Large: 18px+ or 14px+ bold
AAA: Enhanced accessibility
Checking more than one pair?
A palette can contain dozens of possible foreground and background combinations. Use the matrix to find strong pairs and minimally adjusted alternatives.
Open the palette contrast matrix →What the ratios mean
WCAG 2.2 uses 4.5:1 for normal text, 3:1 for large text, and 7:1 for enhanced AAA normal text. Meaningful non-text controls and boundaries may also need 3:1.
Read the practical WCAG guide →