WCAG Contrast Standards & Compliance
The definitive guide to Web Content Accessibility Guidelines (WCAG 2.1 & 2.2) contrast thresholds, large text rules, and international accessibility laws.
The Four Core WCAG Contrast Thresholds
Under WCAG Success Criteria 1.4.3, 1.4.6, and 1.4.11, color contrast is evaluated based on element type, scale, and conformance level.
AA Normal Text
Applies to standard body copy, navigation links, and paragraphs under 18pt (24px) or bold under 14pt (18.5px). The absolute legal baseline for accessibility compliance worldwide under ADA Title III and EU EN 301 549.
AA Large Text
Applies to large display headlines at or above 18pt (24px) or bold text at or above 14pt (18.5px). Because glyph strokes are thicker, lower luminance contrast is acceptable for legibility.
AAA Normal Text
The enhanced standard required for government portals, medical equipment, and high-readability environments. Ensures legibility even on low-quality displays or in glaring ambient outdoor sunlight.
UI Components & Icons
Introduced in WCAG 2.1: form input boundaries, interactive icon buttons, checkboxes, and focus indicator rings must have at least 3:1 contrast against adjacent backgrounds.
Non-Text Contrast: Icons & UI Components (3.0:1)
Introduced in WCAG 2.1, SC 1.4.11 mandates that visual information required to identify user interface components and states must have a contrast ratio of at least 3.0:1 against adjacent colors.
✓ Covered Under 1.4.11
- Form input boundaries and text field borders
- Interactive icon buttons (e.g. search, menu, shopping cart)
- Radio buttons and checkbox outlines
- Active focus rings and keyboard navigation outlines
- Selected tab indicators and switch toggles
✕ Exempt from 1.4.11
- Inactive/disabled form inputs and buttons
- Decorative graphics that convey no functional meaning
- Photographs and complex brand logos
- Heatmaps and charts where colors are uniquely labeled
WCAG Versions Comparison
How color contrast requirements evolved across WCAG 2.0, 2.1, and 2.2.
| Standard | Normal Text | Large Text | UI Components | Focus Indicators |
|---|---|---|---|---|
| WCAG 2.0 (2008) | 4.5:1 (AA) / 7.0:1 (AAA) | 3.0:1 (AA) / 4.5:1 (AAA) | Not specified | Must be visible |
| WCAG 2.1 (2018) | 4.5:1 (AA) / 7.0:1 (AAA) | 3.0:1 (AA) / 4.5:1 (AAA) | 3.0:1 (SC 1.4.11) | Must be visible |
| WCAG 2.2 (2023) | 4.5:1 (AA) / 7.0:1 (AAA) | 3.0:1 (AA) / 4.5:1 (AAA) | 3.0:1 (SC 1.4.11) | 3.0:1 (SC 2.4.13) |
Ready to Test Your Palette Against WCAG Standards?
Check your contrast ratio in real time with hardware LED dots, color blindness simulation, and auto-adjusters on our homepage tool.