Color Blindness Simulator
See how your images look to people with different types of color vision deficiency
Drop an image here or click to browse
JPG, PNG, WebP, GIF supported
🔒 Images never leave your browser. All processing is done locally using the Canvas API.
Understanding Color Vision Deficiency
The human eye has three types of cone cells — short (blue), medium (green), and long (red) wavelength cones. Color blindness occurs when one or more of these cone types is absent, fewer in number, or has shifted peak sensitivity. The most common forms are inherited genetic conditions affecting the X chromosome, which is why color blindness affects men far more often than women: approximately 8% of men and 0.5% of women of Northern European ancestry have some form of color vision deficiency.
Contrary to common belief, most colorblind people are not completely unable to see color — they simply perceive colors differently from people with typical trichromatic vision. Total colorblindness (Achromatopsia) is rare, affecting about 1 in 33,000 people. The vast majority of colorblind people have dichromacy (functional two-cone vision) rather than monochromatism.
How the Simulations Work
This tool uses the HTML5 Canvas API to process images entirely in your browser. The image is drawn to an offscreen canvas, then the pixel data is read as an array of RGBA values. For each pixel, a color matrix transformation is applied that mathematically approximates how a person with a specific type of color vision deficiency would perceive that color.
The transformation matrices used here are based on established research in color science. They work by redistributing the contributions of the red, green, and blue channels to simulate the confusion that occurs when a cone type is missing. For example, in Protanopia, the red channel's contribution is spread across the green and blue channels to approximate the loss of long-wavelength cone sensitivity.
Designing for Color Accessibility
Don't rely on color alone. The most important principle of accessible color design is to never convey critical information using color as the only visual differentiator. If your chart uses red and green to show profit and loss, add labels, patterns, or icons so the distinction remains clear in a monochrome or red-green-deficient view.
Use high contrast. The WCAG 2.1 accessibility guidelines recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. High contrast helps not just colorblind users but also people with low vision and those viewing screens in bright sunlight.
Test your designs. Run your UI mockups, data visualizations, and marketing images through a color blindness simulator before publishing. Pay particular attention to red/green combinations (the most common confusion), orange/red combos (confused by Protanopes), and blue/purple combos (confused by Tritanopes).