Color Blindness Simulator: Protanopia, Deuteranopia & WCAG Checker
Test how your colors appear to people with color vision deficiencies
Your Colors
Severity
Normal Vision
Standard perception
Protanopia
No red cones
Deuteranopia
No green cones
Tritanopia
No blue cones
Achromatopsia
Grayscale only
Contrast Checker
Color Comparison
| Original | Protanopia | Deuteranopia | Tritanopia | Achromatopsia |
|---|
What is Color Blindness?
Color blindness, or color vision deficiency, is the decreased ability to see color or differences in color. It affects approximately 8% of men and 0.5% of women. Using a color blindness simulator ensures your designs are accessible to this significant user base, meeting both ethical standards and WCAG compliance.
How to Test Colors for Accessibility
Testing your UI for accessibility involves simulating how colors appear under different vision deficiencies and checking contrast ratios. Follow these steps:
- Input Your Palette: Enter the HEX codes of your design colors into the input fields above.
- Run the Simulation: Click "Simulate" to generate views for Protanopia, Deuteranopia, and Tritanopia.
- Check Contrast: Use the Contrast Checker to ensure text is readable against backgrounds (aim for a ratio of 4.5:1 or higher).
- Analyze Results: Look for colors that blend together or become indistinguishable in the simulation views.
Types of Color Blindness Simulated
Protanopia
Affects the perception of red light. Red appears dark, and red/green confusion is common.
Deuteranopia
Affects the perception of green light. The most common form of color blindness.
Tritanopia
Affects the perception of blue light. Blue appears greenish and yellow appears violet.
Achromatopsia
A rare condition where no color is perceived, only shades of gray.
Design Tips for Accessibility
- Don't Rely on Color Alone: Use icons, patterns, or text labels to convey meaning.
- High Contrast: Ensure sufficient contrast ratios (WCAG AA requires 4.5:1).
- Avoid Problematic Combos: Avoid red/green and blue/black combinations.
- Use a Simulator: Always test your designs with a simulator tool like this one.
Explore More Design Resources
Learn how to create beautiful and accessible color palettes for your next project.