Tools
Contrast Checker
Test foreground and background color pairs against WCAG 2.1 AA and AAA accessibility standards. See a live preview of your text on the background color along with pass/fail grades.
Color Pairs
Large Text Sample (18pt+)
Normal text sample — this is how your body text will appear against this background color combination.
Small text sample at 14px size
3.74:1
Contrast Ratio
Normal Text
< 18pt / 14pt bold
Large Text
≥ 18pt or ≥ 14pt bold
UI Components
Buttons, icons, borders
WCAG 2.1 Guidelines
AA requires 4.5:1 for normal text, 3:1 for large text. AAA requires 7:1 for normal text, 4.5:1 for large text. UI components require 3:1.
WCAG contrast requirements at a glance
- Normal text (AA): 4.5:1 minimum
- Large text (AA): 3:1 minimum
- Normal text (AAA): 7:1 minimum
- Large text (AAA): 4.5:1 minimum
- UI components (AA): 3:1 minimum
Why accessibility matters
Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Poor contrast affects all users in bright sunlight, on low-quality screens, or as they age. Meeting WCAG standards is also a legal requirement in many jurisdictions under ADA, EN 301 549, and similar laws.