Contrast Checker (WCAG)
Check color contrast ratios for accessibility compliance. Ensure your text meets WCAG AA and AAA guidelines for better readability and accessibility.
Color Selection
Live Preview
Sample Heading
This is normal text (18px) to test readability and contrast.
This is large text (24px) which has different WCAG requirements.
Common Color Combinations
Black on White
#000000 on #ffffff
White on Black
#ffffff on #000000
Dark Gray on Light Gray
#333333 on #f5f5f5
Blue on Light Blue
#1e40af on #dbeafe
Red on Pink
#dc2626 on #fce7e7
Green on Light Green
#166534 on #dcfce7
Purple on Lavender
#7c3aed on #ede9fe
Orange on Peach
#ea580c on #fed7aa
About WCAG Contrast Checker
The WCAG Contrast Checker evaluates color combinations for accessibility compliance according to Web Content Accessibility Guidelines (WCAG) 2.1. Proper contrast ensures content is readable for users with visual impairments.
WCAG Standards:
- WCAG AA (Minimum): 4.5:1 for normal text, 3:1 for large text
- WCAG AAA (Enhanced): 7:1 for normal text, 4.5:1 for large text
- Large Text: 18px+ or 14pt+ (24px/18pt+ recommended)
- Normal Text: Below 18px or 14pt
Why Contrast Matters:
- Improves readability for users with visual impairments
- Helps in bright lighting conditions or low-quality displays
- Benefits users with color blindness or low vision
- Required for legal accessibility compliance
- Improves overall user experience for everyone
Best Practices:
- Aim for WCAG AA compliance as a minimum standard
- Test with actual users who have visual impairments
- Don't rely on color alone to convey information
- Consider different lighting conditions and devices
- Use tools to simulate color blindness
- Test with screen readers and assistive technologies
Common Issues:
- Light gray text on white backgrounds
- Colored text on colored backgrounds
- Insufficient contrast in dark mode themes
- Links that don't stand out from body text
- Button text that blends with button backgrounds