Color Blindness Simulator Online
7 types simulated: Normal, Protanopia, Deuteranopia, Tritanopia, Protanomaly, Deuteranomaly and Achromatopsia.
Custom image: Upload your own photo or use the included color sample palette.
Split view: Original vs. simulated side by side in real time.
No data sent: All processing happens in your browser, no servers involved.
# What is color blindness and how does it affect vision?
Color blindness, also called color vision deficiency or dyschromatopsia, is a condition that affects the ability to perceive certain colors correctly. It was first described by the English chemist John Dalton in 1798, who observed that he and his brother could not distinguish certain colors, especially reds and greens.The condition is caused by alterations in the cone cells of the retina, the photoreceptor cells responsible for capturing different wavelengths of light. The human eye has three types of cones: L cones (red-sensitive, ~570 nm), M cones (green-sensitive, ~530 nm) and S cones (blue-sensitive, ~420 nm). When one or more types are absent or function deficiently, color perception is altered.# The 7 types of color vision deficiency
| Type | Affected Cone | Prevalence (men) | Main Effect |
|---|---|---|---|
| Protanopia | L (red) absent | 1.01% | Darkened reds, red-green confusion |
| Protanomaly | L (red) deficient | 1.08% | Less saturated reds |
| Deuteranopia | M (green) absent | 1.27% | Red-green confusion without darkening |
| Deuteranomaly | M (green) deficient | 4.63% | Most common type, altered greens |
| Tritanopia | S (blue) absent | <0.01% | Blue-green and yellow-red confusion |
| Tritanomaly | S (blue) deficient | <0.01% | Altered blues and yellows |
| Achromatopsia | All cones | 0.003% | Greyscale perception only |
# How the color blindness simulation works
This simulator applies color transformation matrices to the pixels of the image. Each pixel has RGB (red, green, blue) values that are mathematically transformed to simulate how a person with each type of deficiency would perceive them. The matrices used are based on research by Machado, Oliveira and Fernandes (2009) and the model by Brettel, Viénot and Mollon (1997), both widely validated in the scientific community.# Color blindness and accessible design
- Never use color alone to convey information: Add icons, patterns or explanatory text alongside any color coding.
- Ensure sufficient contrast: WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
- Avoid red-green combinations: These are the most problematic for the majority of color blind people. Opt for blue-orange or blue-red instead.
- Use simulation tools in your workflow: Integrate color blindness simulators into your design reviews to catch issues before publishing.
- Test charts and maps: These visual elements are especially prone to accessibility issues due to their reliance on color.