CB
Color Blindness Simulator
Simulate Protanopia, Deuteranopia, Tritanopia, and Achromatopsia — see your image through another pair of eyes.
More Color Tools Tools
Select a deficiency type below. The original image is on the left, simulated on the right.
Original
Simulated
How to Use Color Blindness Simulator
Upload any image and simulate how it looks to people with four types of colour vision deficiency: Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind), and Achromatopsia (total colour blindness). The original and simulated images are displayed side by side with tabs to switch between deficiency types. Each simulation applies the scientifically established Brettel (1997) transformation matrix to every pixel on the canvas, running entirely in your browser.
About Color Blindness Simulator
Colour vision deficiency (CVD) — commonly called colour blindness — affects approximately 8% of men and 0.5% of women of Northern European descent, with lower prevalence in other populations. The most common forms are red-green deficiencies (Protanopia and Deuteranopia), which together account for over 99% of all CVD cases. Despite its prevalence, colour blindness is often overlooked in web and graphic design, leading to interfaces, charts, maps, and images that are confusing or entirely unreadable for a significant minority of users.
This simulator helps designers, developers, and content creators understand exactly how their visual work appears to people with different types of colour vision deficiency. Rather than applying a generic "colour-blind filter" (which often amounts to a simple desaturation), the tool applies the proper dichromatic transformation matrices from the Brettel et al. (1997) computational model, which has become the standard reference for CVD simulation in both academic research and practical tools. These matrices transform an RGB colour into the RGB colour that a dichromat (a person with one missing cone type) would perceive.
The four simulation modes are:
1. **Protanopia** — absence of L-cones (long-wavelength, "red" cones). Affected individuals confuse reds with greens and perceive reds as much darker. The transformation matrix reduces the red channel and redistributes the colour information across the remaining two cone types.
2. **Deuteranopia** — absence of M-cones (medium-wavelength, "green" cones). This is the most common form of CVD. Affected individuals also confuse reds and greens, but with different perceptual weighting than protanopes — greens appear more similar to reds rather than reds appearing darker.
3. **Tritanopia** — absence of S-cones (short-wavelength, "blue" cones). This is very rare (roughly 1 in 10,000 people). Affected individuals confuse blues with greens and yellows with violets. The world appears in shades of pink and cyan.
4. **Achromatopsia** — complete absence of colour vision (rod monochromacy). Extremely rare (roughly 1 in 30,000). The world appears entirely in shades of grey. This is simulated by converting every pixel to its luminance value using the standard ITU-R BT.709 luminance formula: `L = 0.299*R + 0.587*G + 0.114*B`.
The transformation is applied pixel-by-pixel using the Canvas API. For each pixel on the source canvas, `getImageData()` reads the R, G, B values, the matrix multiplication produces the new R', G', B' values (clamped to 0-255), and `putImageData()` writes the result onto a separate output canvas. This means the original image data is never modified — both the original and the simulated version can be displayed simultaneously.
Details & Tips
Transformation matrices (Brettel 1997, as implemented in the Vischeck project and subsequently in many CVD simulators):
**Protanopia matrix** (L-cone absent):
```
R' = 0.56667*R + 0.43333*G + 0.00000*B
G' = 0.55833*R + 0.44167*G + 0.00000*B
B' = 0.00000*R + 0.24167*G + 0.75833*B
```
In protanopia, the red channel output is a weighted blend of the original red and green (with green contributing about 43%), and the green channel output is similarly blended with a slightly different proportion. The blue channel receives a small contribution from green (about 24%) because the S-cone pathway has some cross-talk with the M-cone pathway.
**Deuteranopia matrix** (M-cone absent):
```
R' = 0.62500*R + 0.37500*G + 0.00000*B
G' = 0.70000*R + 0.30000*G + 0.00000*B
B' = 0.00000*R + 0.30000*G + 0.70000*B
```
Deuteranopia redistributes differently — the red output retains more red (62.5%) and takes less from green (37.5%), while the green output is dominated by red (70% from red, only 30% from green). The blue channel has cross-talk from both red (0%) and green (30%).
**Tritanopia matrix** (S-cone absent):
```
R' = 0.95000*R + 0.05000*G + 0.00000*B
G' = 0.00000*R + 0.43333*G + 0.56667*B
B' = 0.00000*R + 0.47500*G + 0.52500*B
```
Tritanopia affects blue-yellow perception. Red is largely preserved (95% from red, 5% from green). Green becomes a blend of green (43%) and blue (57%). Blue becomes a blend of green (47.5%) and blue (52.5%).
**Achromatopsia formula:** Each pixel is converted to a single luminance grey value: `L = Math.round(0.299*R + 0.587*G + 0.114*B)`. All three output channels are set to L, producing a grayscale pixel. The weights are the ITU-R BT.709 standard luminance coefficients.
**Implementation approach:** For each deficiency type, the algorithm:
1. Gets the full image data array from the source canvas using `ctx.getImageData(0, 0, width, height)` — a single call that returns a `Uint8ClampedArray` of `width * height * 4` bytes (RGBA per pixel).
2. Iterates over every pixel (4 bytes at a time: i, i+1=R, i+2=G, i+3=B, i+4=A).
3. Applies the matrix multiplication to get R', G', B'.
4. Clamps each result to the 0-255 integer range: `Math.max(0, Math.min(255, Math.round(value)))`.
5. Writes the new values back into the array, preserving the original alpha channel.
6. Puts the modified array onto the output canvas using `ctx.putImageData(imageData, 0, 0)`.
**Performance:** A 900×600 image has 540,000 pixels. The matrix multiplication per pixel is three dot products (9 multiplications + 6 additions). At ~540,000 × 15 operations ≈ 8 million floating-point operations, this completes in well under 100ms on modern hardware. The tool recalculates only when the user switches deficiency types; the original image data remains cached.
**Display layout:** Two canvases side by side — the original image on the left, the simulated version on the right. A tab bar above the right canvas lets the user switch between the four deficiency types. Alternatively, a dropdown or radio buttons can be used. Both canvases display at the same dimensions for easy visual comparison.
**Clamping:** All matrix outputs are clamped to 0-255. While the Brettel matrices are designed to produce values within the valid range for any valid RGB input, floating-point rounding and edge cases near 0 and 255 can produce values slightly outside the range (e.g., -0.001 or 255.001), which would cause `putImageData` to clamp silently. Explicit clamping ensures consistent, predictable output.
**Limitations:** The Brettel model is a computational approximation. Real human colour vision is more complex — individual variation, rod intrusion at low light levels, and cortical processing all affect what a person with CVD actually perceives. The simulation gives a useful approximation for design review, not a perfect replication of another person's visual experience.
Frequently Asked Questions
What exactly does this simulator do?
It applies scientifically established transformation matrices (Brettel 1997) to every pixel of your uploaded image, producing a version that approximates how a person with a specific type of colour vision deficiency would perceive it.
What types of colour blindness can I simulate?
Four types: Protanopia (red-blind, absent L-cones), Deuteranopia (green-blind, absent M-cones), Tritanopia (blue-blind, absent S-cones), and Achromatopsia (total colour blindness, greyscale vision only).
What is the difference between Protanopia and Deuteranopia?
Both are red-green deficiencies, but with different perceptual outcomes. In protanopia, reds appear darker and are confused with greens. In deuteranopia, greens and reds are confused but reds retain more of their brightness. Deuteranopia is more common.
How is Achromatopsia simulated?
Every pixel is converted to a single luminance (brightness) value using the standard ITU-R BT.709 formula: 0.299×R + 0.587×G + 0.114×B. All three output channels are set to this value, producing a greyscale image.
Are the simulation results scientifically accurate?
The Brettel (1997) model is the standard computational model for dichromatic colour vision simulation, cited in hundreds of academic papers and used by major accessibility tools. It is a useful approximation, not a perfect replication of individual human perception.
Why are there four separate matrices?
Each type of colour blindness corresponds to the absence of a different type of cone cell in the retina. The three cone types (L, M, S — long, medium, short wavelength) each have different spectral sensitivities, so losing each one transforms colour perception in a unique way described by a different 3×3 matrix.
Does the simulation account for individual variation?
No — the Brettel model assumes complete absence of one cone type (dichromacy). In reality, many people have anomalous trichromacy (altered but present cones) with varying degrees of severity. This tool simulates the extreme dichromatic case, which is useful for worst-case design review.
What image formats are supported?
Any format your browser can render: JPEG, PNG, WebP, BMP, GIF, AVIF, and SVG. The simulation processes the rendered canvas pixels, so the source format does not matter.
How long does the simulation take?
For typical images (e.g., 900×600 pixels), the matrix transformation runs in under 100 milliseconds. The result appears essentially instantaneously when you switch between deficiency types.
Can I compare original and simulated side by side?
Yes — the original image is displayed on the left and the simulated version on the right (or below on narrow screens), both at the same dimensions for direct visual comparison.
Is my image uploaded to a server?
No — the image is loaded locally via FileReader and all pixel transformations run in your browser using the Canvas API. Nothing is transmitted anywhere.
Who should use this simulator?
Web designers, UI/UX designers, graphic designers, data visualisation creators, cartographers, and anyone producing visual content that needs to be accessible. It helps you identify colour combinations that become indistinguishable under CVD before you ship your design.
Part of These Collections
Also Available As
color blindness simulator, protanopia simulator, deuteranopia simulator, tritanopia simulator, achromatopsia, color vision deficiency simulation, cvd simulator, brettel color blindness, daltonism simulator
Found a Problem?
Let us know if something with Color Blindness Simulator isn't working as expected.
Something went wrong. Please try again.
Thanks — we'll take a look.