Free color palette generator with built-in WCAG 2.1 accessibility checker. Create accessible designs, check contrast ratios, simulate color blindness, and export to CSS, Tailwind, SCSS, or Figma.
WCAG Contrast Ratios Explained: Complete Accessibility Guide
Color contrast is crucial for web accessibility. WCAG (Web Content Accessibility Guidelines) provides specific contrast ratio requirements to ensure content is readable for everyone, including people with visual impairments.
What is Contrast Ratio?
Contrast ratio measures the difference in luminance between two colors, typically foreground text and background. It's expressed as a ratio like 4.5:1 or 7:1.
Formula:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter color's luminance and L2 is the darker color's luminance.
WCAG 2.1 Standards
Level AA (Minimum Standard)
Normal text: 4.5:1 contrast ratio
- Font size < 18pt regular or < 14pt bold
- Most body text, captions, labels
Large text: 3:1 contrast ratio
- Font size ≥ 18pt regular or ≥ 14pt bold
- Headlines, large UI text
UI Components & Graphics: 3:1 contrast ratio
- Interactive elements (buttons, form fields)
- Form borders and focus indicators
- Icons and graphical objects
Level AAA (Enhanced Standard)
Normal text: 7:1 contrast ratio
Large text: 4.5:1 contrast ratio
AAA compliance is ideal for government sites, educational institutions, and applications requiring maximum accessibility.
Why Contrast Matters
Visual Impairments
- Low vision: Affects ~4% of the population worldwide
- Color blindness: Affects ~8% of men, ~0.5% of women
- Age-related vision decline: Affects nearly everyone over 60
- Cataracts: Common among older adults, reduces contrast sensitivity
Environmental Factors
- Bright sunlight on mobile screens
- Low-quality or old displays
- Screen glare and reflections
- Dimly lit environments
Legal Requirements
Many countries legally require WCAG compliance:
- United States: ADA, Section 508 for government sites
- European Union: EN 301 549 standard
- Canada: Accessible Canada Act
- UK: Equality Act 2010
- Australia: Disability Discrimination Act
Non-compliance can result in lawsuits, fines, and reputational damage.
Common Contrast Mistakes
❌ Mistake #1: Light gray text on white background
#999 on #FFF = 2.8:1 Fails AA
✅ Fix: Use darker gray like #666 on #FFF = 5.7:1 Passes AA
❌ Mistake #2: Colorful buttons without enough contrast
#FF6B6B on #FFF = 2.3:1 Fails for text
✅ Fix: Use darker shade or add sufficient contrast between button and background
❌ Mistake #3: Assuming color alone conveys meaning
Don't rely on color alone for critical information (e.g., red for errors, green for success). Use icons, labels, or patterns in addition to color.
❌ Mistake #4: Ignoring link contrast
Links must meet contrast requirements in default, hover, focus, and visited states.
❌ Mistake #5: Placeholder text with insufficient contrast
Many browsers render placeholders at low opacity. Ensure they meet minimum 4.5:1 ratio.
Testing Tools
Browser Extensions
- WAVE (WebAIM): Visual feedback for accessibility issues
- axe DevTools: Comprehensive accessibility testing
- Lighthouse: Built into Chrome DevTools, includes accessibility audit
- Color Contrast Analyzer: Dedicated contrast testing
Online Tools
- PaletteChecker.com: Comprehensive palette and contrast checker (this tool!)
- WebAIM Contrast Checker: Simple, reliable contrast testing
- Contrast Ratio by Lea Verou: Minimalist contrast calculator
- Colorable: Palette accessibility checker
Automated Testing Libraries
- Pa11y: Command-line accessibility testing
- Axe-core: JavaScript accessibility engine
- Accessibility Insights: Microsoft's testing toolkit
Designing for Contrast
1. Start with Accessibility
Build contrast requirements into your design system from day one. Don't treat accessibility as an afterthought.
2. Use Contrast-Safe Palettes
Create color palettes where all text/background combinations meet WCAG standards. This prevents issues before they occur.
3. Test Early and Often
Check contrast as you design, not at the end of the project. Use tools like PaletteChecker.com during the design phase.
4. Consider Dark Mode
Ensure contrast works in both light and dark themes. High contrast in light mode doesn't guarantee good dark mode contrast.
5. Document Your Decisions
Keep records of which color combinations passed WCAG testing and why certain colors were chosen.
Real-World Contrast Examples
| Color Combination |
Ratio |
Status |
| Black on White (#000 / #FFF) |
21:1 |
✅ Passes AAA |
| Dark Blue on White (#003366 / #FFF) |
8.6:1 |
✅ Passes AAA |
| White on Dark Green (#FFF / #006400) |
6.4:1 |
✅ Passes AA |
| Dark Gray on White (#666 / #FFF) |
5.7:1 |
✅ Passes AA |
| Light Gray on White (#CCC / #FFF) |
1.6:1 |
❌ Fails |
| Yellow on White (#FFFF00 / #FFF) |
1.1:1 |
❌ Fails |
| Light Blue on White (#00BFFF / #FFF) |
2.1:1 |
❌ Fails |
Advanced Considerations
Gradients:
Ensure all parts of the gradient meet contrast requirements, not just the endpoints. Text on gradients is particularly challenging.
Images and Backgrounds:
Text over images must maintain sufficient contrast. Use overlays (semi-transparent darks/lights) or text shadows to ensure readability.
Transparency:
Semi-transparent overlays affect contrast. Always test the final rendered result, not just the colors in your design tool.
Color Blindness:
High contrast helps everyone, but don't rely on color alone. 8% of men (1 in 12) can't distinguish red/green properly.
Animation and Motion:
Ensure contrast is maintained throughout animations. Provide options to reduce motion for users with vestibular disorders.
Quick Tips for Developers
- Use semantic HTML - screen readers benefit from proper structure
- Test with actual users who have visual impairments when possible
- Provide high-contrast mode as an option for users who need it
- Use CSS custom properties (variables) for easy theme switching
- Document your color system with contrast ratios in design systems
- Run automated accessibility tests in your CI/CD pipeline
- Never use color as the only means of conveying information
- Include focus indicators with sufficient contrast (3:1 minimum)
Conclusion
WCAG contrast ratios aren't arbitrary requirements - they're based on extensive research ensuring content is accessible to people with various visual abilities. Aiming for Level AA compliance is a solid baseline, with AAA being ideal for text-heavy applications, government sites, and educational platforms.
Remember: Good contrast benefits everyone, not just users with disabilities. It's better UX for all users, improves readability in challenging environments, and demonstrates your commitment to inclusive design.
Frequently Asked Questions
What is WCAG compliance?
WCAG (Web Content Accessibility Guidelines) is a set of international standards for making web content accessible to people with disabilities. Compliance ensures your site can be used by everyone.
What's the difference between AA and AAA?
Level AA requires 4.5:1 for normal text (minimum standard for most sites). Level AAA requires 7:1 for normal text (enhanced standard for government/education). Most organizations aim for AA compliance.
Do I need to check every color combination?
Check any text-on-background combination users will see, including buttons, links, labels, and UI components. Our tool makes this easy with bulk checking.
Can I use light colors at all?
Yes! Light colors work fine on dark backgrounds. The key is ensuring sufficient luminance difference, not avoiding certain colors entirely.
How do I test my entire website?
Use browser extensions like WAVE or axe DevTools to scan pages. Combine with our tool for detailed palette analysis during the design phase.
What about logos and images?
Logos are generally exempt from contrast requirements, but text within logos must meet standards. Images should be supplemented with alt text for screen readers.
Is this tool really free?
Yes! Palette Checker is completely free with no limitations. Use all features, generate unlimited palettes, and never pay a cent.
Does it work offline?
The tool runs entirely in your browser with no server uploads. Once loaded, most features work offline, ensuring your color data stays private.