Color Contrast Checker (WCAG)
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
The quick brown fox jumps over the lazy dog.
Free WCAG Color Contrast Checker
Check whether your text and background color combination meets WCAG 2.1 accessibility standards. Instantly see if your colors pass AA and AAA requirements for both normal and large text.
WCAG Contrast Requirements
- Level AA (minimum) — 4.5:1 for normal text, 3:1 for large text
- Level AAA (enhanced) — 7:1 for normal text, 4.5:1 for large text
- Large text is defined as 18pt (24px) or 14pt bold (18.66px bold)
Why Does Contrast Matter?
Sufficient color contrast ensures text is readable for people with low vision, color blindness, or those viewing screens in bright sunlight. It's also a legal requirement under many accessibility laws (ADA, EN 301 549, EAA).
Frequently Asked Questions
What ratio should I aim for?
For body text, aim for at least 4.5:1 (AA). For headings and large UI elements, 3:1 is acceptable. For the best accessibility, target 7:1 (AAA).
How is the contrast ratio calculated?
The WCAG contrast ratio formula compares the relative luminance of two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker.