Color Blindness Simulator
Simulate how colors and images appear to people with different types of color vision deficiencies. Test single colors, palettes, or upload images to see how they look with 8 types of color blindness including Protanopia, Deuteranopia, and Tritanopia.
About Color Blindness
Approximately 8% of males and 0.5% of females have some form of color vision deficiency. Deuteranomaly (green-weak) is the most common, affecting about 6% of males.
Input Color
Original Color (Normal Vision)
#3B82F6Color Blindness Simulations
Protanopia
1% of males
#5A5ADADeuteranopia
1% of males
#5650D3Tritanopia
0.001% of population
#3FC4BFProtanomaly
1% of males
#486AE8Deuteranomaly
6% of males (most common)
#4970E6Tritanomaly
0.01% of population
#3DA1E1Achromatopsia
0.003% of population
#7A7A7AAchromatomaly
Very rare
#5D7EB2Understanding Color Blindness Types
Protanopia
Red-blind (missing L-cones)
Prevalence: 1% of males
Effect: Red and green appear similar
Deuteranopia
Green-blind (missing M-cones)
Prevalence: 1% of males
Effect: Red and green appear similar
Tritanopia
Blue-blind (missing S-cones)
Prevalence: 0.001% of population
Effect: Blue and yellow appear similar
Protanomaly
Red-weak (anomalous L-cones)
Prevalence: 1% of males
Effect: Reduced red sensitivity
Deuteranomaly
Green-weak (anomalous M-cones)
Prevalence: 6% of males (most common)
Effect: Reduced green sensitivity
Tritanomaly
Blue-weak (anomalous S-cones)
Prevalence: 0.01% of population
Effect: Reduced blue sensitivity
Achromatopsia
Complete color blindness (no cone function)
Prevalence: 0.003% of population
Effect: Sees only shades of gray
Achromatomaly
Blue cone monochromacy (only blue cones)
Prevalence: Very rare
Effect: Severely reduced color vision
Designing for Color Blind Users
- • Don't rely solely on color to convey information - use icons, patterns, or text labels
- • Avoid red-green combinations (problematic for most common types)
- • Use high contrast between text and background (WCAG AA: 4.5:1 minimum)
- • Test your designs with color blindness simulators (like this tool!)
- • Consider using color-blind safe palettes (ColorBrewer, Coblis)
- • Add texture or patterns to differentiate UI elements
Recommended Settings
Color Blindness Statistics
- •8% of males and 0.5% of females have some form of color vision deficiency
- •Deuteranomaly (green-weak) is most common, affecting 6% of males
- •Red-green color blindness (protanopia/deuteranopia) affects 2% of males
- •Blue-yellow color blindness (tritanopia) is extremely rare (0.001%)
- •Complete color blindness (achromatopsia) affects only 0.003% of population
Accessibility Best Practices
- •Use WCAG 2.1 guidelines: AA level requires 4.5:1 contrast for normal text
- •Add non-color cues: icons, labels, patterns, underlines for links
- •Avoid problematic combinations: red/green, blue/purple, light green/yellow
- •Use colorblind-friendly palettes: tools like ColorBrewer provide safe schemes
- •Test with real users or simulation tools before launching
Pro Tips
- •The -opia suffix means complete absence of cones (e.g., protanopia = no red cones)
- •The -omaly suffix means defective cones (e.g., protanomaly = weak red cones)
- •Traffic lights use position (top/middle/bottom) in addition to color for accessibility
- •This simulator uses research-based transformation matrices for accurate results
Most Popular
Test images and palettes with Deuteranomaly first - it affects 6% of males and is the most common type
When to Use This Tool
Test your website, app, or UI design to ensure it's usable by people with color vision deficiencies. Verify that buttons, links, error messages, and status indicators are distinguishable without relying solely on color. Ensure WCAG 2.1 Level AA compliance.
Design charts, graphs, maps, and infographics that are readable by color blind users. Test color scales, categorical color schemes, and highlighting to ensure data remains interpretable. Use patterns, textures, or labels in addition to color coding.
Test logos, advertisements, packaging, and promotional materials to ensure your brand is accessible to all customers. Verify that important information (like sale prices, warnings, or calls-to-action) isn't lost for color blind viewers.
Create educational materials about color blindness for students, designers, or developers. Demonstrate how different types of color vision deficiencies affect perception. Show real-world examples of accessible vs inaccessible color choices.
Test video games, interactive applications, and control panels for color blind accessibility. Ensure enemies, teammates, items, and UI elements are distinguishable through shape, pattern, or icon in addition to color. Add colorblind modes if needed.
Build accessible color palettes for design systems and component libraries. Test all color combinations to ensure they work for users with color vision deficiencies. Document which combinations are safe and which should be avoided or require additional cues.
How It Works
Select input mode: single color, color palette (2-8 colors), or image upload
For colors: tool converts HEX to RGB format for mathematical processing
RGB values are normalized to 0-1 range for transformation matrix application
For each color blindness type, a transformation matrix is applied to RGB values
Matrices are based on research by Viénot, Brettel, and Mollon (1999)
Transformed RGB values are converted back to HEX for display
For images: each pixel is processed through the transformation matrix
Canvas API applies the filter and generates downloadable simulated images
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by RGB transformation matrices based on cone photopigment spectral sensitivities research for optimal performance on modern browsers.
Open Source
Built with verified, open-source libraries. Fully transparent.
Frequently Asked Questions
What is color blindness and how common is it?
Color blindness (color vision deficiency) is a reduced ability to distinguish certain colors due to missing or defective cone cells in the retina. It affects approximately 8% of males and 0.5% of females. The most common type is Deuteranomaly (green-weak), affecting about 6% of males. It's usually genetic (X-linked recessive) but can also be acquired through aging, disease, or medication.
Which type of color blindness is most common?
Deuteranomaly (green-weak vision) is by far the most common, affecting about 6% of males. This is followed by Protanomaly (red-weak, 1% of males), Protanopia (red-blind, 1% of males), and Deuteranopia (green-blind, 1% of males). Combined, red-green color blindness affects about 8% of males. Blue-yellow color blindness (tritanopia/tritanomaly) and complete color blindness (achromatopsia) are extremely rare.
How accurate is this simulation?
This simulator uses scientifically-based transformation matrices from peer-reviewed research (Viénot, Brettel, and Mollon, 1999) to approximate how colors appear to people with different types of color vision deficiencies. While highly accurate for most purposes, individual experiences vary based on the severity and type of deficiency. For critical accessibility testing, supplement this tool with user testing involving people with actual color vision deficiencies.
Can color blindness be cured or corrected?
Currently, there is no cure for inherited color blindness. Some people use specially tinted glasses (like EnChroma) that can enhance color discrimination in certain situations, but they don't restore normal color vision. Acquired color blindness from disease or medication may improve if the underlying cause is treated. Gene therapy research is ongoing but not yet available for humans. Most color blind people adapt well and don't consider it a significant disability.
What's the difference between -opia and -omaly types?
The -opia suffix (protanopia, deuteranopia, tritanopia) means complete absence or non-function of a cone type - this is dichromatic vision (two cone types). The -omaly suffix (protanomaly, deuteranomaly, tritanomaly) means defective or weak cone function - this is anomalous trichromatic vision (three cone types, but one is abnormal). Anomalous trichromats have milder symptoms than dichromats.
How do I design for color blind users?
Follow these principles: (1) Don't rely solely on color - add icons, patterns, or text labels; (2) Use high contrast between text and background (minimum 4.5:1 for WCAG AA); (3) Avoid red-green combinations; (4) Test designs with simulators and real users; (5) Use colorblind-safe palettes from tools like ColorBrewer; (6) Underline links, don't just color them; (7) Add texture to charts and graphs; (8) Provide colorblind modes in games and apps.
What colors should I avoid using together?
For red-green color blindness (most common): avoid red/green, brown/green, blue/purple, light green/yellow, orange/red. For blue-yellow color blindness: avoid blue/yellow, violet/green, red/pink. For complete color blindness: ensure sufficient luminance contrast regardless of hue. Always test critical color combinations with this simulator before finalizing designs. When in doubt, add non-color cues (icons, labels, patterns).
Are these simulations medical-grade?
This tool is designed for design and accessibility testing, not medical diagnosis. While the transformation matrices are based on scientific research and produce accurate approximations, individual color vision deficiencies vary in severity and characteristics. For medical diagnosis of color blindness, consult an optometrist or ophthalmologist who can administer standardized tests like the Ishihara plates or Farnsworth-Munsell 100 Hue Test.