WCAG Color Contrast Guide
Understanding Web Content Accessibility Guidelines for color contrast. Make your designs inclusive and compliant.
Level A
Minimum
The bare minimum for accessibility. Most projects should aim higher, but this is the legal requirement in many jurisdictions.
Normal Text: 3:1
Large Text: No specific requirement
Level AA
Standard (Recommended)
The industry standard and what most organizations aim for. Provides good accessibility for most users.
Normal Text: 4.5:1
Large Text: 3:1
UI Components: 3:1
Level AAA
Enhanced
The highest level of accessibility. Provides excellent contrast for users with low vision or color blindness.
Normal Text: 7:1
Large Text: 4.5:1
UI Components: 4.5:1
Contrast Checker Tool
Enter your foreground and background colors to check WCAG compliance
Aa
21:1
AA Normal Text
AA Large Text
AAA Normal Text
AAA Large Text
Key Points to Remember
- Large Text: 18pt (24px) or 14pt (18.5px) bold and larger
- UI Components: Form inputs, buttons, and interactive elements need 3:1 minimum
- Logos & Incidental: Brand logos and decorative elements are exempt
- Test Early: Check contrast during design, not after implementation