Color Contrast Check - Check Colors and Web Design for Accessibility
Optimize your colors for accessibility according to WCAG 2.1 & 2.2 (AA/AAA).
Test color contrast ratios against WCAG 2.1 and 2.2 guidelines. Check individual color pairs or scan entire pages to identify contrast issues.
Color Selection
Foreground Color
Background Color
WCAG Settings
Results
Normal Text (< 18px)
Passed
Required: 4.5:1
Large Text (≥ 18px)
Passed
Required: 3:1
Contrast Ratio
21.00:1
WCAG AA
Compliant
Preview
We checked the contrast so your users don’t have to. This contrast has been officially judged.
Understanding WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for people with visual impairments.
WCAG AA (Minimum)
- • Normal text: 4.5:1
- • Large text (18px+ or 14px+ bold): 3:1
WCAG AAA (Enhanced)
- • Normal text: 7:1
- • Large text (18px+ or 14px+ bold): 4.5:1
WCAG Versions
WCAG 2.1 and 2.2 share the same contrast requirements (Success Criterion 1.4.3 and 1.4.6). Choose your organization's target version for consistency.