Color Blindness Simulator
See how your palette looks to the ~300 million people worldwide with color vision deficiency. Click any swatch to edit its color.
Your Palette
#ef4444
#f97316
#eab308
#22c55e
#3b82f6
#8b5cf6
#ec4899
#14b8a6
Full color perception with all three cone types functioning normally.
Baseline
Most common - reduced sensitivity to green light. Red and green hues are harder to distinguish.
~5% of men
Reduced sensitivity to red light. Reds appear darker and less vivid.
~1% of men
No green cones. Red and green are indistinguishable - appear as shades of yellow/brown.
~1% of men
No red cones. Red appears black; orange, yellow, green all look similar.
~1% of men
No blue cones. Blue and green are confused; yellow and violet look similar.
<0.01%
Complete color blindness - the world appears only in shades of grey.
~0.003%
💡 Design Tips for Color Accessibility
Never rely on color alone
Use icons, patterns, or labels alongside color to convey information.
Aim for 4.5:1 contrast ratio
WCAG AA requires at least 4.5:1 for normal text. Use our Contrast Checker.
Test with real tools
Use a browser accessibility extension or OS accessibility settings to validate.
Avoid red–green pairs
These are the most common confusion - use blue–orange as a safe alternative.
Add texture or pattern fills
In charts and graphs, combine color with distinct patterns for clarity.
Use sufficient saturation
High-contrast palettes with good lightness variation work for most users.
How to Use the Color Blindness Simulator
- 1.Your current palette is displayed across 7 vision types simultaneously in a grid.
- 2.Click any color swatch to edit it with a color picker - the grid updates in real time.
- 3.Compare Normal Vision against Deuteranopia, Protanopia, Tritanopia, Achromatopsia, and more.
- 4.Look for swatches that look identical in any row - those color pairs may be indistinguishable to affected users.
- 5.Follow the accessibility tips below the grid to adjust your palette for better contrast and distinction.
What is Color Blindness?
Color blindness, or color vision deficiency (CVD), occurs when the cone cells in the eye are missing or respond differently to certain wavelengths of light. The most common type is red-green color blindness, affecting around 8% of males. Deuteranopia (missing green cones) and protanopia (missing red cones) cause red and green to look similar - often appearing as shades of yellow, brown, or gray. Tritanopia (rare, affects blue-yellow) and achromatopsia (complete color blindness, very rare) present different challenges. For designers, this means relying on color alone to convey meaning - like a red error indicator or a green success state - can be inaccessible. WCAG 2.1 guideline 1.4.1 requires that color is not the only visual means of conveying information. Always pair color cues with icons, patterns, or text labels.
Frequently Asked Questions
What is the difference between deuteranopia and deuteranomaly?
Deuteranopia is the complete absence of green-sensitive cones. Deuteranomaly is a milder form where green-sensitive cones respond to longer wavelengths than normal. Both cause red-green confusion, but deuteranomaly is the more common and typically less severe condition.
How accurate is the simulation?
The simulator uses established RGB matrix transforms derived from published color vision research. These are the same algorithms used by professional accessibility tools and represent the best approximation available for screen displays.
What WCAG guideline covers color accessibility?
WCAG 2.1 Success Criterion 1.4.1 (Use of Color) requires that color is not the only visual means of conveying information. SC 1.4.3 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
What are the best color pairs for color-blind users?
Blue-orange and blue-red pairings work well for most types of color blindness. Avoid red-green combinations for critical information. Adding patterns, icons, or text labels alongside color cues ensures all users can distinguish content.