See any image the way people with protanopia, deuteranopia, tritanopia or achromatopsia see it — side by side with the original, at adjustable severity.
Color Blindness Simulator
See any image the way people with protanopia, deuteranopia, tritanopia or achromatopsia see it — side by side with the original, at adjustable severity.
The Color Blindness Simulator runs entirely in your browser using the canvas. Your images are processed on your device and never uploaded.
Color Blindness Simulator shows your chart, interface or photo through the eyes of the roughly 8% of men and 0.5% of women with a colour-vision deficiency. Drop an image, pick a vision type — deuteranopia and protanopia (the common red-green forms), tritanopia (rare blue-yellow) or achromatopsia (no colour at all) — and compare the result against the original side by side. The simulation uses the physiologically based Machado transformation matrices, applied in linear light with proper gamma handling, so the result is a research-grade preview rather than a grey-tinted guess. A severity slider covers the far more common partial deficiencies, where colour discrimination is reduced but not absent. If your error and success states differ only by red versus green, thirty seconds here will show you exactly what a colour-blind user cannot see.
Features
Protanopia, deuteranopia, tritanopia and achromatopsia
Physiologically based simulation matrices applied in linear light
Severity slider from mild anomaly to complete dichromacy
Side-by-side original and simulated view
Prevalence noted for each vision type
Download the simulated image for reviews and tickets
Handles screenshots, charts, maps and photos alike
Everything processed on your device
How to use the Color Blindness Simulator
Drop in a screenshot, chart or design
Pick the vision type to simulate
Adjust severity for partial deficiencies
Compare the panels and download the result if needed
Example
Input
Dashboard with red error and green success badges
Output
Under deuteranopia both badges render as the same murky ochre
The classic red-green failure — invisible until you look through the right eyes.
Common errors & troubleshooting
The simulated image looks almost unchanged. — Images dominated by blues, yellows and neutrals survive red-green deficiencies well — that is a pass, not a malfunction. Test the screens that rely on reds and greens for meaning.
Everything looks grey under achromatopsia — surely too extreme? — Complete achromatopsia genuinely removes all hue; it is also extremely rare. Use it as the ultimate contrast check: whatever survives greyscale survives everything.
Results differ slightly from another simulator. — Some tools apply matrices directly to encoded pixel values without gamma correction. This one linearises first, which matches the published research method — differences show mostly in dark regions.
A very large photo takes a moment to process. — Every pixel passes through the transformation, so the work scales with the pixel count. The preview is capped at a sensible working size — plenty for judging colour choices.
Frequently asked questions
What do the different types of color blindness mean?
Protanopia is missing red cones, deuteranopia missing green cones — both collapse reds and greens together and affect about 1% of men each, with milder anomalous forms far more common. Tritanopia affects blue-yellow and is rare; achromatopsia removes colour entirely.
How common is color blindness?
Roughly 8% of men and 0.5% of women have some red-green deficiency — about one in twelve male users of anything you build. Complete colour absence is far rarer, around 0.003%.
How accurate is this simulation?
It uses the Machado, Oliveira and Fernandes matrices from vision research, applied in linear RGB with proper gamma conversion — the standard approach for dichromacy preview. Individual perception varies, but the confusions it reveals are the real ones.
How do I make my design work for color-blind users?
Never let colour be the only signal: pair it with icons, labels or patterns. Keep text contrast at 4.5:1 or better, and prefer blue-orange palettes over red-green for charts. WCAG 1.4.1 codifies exactly this.
Which vision type should I test first?
Deuteranopia — it is the most common significant deficiency and representative of red-green confusion generally. If your design reads correctly under deuteranopia and in greyscale, you have covered the overwhelming majority of cases.
Related tools
Image Color Palette Extractor — Extract a dominant color palette from an image as HEX, RGB and HSL with CSS variables.
Color Format Converter — Convert a color across HEX, RGB, HSL, HWB, LAB, LCH and OKLCH with a live swatch.
Image Color Picker — Upload an image and pick colors from any pixel to get HEX, RGB and HSL values, in your browser.
Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
Blur & Redact Image — Permanently blur, pixelate or black out parts of a screenshot before sharing it.
Round Image Corners — Clip photos to rounded rectangles or circles and export PNGs with transparent corners.