WCAG Color Contrast Checker
Check if your color combinations meet WCAG AA and AAA accessibility standards. Free online checker with ratio display. No signup.
Preparing private browser tool…
Frequently asked questions
- What are the WCAG contrast requirements?
- WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AAA requires 7:1 for normal text and 4.5:1 for large text. UI components need at least 3:1.
- How is contrast ratio calculated?
- Using the relative luminance of both colors: (L1 + 0.05) / (L2 + 0.05) where L1 is the brighter color. Result ranges from 1:1 (no contrast) to 21:1 (pure black on pure white).
- What counts as large text?
- 18pt and larger, or 14pt bold and larger. In CSS that’s roughly 24px / 18.66px bold. Larger text needs less contrast because the strokes are easier to distinguish.
- Why does this matter?
- About 8% of men and 0.5% of women have some form of color vision deficiency. Plus low-contrast text fails on bright sunlight, dim screens, and aging eyes. WCAG is also a legal requirement in many jurisdictions.
- What if I just barely fail AA?
- Bump one color slightly darker or lighter. The tool updates in real time so you can iterate until you pass. Even 0.1 over the threshold counts as passing.