Color Contrast Checker
Check color contrast ratios for WCAG AA and AAA accessibility compliance.
Color Inputs
Quick Examples
Live Preview
Large Text (18pt / 14pt bold)
The quick brown fox
Normal Text (under 18pt)
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
UI Component
Badge
FG
BG
Contrast Results
21:1
Contrast Ratio
✓
WCAG AA
Normal Text
≥ 4.5:1
✓
WCAG AA
Large Text
≥ 3:1
✓
WCAG AAA
Normal Text
≥ 7:1
✓
WCAG AAA
Large Text
≥ 4.5:1
What do these levels mean?
- WCAG AA Normal — Minimum contrast 4.5:1 for body text under 18pt (or 14pt bold). Required for most websites.
- WCAG AA Large — Minimum contrast 3:1 for large text (18pt+ or 14pt+ bold) and UI components.
- WCAG AAA Normal — Enhanced contrast 7:1 for normal text. Recommended for the best accessibility.
- WCAG AAA Large — Enhanced contrast 4.5:1 for large text. The highest standard for large content.
