Colour vision deficiency affects roughly 1 in 12 men and 1 in 200 women worldwide, overwhelmingly in the red green range, which makes it one of the most common accessibility considerations in interface design and one of the easiest to overlook, since it is invisible to anyone without it. A chart that relies on red versus green to distinguish two data series, or a status indicator that is only red or green, can be genuinely unreadable to a meaningful share of users even though it looks perfectly clear to the person who designed it.
Everything runs locally. Simulating a colour is pure matrix arithmetic, and simulating an image decodes it onto a canvas and transforms every pixel in your browser, so an unpublished design file never has to leave your machine to be checked.
The four conditions this color blindness simulator covers
Protanopia and deuteranopia are both red green deficiencies but affect different photoreceptors. Protanopia is the absence of functioning long wavelength, red sensitive cones, which also dims red light noticeably in addition to shifting how it is perceived. Deuteranopia is the absence of functioning medium wavelength, green sensitive cones, and is the most common form of colour blindness overall, without the same dimming effect protanopia produces.
Tritanopia is the absence of functioning short wavelength, blue sensitive cones, and is far rarer than the two red green forms, affecting blue and yellow discrimination instead. Achromatopsia is complete colour blindness, seeing only in shades of grey, and is rare on its own but useful as a reference point for how much information in a design depends on colour rather than on lightness contrast alone.
- Protanopia: no red sensitive cones, red appears darker and is confused with dark green or brown.
- Deuteranopia: no green sensitive cones, the most common form, red and green are hard to distinguish.
- Tritanopia: no blue sensitive cones, blue and green become confused, as do yellow and violet.
- Achromatopsia: complete colour blindness, everything is perceived as a shade of grey.
Why a protanopia simulator needs a real transformation matrix
A naive approach to simulating colour blindness swaps or averages colour channels directly, which produces a result that looks roughly plausible but is not grounded in how the eye's cones actually respond. A genuine protanopia simulator instead transforms the colour into a space that reflects the actual spectral sensitivity of the three cone types, removes the contribution of the missing cone type mathematically, then converts the result back to sRGB for display.
This tool uses the published transformation matrices from research on physiologically based colour vision deficiency models, applied to linear, gamma decoded RGB values rather than the raw gamma encoded numbers, since the underlying biology operates on light intensity, not on the compressed numbers a screen happens to store. Skipping the gamma decoding step, a common shortcut in naive simulators, shifts the simulated result in ways that become visible on saturated colours.
Reading a deuteranopia simulation correctly
A deuteranopia simulation of a chart or interface should be read for confusability, not just for whether colours look different from the original. Two colours that appear distinct to you but converge toward the same simulated colour are the ones that will genuinely fail for a deuteranopic user, even if every individual colour in the simulated palette still looks like a different shade of something.
The most actionable check is comparing pairs that carry meaning together, for example a chart's red and green data series, or a form's error red against its neutral grey. If those specific pairs stay distinguishable in the simulation, the design is very likely fine for that condition, even if unrelated colours elsewhere shifted more dramatically.
Designing past a tritanopia color test result
When a tritanopia color test shows two colours converging, the fix is rarely to abandon colour entirely. Adding a second visual channel, a pattern, an icon, a label or a difference in shape or position, alongside colour keeps the information accessible regardless of colour vision, which is also the exact strategy WCAG's use of color success criterion requires for any interface that currently relies on colour alone.
For blue and yellow specific failures typical of tritanopia, increasing the lightness contrast between the two colours, rather than only their hue difference, is usually the single most effective fix, since lightness perception is unaffected by any of the three colour vision deficiency types this tool simulates.
How this color blindness simulator works under the hood
Each simulation gamma decodes the input colour or every pixel of the uploaded image to linear sRGB, applies a published 3 by 3 transformation matrix specific to the selected condition, clamps the result back into the displayable 0 to 1 range, and gamma re encodes it for display. Achromatopsia instead computes the WCAG relative luminance of each pixel and outputs that single value across all three channels, producing a genuine greyscale rather than a simple desaturation.
For images, this happens per pixel on a canvas using getImageData and putImageData, processing every pixel in the frame in one pass, which keeps even large images fast since the transformation is a fixed matrix multiply rather than anything iterative.
| Condition | Missing or absent cone | Approximate prevalence |
|---|---|---|
| Protanopia | Long wavelength (red) | About 1% of men |
| Deuteranopia | Medium wavelength (green) | About 1% of men |
| Tritanopia | Short wavelength (blue) | Fewer than 1 in 10,000 |
| Achromatopsia | All three cone types | About 1 in 30,000 |
How to simulate color blindness
- 1
Choose a colour or upload an image
Pick a single hex colour to test, or drop in an image such as a chart, mockup or screenshot.
- 2
Select a condition
Choose protanopia, deuteranopia, tritanopia or achromatopsia.
- 3
Compare the original and simulated result
The simulated version renders beside the original so you can judge how much distinction is lost.
- 4
Adjust colours that converge
If two important colours become hard to tell apart, increase their lightness difference or add a non colour cue.
Related tools worth bookmarking
Sources and further reading
- W3C: WCAG 2.1 success criterion 1.4.1, use of colorThe guideline requiring that colour is never the only way information is conveyed.w3.org
- web.dev: Color and contrast accessibilityGoogle's guidance on colour perception, colour blindness types and designing around them.web.dev
- MDN: Understanding WCAG, color contrastMDN's explanation of how contrast and colour perception interact for users with low vision.developer.mozilla.org
Frequently asked questions
Common questions about the color blindness simulator.
Yes, color blindness and colour vision deficiency describe the same underlying condition, and this colour vision deficiency simulator covers the four main categories, protanopia, deuteranopia, tritanopia and achromatopsia, using the same published matrices researchers and accessibility tools rely on rather than an informal colour swap.
Deuteranopia and its milder form, deuteranomaly, are the most common, together accounting for the large majority of colour vision deficiency cases in men, followed by protanopia and protanomaly. Tritanopia is significantly rarer, and complete achromatopsia is rare in the general population, affecting roughly 1 in 30,000 people.
Yes. Drop in a PNG, JPG or WebP image and the same per condition transformation matrix is applied to every pixel, producing a simulated version you can compare directly against the original, which is far more informative than testing single colours in isolation for anything with real layout and multiple colours interacting.
No. Swapping or averaging channels directly ignores how the eye's cone cells actually respond to light and produces results that only loosely resemble genuine colour vision deficiency. An accurate simulation transforms gamma decoded, linear colour values through a matrix derived from actual cone response research, which is the approach this tool uses.
Almost never. The overwhelming majority of colour blindness is red green or blue yellow discrimination difficulty, not an absence of colour altogether. Complete achromatopsia, seeing only in shades of grey, is the rare exception, and this simulator includes it specifically as a distinct, separate condition rather than treating it as representative of colour blindness generally.
Increase the lightness difference between the two colours rather than only changing hue, since lightness perception is unaffected by every condition this tool simulates. Adding a second cue, such as a pattern, icon, label or position difference, is also effective and is the fix WCAG explicitly recommends whenever colour alone currently carries meaning.
Yes. The matrices applied for protanopia, deuteranopia and tritanopia come from published research on physiologically based colour vision deficiency simulation, applied to linear light values after gamma decoding, rather than an informal approximation. Achromatopsia uses the standard WCAG relative luminance formula to compute a genuine greyscale value per pixel.