WCAG Contrast Checker: Ensure Text Accessibility
Measure WCAG 2.1 contrast between colors. Check AA and AAA pass/fail for normal and large text.
Get the tool mentioned in this guide in the desktop app:WCAG Contrast Checker
Why contrast matters
Web Content Accessibility Guidelines (WCAG) require sufficient contrast between text and background. This ensures:
- Readability for everyone — people with low vision.
- Legal compliance — ADA (US), AODA (Canada), EN 301 549 (EU).
- User experience — readable text on all devices.
WCAG contrast levels
Level AA (minimum standard) - Normal text (< 18pt): 4.5:1 ratio - Large text (≥ 18pt): 3:1 ratio
Level AAA (enhanced) - Normal text: 7:1 ratio - Large text: 4.5:1 ratio
Level A (insufficient) — 3:1 ratio (for large text only)
Strive for AA or AAA. Higher ratio = easier to read.
Testing your design
1. Pick text color (foreground). 2. Pick background color. 3. See the contrast ratio. 4. Check AA/AAA status. 5. Adjust if needed — increase contrast or darken/lighten colors.
Common failures
- Light gray text (#CCCCCC) on white — fails most standards.
- Colored text on colored backgrounds — must have high ratio.
- Small text requires higher contrast than large text (due to visual acuity).
Frequently asked questions
What's a "large" text size?
18pt or 24px (1.5em) and larger, or 14pt and bold.
Does this check images and icons?
Current version checks text. Graphical elements have different rules (3:1 minimum).
Is AA sufficient?
AA is standard. AAA is recommended for critical content (healthcare, legal). Aim high.