Color Blindness Simulator
Color vision deficiency (CVD) affects ~8% of males and ~0.5% of females. The most common type is deuteranomaly (weak green cones, ~5% of males), followed by protanomaly (~1%) and deuteranopia (~1%). To test accessibility: simulate how your color palette appears under each CVD type. Key rule: never use color alone to convey information — add labels, patterns, or icons.
Simulate how colors appear to people with color vision deficiency. Supports all 8 types: protanopia, deuteranopia, tritanopia (and anomaly variants), achromatopsia. Side-by-side comparison, UI preview, CSS variable output. Test your color palette for accessibility.
Your Colors
Simulate Vision Type
Comparison
Normal Vision
Deuteranopia
No green cones. Green-red confusion, most common form
Sample UI Preview
Normal
Deuteranopia
All Vision Types
CSS Variables
/* Color 1: #ff0000 -> #9fb300 (Deuteranopia) */ --color-1: #ff0000; --color-1-deuteranopia: #9fb300; /* Color 2: #00cc00 -> #4d3d3d (Deuteranopia) */ --color-2: #00cc00; --color-2-deuteranopia: #4d3d3d; /* Color 3: #0066ff -> #261fd1 (Deuteranopia) */ --color-3: #0066ff; --color-3-deuteranopia: #261fd1; /* Color 4: #ffcc00 -> #ecf03d (Deuteranopia) */ --color-4: #ffcc00; --color-4-deuteranopia: #ecf03d;
Color Vision Deficiency Types
| Type | Affected Cones | Color Confusion | Prevalence |
|---|---|---|---|
| Protanopia | Red (missing) | Red-Green | ~1% males |
| Protanomaly | Red (weak) | Red-Green (mild) | ~1% males |
| Deuteranopia | Green (missing) | Red-Green | ~1% males |
| Deuteranomaly | Green (weak) | Red-Green (mild) | ~5% males |
| Tritanopia | Blue (missing) | Blue-Yellow | ~0.003% |
| Tritanomaly | Blue (weak) | Blue-Yellow (mild) | ~0.01% |
| Achromatopsia | All (missing) | Complete | ~0.003% |
| Achromatomaly | All (weak) | Severe | Very rare |
How to Use
- 1
Add your colors
Use the color pickers to add your palette colors, or click a preset palette (Traffic Light, Bootstrap, Pastel, Chart Colors)
- 2
Select a vision type
Choose a color vision deficiency type to simulate, such as deuteranopia (most common) or protanopia
- 3
Compare side by side
Review the comparison view showing normal vision alongside the simulated view, plus the sample UI preview with buttons
- 4
Check all types
Scroll to the All Vision Types section to see how your palette appears across all 8 CVD types at once
Frequently Asked Questions
- What types of color blindness does this simulator support?
- This tool simulates all 8 types of color vision deficiency: protanopia and protanomaly (red-weak), deuteranopia and deuteranomaly (green-weak), tritanopia and tritanomaly (blue-weak), achromatopsia (total color blindness), and achromatomaly (all-weak). Deuteranomaly is the most common, affecting ~5% of males.
- How does the color blindness simulation work?
- The simulator uses color transformation matrices based on research by Brettel, Vienot, and Mollon. Each color vision deficiency type has a 3x3 matrix that transforms RGB values to approximate what a person with that condition would see. The matrices model the reduced or missing cone cell responses in the retina.
- How common is color blindness?
- About 8% of males and 0.5% of females have some form of color vision deficiency. The most common type is deuteranomaly (weak green cones), affecting ~5% of males. Red-green color blindness (protanopia, deuteranopia, and their anomaly variants) accounts for ~99% of all cases. Blue-yellow and total color blindness are very rare.
- How can I make my design color-blind accessible?
- Use this simulator to check if your color palette remains distinguishable. Key guidelines: don't rely on color alone to convey information, use patterns, icons, or text labels alongside color, ensure sufficient contrast (WCAG AA: 4.5:1 ratio), and test with deuteranopia and protanopia (the most common types).
- Why is testing for color blindness important for web design?
- About 1 in 12 men and 1 in 200 women have color vision deficiency. If your website uses red/green for success/error states, ~8% of male users may not distinguish them. WCAG 2.1 guideline 1.4.1 requires that color is not the only visual means of conveying information.
- What is the difference between protanopia and deuteranopia?
- Both are red-green color blindness but affect different cones. Protanopia (missing red cones) makes red appear very dark or black, and red-orange-green all look similar. Deuteranopia (missing green cones) shifts green toward red but doesn't darken reds as much. Both confuse red and green but in slightly different ways.