PopularHot
Color Picker
Use Color Picker to choose and convert color precisely — instant and free.
ColorOpen Tool
Color Blindness Simulator
See how an image looks to someone with colour-vision deficiency — protanopia, deuteranopia or tritanopia — by transforming it right in your browser. Nothing is uploaded.
Loading Color Blindness Simulator…
Your browser is preparing the tool. It runs 100% locally.
Quick Answer
Drop in an image and the tool re-renders it the way it might appear to someone with one of the three main types of colour blindness — protanopia (red-blind), deuteranopia (green-blind) or tritanopia (blue-blind). It works by applying a fixed colour-transform matrix to every pixel on a canvas. It is an approximation of the severe dichromat forms, useful for checking a design, and it runs entirely in your browser so your image is never uploaded.
What the Color Blindness Simulator Does
Load an image and pick a colour-vision type, and the tool shows a simulated version — an approximation of how that image looks to someone who is missing or has a shifted response in one of the eye's three cone types. You can switch between protanopia, deuteranopia and tritanopia to compare.
It is a practical accessibility check: see whether a chart, a status colour or a red-on-green cue still reads when colour perception changes, so you can fix problems before they reach colour-blind users.
How It Works
The image is drawn onto a canvas so the tool can read every pixel's red, green and blue values. For the chosen colour-vision type, it applies a fixed three-by-three transform matrix to each pixel: the new red, green and blue are weighted blends of the original three, with weights chosen to mimic how that type of colour vision confuses certain hues.
Because the same matrix is applied uniformly to every pixel, the whole image is remapped at once. The maths is a standard linear approximation of dichromatic vision — the kind used widely for accessibility previews — and all of it happens locally in your browser.
Processing pipeline
- Read the image pixels. Draw the image to a canvas and read each pixel's red, green and blue values.
- Choose the type. Select protanopia, deuteranopia or tritanopia, which selects its transform matrix.
- Apply the matrix per pixel. Replace each pixel's colour with a weighted blend of its channels using that matrix.
- Render the result. Paint the transformed pixels back to the canvas as the simulated image.
Per-pixel colour transform
for each pixel (R, G, B):
new R = R×a + G×b + B×c
new G = R×d + G×e + B×f
new B = R×g + G×h + B×i
(a…i = the fixed 3×3 matrix for the chosen type)Worked example
Deuteranopia, new R = 0.625·R + 0.375·G + 0·B (and so on for G and B)Each colour-vision type has its own fixed matrix of nine weights. The same transform is applied to every pixel of the image.
Privacy
Your image never leaves your device. It is read and transformed on a canvas in your browser, and nothing is uploaded to any server.
Because the work is local, you can safely preview private mockups, screenshots or client images without them being stored or sent anywhere.
Nothing is saved between sessions — close the tab and the image and its simulated version are gone.
Standards & references
- Dichromacy (the three types) — Protanopia, deuteranopia and tritanopia are the dichromat forms, where one of the three cone types is effectively missing — red, green and blue respectively. These are the severe forms this tool simulates.
- Colour-transform simulation — Simulating colour blindness by applying a fixed linear matrix to each pixel is a standard, well-known approximation used for accessibility previews. Research models (Brettel, Vienot, Machado) underpin this approach.
- Anomalous trichromacy — The milder, far more common forms — deuteranomaly, protanomaly, tritanomaly — where a cone is shifted rather than missing. This tool does not simulate these partial forms, only the full dichromat types.
Accuracy & Limitations
This is an approximation, not a medical or diagnostic tool. The matrices mimic the broad effect of each dichromacy, but real colour vision varies between people, and different research models give slightly different results. Use it to catch obvious problems, not to certify accessibility.
It simulates only the three severe dichromat types. The most common colour-vision deficiency is deuteranomaly — a milder, shifted green sensitivity affecting around 5 to 6 percent of men — which is partial, not the full deuteranopia shown here. The real-world experience of many colour-blind users sits between normal vision and these simulations.
It does not cover every form. Monochromacy (seeing no colour at all) and the anomalous trichromat types are not simulated, so the tool shows three points on a much wider spectrum of colour vision.
The transform works on the image's sRGB values directly. A more exact simulation converts to linear light first; doing the maths on gamma-encoded values, as here, is faster but slightly less precise. The result is a good guide, not a pixel-perfect reproduction.
Real-World Use Cases
Checking a design
See whether colours in a UI or chart still read with colour blindness.
Testing status colours
Confirm red-versus-green cues are not the only signal.
Improving accessibility
Spot problems before they reach colour-blind users and add labels or patterns.
Educating a team
Show colleagues how a design looks to colour-blind viewers.
When to use it — and when not to
Good for
- Previewing a design for colour blindness
- Checking red-green and blue cues
- Catching obvious accessibility problems
- Demonstrating colour-vision differences
Not the best choice for
- Medical diagnosis or certification
- Simulating the milder anomalous types
- Monochromacy or total colour blindness
- Pixel-perfect, model-exact reproduction
For accessible design, do not rely on colour alone — add labels, icons or patterns, and verify text with a contrast checker. For a clinical assessment, an eye-care professional uses proper testing. This tool is a design preview of the severe types, not a diagnosis.
Frequently Asked Questions
Which types of colour blindness does it simulate?
The three main dichromat types: protanopia (red cone missing), deuteranopia (green cone missing) and tritanopia (blue cone missing). You can switch between them to compare.
Is this accurate?
It is a reasonable approximation, not a medical tool. It uses fixed transform matrices that mimic each dichromacy broadly; real vision varies and different models differ. Use it to catch problems, not to certify accessibility.
Does it cover the most common colour blindness?
Not exactly. The most common form is deuteranomaly, a milder shifted-green sensitivity in around 5 to 6 percent of men. This tool shows the full deuteranopia, which is more severe than what most colour-blind people experience.
Is my image uploaded?
No. The image is read and transformed on a canvas in your browser. Nothing is sent to a server, so private mockups stay private.
How does the simulation work?
It applies a fixed three-by-three matrix to every pixel, replacing each colour with a weighted blend of its red, green and blue. Each colour-vision type has its own matrix.
What is the difference between -opia and -anomaly?
The -opia forms (protanopia, deuteranopia, tritanopia) are dichromacy, where a cone type is effectively missing. The -anomaly forms are milder, with a cone shifted rather than absent. This tool simulates the -opia forms only.
How common is colour blindness?
Red-green colour blindness affects about 1 in 12 men (8 percent) and 1 in 200 women. Blue-yellow (tritan) types are far rarer and affect men and women about equally.
Why do all three look different from each other?
Each type confuses a different part of the spectrum, so each matrix remaps colours differently. Comparing them shows which colour cues survive and which break down for whom.
What image formats can I use?
Common web image formats your browser can display, such as PNG and JPEG. The image is processed locally on a canvas.
Can I use this to make my design accessible?
It helps you spot issues, but the fix is to not rely on colour alone — add text labels, icons or patterns, and check contrast. Simulation reveals problems; good design practice solves them.
Does it simulate seeing no colour at all?
No. Monochromacy (total colour blindness) is not included, nor are the milder anomalous types. The tool covers the three severe dichromat types only.
Why might my result differ from another simulator?
Different tools use different research models and may convert colour spaces differently. All are approximations, so results vary slightly. Treat any single simulation as a guide, not the definitive view.
References
Applies a fixed colour-transform matrix per pixel for each of the three dichromat types; honest that it is an approximation of the severe forms, not the milder anomalous trichromacy that is far more common.
Related Tools
Popular
HEX to RGB Converter
Use HEX to RGB Converter to choose and convert color precisely — instant and free.
ColorOpen Tool
Trending
Color Palette Generator
Use Color Palette Generator to choose and convert color precisely — instant and free.
ColorOpen Tool
Trending
Gradient Generator
Use Gradient Generator to choose and convert color precisely — instant and free.
ColorOpen Tool
Editor's Pick
Contrast Checker
Use Contrast Checker to choose and convert color precisely — instant and free.
ColorOpen Tool
RGB to HEX Converter
RGB to HEX Converter with copy-ready values for design and front-end work.
ColorOpen Tool
Ready to try the Color Blindness Simulator?
It is free, private and runs entirely in your browser — no sign-up, no uploads, no limits.