Color Blindness Simulator
Preview how a color — or an entire image — appears to people with the three main types of color vision deficiency: protanopia, deuteranopia, and tritanopia, plus full grayscale color blindness (achromatopsia). Everything runs locally in your browser; images are never uploaded anywhere.
A fixed 5-color example palette (red, green, blue, yellow, purple) simulated under each condition — useful for spotting red/green or blue/yellow confusion at a glance.
Drag & drop an image here
or click to browse — JPG, PNG, GIF, WebP supported
Sponsors
About Color Blindness Simulation
Color vision deficiency (commonly called color blindness) affects how certain wavelengths of light are perceived because one or more of the eye's three cone photoreceptor types responds abnormally or is missing entirely. This tool models the most common forms by transforming each pixel's red, green, and blue values with a fixed matrix that approximates how a color-blind viewer's eyes would process the same light.
The Three Main Types
Protanopia is the absence of functioning long-wavelength (red-sensing) cones. Deuteranopia is the absence of functioning medium-wavelength (green-sensing) cones — the most common form. Tritanopia is the absence of functioning short-wavelength (blue-sensing) cones, and is much rarer. Achromatopsia is total color blindness, where vision is reduced entirely to shades of gray based on perceived brightness.
The Transform Matrices
Each simulated color is computed by multiplying the original sRGB channel values by a fixed 3×3 matrix. For protanopia:
\[ \begin{bmatrix} R' \\ G' \\ B' \end{bmatrix} = \begin{bmatrix} 0.567 & 0.433 & 0.000 \\ 0.558 & 0.442 & 0.000 \\ 0.000 & 0.242 & 0.758 \end{bmatrix} \begin{bmatrix} R \\ G \\ B \end{bmatrix} \]
For deuteranopia:
\[ \begin{bmatrix} R' \\ G' \\ B' \end{bmatrix} = \begin{bmatrix} 0.625 & 0.375 & 0.000 \\ 0.700 & 0.300 & 0.000 \\ 0.000 & 0.300 & 0.700 \end{bmatrix} \begin{bmatrix} R \\ G \\ B \end{bmatrix} \]
For tritanopia:
\[ \begin{bmatrix} R' \\ G' \\ B' \end{bmatrix} = \begin{bmatrix} 0.950 & 0.050 & 0.000 \\ 0.000 & 0.433 & 0.567 \\ 0.000 & 0.475 & 0.525 \end{bmatrix} \begin{bmatrix} R \\ G \\ B \end{bmatrix} \]
And for achromatopsia, all three output channels are set to the same standard luminosity-weighted gray value:
\[ R' = G' = B' = 0.299R + 0.587G + 0.114B \]
Each resulting value is clamped to the valid 0–255 range before being displayed. In image mode, this same calculation is applied independently to every pixel using the Canvas getImageData / putImageData APIs.
An Important Limitation
These are widely used, simplified approximation matrices intended for design and UI testing — not a medically precise diagnostic tool. Real color vision deficiency varies significantly in severity between individuals, and there are also "anomalous" partial forms (protanomaly, deuteranomaly, tritanomaly) where the affected cone type is present but shifted, rather than absent. This simplified simulator does not model those in-between cases separately.
Frequently Asked Questions
What's the difference between protanopia, deuteranopia, and tritanopia?
Protanopia is missing red-sensing cones, deuteranopia is missing green-sensing cones, and tritanopia is missing blue-sensing cones. Protanopia and deuteranopia both cause red-green confusion and are far more common than tritanopia, which causes blue-yellow confusion.
How common is color blindness?
Red-green color blindness (protanopia and deuteranopia combined, including their milder anomalous forms) affects roughly 1 in 12 men (about 8%) and 1 in 200 women, due to the relevant genes being carried on the X chromosome. Tritanopia and full achromatopsia are both much rarer, each affecting well under 1 in 10,000 people.
Is this simulator medically accurate?
No. It uses standard simplified approximation matrices meant for design and accessibility testing, not clinical diagnosis. Actual color vision deficiency varies in severity from person to person, and this tool does not distinguish full color blindness (like protanopia) from its milder anomalous variants (like protanomaly).
Why does my image upload stay private?
The entire simulation runs in your browser using the HTML5 Canvas API. Your image is read locally with FileReader, drawn to an in-memory canvas, and transformed pixel-by-pixel with JavaScript — it is never sent to any server.
What should designers do to make their work color-blind-friendly?
Never rely on color alone to convey information. Pair color with patterns, icons, text labels, or shape differences (for example, in charts and status indicators). Also ensure sufficient brightness/contrast between adjacent colors, since contrast differences remain visible even when hue differences are not.
Can I test a whole palette at once instead of one color?
Yes — the example palette section below the main swatch shows five common colors (red, green, blue, yellow, purple) simulated under all four conditions simultaneously, which makes it easy to spot problem pairs like red versus green.