Accessibility design
Color Contrast Checker
Test your palette against WCAG 2.1 AA/AAA requirements with instant ratios, preview cards, and criterion badges. Stay compliant in both light and dark modes before handoff.
Author · Pawan
Reviewer · Kushal Singh
Presets
Contrast summary
Auto-updates as you tweak colors.
Preview
Aa
Sample button & text
Contrast ratio
—
(L1 + 0.05) / (L2 + 0.05)
Large text
—
AA ≥ 3.0 · AAA ≥ 4.5
Normal text
—
AA ≥ 4.5 · AAA ≥ 7.0
| Criterion | Minimum ratio | Status |
|---|---|---|
| WCAG AA – Normal text | 4.5 : 1 | — |
| WCAG AA – Large text | 3.0 : 1 | — |
| WCAG AAA – Normal text | 7.0 : 1 | — |
| WCAG AAA – Large text | 4.5 : 1 | — |
| Non-text UI / icons | 3.0 : 1 | — |
Implementation checklist
- Check states: Validate hover, focus, disabled, and inverse surfaces—not just primary buttons.
- Opacity matters: Semi-transparent overlays alter luminance. Measure final composite colors.
- Large text definition: ≥18pt regular or ≥14pt bold counts as large for WCAG thresholds.
- Document passes: Screenshot or export ratios for design QA tickets.
FAQ
Do I test gradients?
Check the lightest versus darkest stop to ensure text stays readable across the gradient.
What about transparent text?
Compute contrast using the final rendered color (after opacity) over the backdrop; our inputs assume solid sRGB values.
Why is non-text UI set to 3:1?
Per WCAG 2.1 SC 1.4.11, icons, form borders, and focus indicators must maintain 3:1 contrast with adjacent colors.
References
Author & Reviewer
Pawan builds CalcArena’s accessibility calculators, translating WCAG success criteria into quick design-ready checks.
Reviewed by Kushal Singh to ensure the thresholds mirror current W3C guidance.