WCAG Color Contrast Accessibility Audit Guide
Comprehensive guide to auditing color contrast for WCAG 2.1 compliance. Covers text contrast (1.4.3), non-text contrast (1.4.11), and enhanced contrast (1.4.6).
Detailed Explanation
Color Contrast Accessibility Audit
Color contrast is one of the most commonly failed WCAG criteria and also one of the most measurable. Three WCAG success criteria directly address contrast: 1.4.3 (AA text), 1.4.11 (AA non-text), and 1.4.6 (AAA text).
WCAG Contrast Requirements
| Criterion | Level | Requirement |
|---|---|---|
| 1.4.3 Contrast (Minimum) | AA | 4.5:1 normal text, 3:1 large text |
| 1.4.11 Non-text Contrast | AA | 3:1 for UI components and graphics |
| 1.4.6 Contrast (Enhanced) | AAA | 7:1 normal text, 4.5:1 large text |
Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold.
What to Test
- Body text against its background
- Headings against their background
- Link text against surrounding text (if distinguished only by color)
- Placeholder text in form inputs
- Button text against button background
- Icon labels and standalone icons
- Form field borders against surrounding background
- Focus indicators against adjacent colors
- Error and success message text
- Disabled state text (exempt from contrast requirements)
Testing Process
For each text element:
- Identify the foreground color (text)
- Identify the background color (may include gradients or images)
- Calculate the contrast ratio
- Compare against the required ratio for the text size
- Mark as Pass or Fail in the checklist
Common Pitfalls
- Gray text on white backgrounds — Light gray (#999) on white fails 4.5:1
- Placeholder text — Often too light to meet requirements
- Colored text on colored backgrounds — Both colors may look "different" but fail numerically
- Text over images — Must meet contrast at every point where text overlaps
- Dark mode — Both light and dark themes must meet contrast independently
Use Case
Color contrast auditing is a critical part of any accessibility review. It is often the first thing automated tools flag and is easy to verify manually. Designers should check contrast during the design phase, and developers should verify it during implementation. Use this alongside the Accessibility Color Checker tool for precise measurements.
Try It — Accessibility Audit Checklist
Perceivable
Operable
Understandable
Robust
50 criteria shown · Click the status badge to cycle through Pass / Fail / N/A / Untested