Tools
Dev & Design
Color Contrast Checker
Check WCAG AA & AAA contrast ratios between any two colors.
Test data
17.40:1
Excellent — AAA
Normal Text
Body copy, paragraphs, labels
AA 4.5:1PASS
AAA 7:1PASS
Large Text
≥24px regular or ≥18.67px bold
AA 3:1PASS
AAA 4.5:1PASS
UI Components
Buttons, inputs, icons, focus rings
AA 3:1PASS
Live preview
Excellent — AAAThe quick brown fox jumps over the lazy dog12px
The quick brown fox jumps over the lazy dog14px
The quick brown fox jumps over the lazy dog16px
The quick brown fox jumps over the lazy dog20px
The quick brown fox jumps over the lazy dog24px
The quick brown fox jumps over the lazy dog32px bold
CSS
How it works
Contrast ratio is calculated using WCAG 2.1 relative luminance — a weighted formula that accounts for how the human eye perceives brightness.
- ▸Accessibility audits — Verify text meets legal WCAG compliance.
- ▸Design handoffs — Check before dev handoff, not after QA.
- ▸Dark mode palettes — Ensure both modes pass AA independently.
- ▸Button states — Check hover, focus, and disabled states too.
- ▸Brand color validation — Does your brand blue pass on white?
- ▸Error messages — Red-on-white often fails AAA at small sizes.
- ▸Data visualizations — Chart labels need 3:1 against the chart background.
How it works▾
Contrast ratio is calculated using WCAG 2.1 relative luminance — a weighted formula that accounts for how the human eye perceives brightness.
- ▸Accessibility audits — Verify text meets legal WCAG compliance.
- ▸Design handoffs — Check before dev handoff, not after QA.
- ▸Dark mode palettes — Ensure both modes pass AA independently.
- ▸Button states — Check hover, focus, and disabled states too.
- ▸Brand color validation — Does your brand blue pass on white?
- ▸Error messages — Red-on-white often fails AAA at small sizes.
- ▸Data visualizations — Chart labels need 3:1 against the chart background.