Color Blindness Simulator shows how any image appears to people with the four main types of color vision deficiency: deuteranopia (red-green, most common), protanopia (red-green, fewer reds), tritanopia (blue-yellow), and achromatopsia (complete color blindness). Upload an image and see side-by-side comparisons of how it looks to someone with each condition.
Color vision deficiency affects approximately 8% of men and 0.5% of women worldwide — about 300 million people globally. Deuteranopia and protanopia (both red-green types) together account for the majority of cases. People with color blindness do not see in black and white (except in the rare case of achromatopsia) — they see a shifted color spectrum where reds and greens appear similar or washed out.
This tool is essential for designers and developers building accessible products. If your UI relies on red for errors and green for success, deuteranopes cannot distinguish them. If your chart uses red and green lines, they appear as similar colors to 1 in 12 male users. WCAG 1.4.1 (Level AA) explicitly prohibits using color as the only way to convey information — error states must also use icons, borders, or labels.
Red/green UI status indicators
Result: Deuteranopia simulation shows both red error states and green success states appear as similar brownish-yellow, making them indistinguishable
Data visualization chart
Result: A chart with red and green lines appears as two nearly identical brownish lines to deuteranopes — add distinct line styles (dashed, dotted) or labels
Website header with colored navigation
Result: Tritanopia simulation shows blue and purple appear similar — test that navigation relies on more than color to indicate active state
What is the most common type of color blindness?
Deuteranopia and deuteranomaly (reduced green sensitivity) are most common, affecting about 5% of men. Protanopia and protanomaly (reduced red sensitivity) affect about 2.5% of men. Tritanopia (blue-yellow) is rare, affecting less than 0.1% of people. Achromatopsia (complete color blindness) is extremely rare at about 0.003%.
How do I fix my design for color blind users?
The WCAG 1.4.1 rule: never use color as the only visual means of conveying information. For charts: add patterns, shapes, or direct labels. For form errors: add an icon (!) and border in addition to red color. For navigation: add underline or indicator beyond color highlight. Test with this simulator before shipping.
Does color blind mode on phones help?
Yes — Android and iOS include color correction settings under Accessibility. They apply a system-wide filter to shift colors to be more distinguishable. However, this is the user's workaround, not a substitute for designing accessible interfaces. Your design should work for users who haven't enabled these features.
What is the difference between color blindness and color weakness?
Color blindness (anopia) means the person completely lacks one type of cone cell. Color weakness (anomaly) means the cone cells are present but shifted — colors are still distinguishable but with reduced sensitivity. Anomaly (e.g., deuteranomaly) is more common than anopia (deuteranopia). Both are covered by WCAG guidelines.
How do I test my entire website for color accessibility?
Use browser extensions like Colorblindly or the macOS Accessibility > Display settings to view your site through a color blindness filter. Run automated accessibility checks with tools like Lighthouse or axe — they catch WCAG 1.4.1 violations. Then do manual testing with this image simulator for visual assets like charts and illustrations.