Simulate how a design or chart looks to people with protanopia, deuteranopia, tritanopia or achromatopsia.
Updated
Mode
Upload an image
Image stays on your device. Nothing is uploaded.
Quick start
How to check a design for colour-blindness safety
Upload a screenshot or paste a list of colours, choose a CVD type and severity, and compare the original side-by-side with the simulation.
Step 1
Pick a mode
Image for a screenshot or chart; Swatches for a colour list.
Step 2
Choose a CVD type
Protanopia, deuteranopia, tritanopia or achromatopsia. Slide severity from 0 to 100%.
Step 3
Inspect or download
Spot any pairs that collapse to the same colour. In image mode, download the simulated PNG to share with reviewers.
In-depth guide
Colour-blindness simulator — check designs against four CVD types
Drop in a screenshot of your UI, dashboard or chart and see how it looks under the four most common types of colour vision deficiency (CVD): protanopia, deuteranopia, tritanopia, and achromatopsia (no colour). Or paste a list of colours and compare them as swatches. The simulation runs entirely in your browser using the Machado–Oliveira–Fernandes (2009) standard matrices.
Who is affected by CVD
Roughly 1 in 12 men and 1 in 200 women have some form of colour vision deficiency — that's a sizeable slice of any audience. The two most common types (protanomaly and deuteranomaly) both affect the red-green axis: people in this group can have real difficulty telling pass/fail traffic lights apart on a chart, or distinguishing the "high" and "low" stop in a typical heat-map gradient.
Designing for CVD is not a niche accessibility task; it's the same kind of due-diligence as keyboard navigation or screen-reader labels.
How the simulation works
For each pixel the tool applies a 3×3 matrix multiplication on the (r, g, b) value. The matrix is one of four hand-derived dichromacy matrices from the 2009 paper "A Physiologically-Based Model for Simulation of Color Vision Deficiency" by Machado, Oliveira and Fernandes. The severity slider linearly interpolates between the identity matrix and the full-dichromacy matrix to approximate the anomalous-trichromacy variants (protanomaly, deuteranomaly, tritanomaly).
The matrices are applied to display-space sRGB values, which is what the original paper specifies and what design tools like Adobe Photoshop and Sim Daltonism use. Applying them in linear sRGB would shift the result's apparent lightness; we use the convention that matches industry tooling so the output is directly comparable.
Designing for colour vision deficiency
The core rule: don't rely on hue alone to convey meaning.
Pair colour with shape or label — bullet glyphs, icons, prefixes (✓ / ✕), or text annotations.
Use CVD-safe palettes — blue + orange (sometimes called the "ColorBrewer" pair) survives all three common red-green and blue deficiencies.
Step lightness, not just hue — sequential heat-maps that move through lightness (e.g. light yellow → dark red) read well across all CVD types.
Check contrast — colour-deficient viewers still see luminance contrast normally. /tools/contrast-checker handles that.
Add a CVD pass to your design review — run a screenshot through this tool before shipping any colour-coded chart, status badge or warning UI.
Privacy & safety
Both the image mode and the swatch mode run entirely in your browser. The image is loaded into a <canvas> element, processed in JavaScript, and rendered back to a second canvas — there's no upload step. The page is fully functional offline once loaded.
Frequently asked questions
Does the simulator upload my image?
No. The image is loaded into a canvas in your browser and the simulation is computed pixel-by-pixel locally. Nothing is sent to a server, no telemetry is recorded, and the simulated image is generated as a download on your machine.
Which types of colour vision deficiency are simulated?
The four most common: Protanopia (red-blind), Deuteranopia (green-blind), Tritanopia (blue-blind) and Achromatopsia (total absence of colour). The severity slider linearly interpolates between normal vision and full dichromacy — that's a standard approximation for the anomalous-trichromacy variants (protanomaly, deuteranomaly, tritanomaly).
How accurate is the simulation?
It uses the Machado-Oliveira-Fernandes (2009) matrices that have become the de-facto standard for CVD simulation in design tools. They closely approximate what someone with that deficiency would perceive, but no static matrix can model individual variation perfectly. The simulator is a design aid, not a medical assessment.
Should the simulation be done in linear sRGB or display sRGB?
The Machado et al. paper derives the matrices for application directly on sRGB display values, which is what this tool does. Applying them in linear sRGB would shift the lightness of the result — design tools like Adobe Photoshop and Sim Daltonism follow the sRGB-direct convention, so this tool's output matches industry conventions.
How big can the image be?
There's no hard limit, but very large images (>10 MP) may take a second or two to process and will use a lot of memory. For UI screenshots, app mocks and dashboards — the common case — it's effectively instant.
What does the swatch grid show?
It applies each CVD simulation to a sample of colours so you can compare across types without uploading anything. Paste your own comma-separated HEX list to test brand colours, chart palettes or UI tokens.
Does CVD-safe design mean I can't use red and green at all?
No. The issue is relying on hue alone to convey information. Pair colour with shape, position, label or pattern; or use combinations that survive the simulation (blue + orange holds up across all three common types, for example). /tools/contrast-checker also helps — high contrast makes everyone's life easier.
Why is achromatopsia included?
It's how the world looks to about 1 in 30,000 people, and the grayscale check is also a quick proxy for whether your UI works in low-colour viewing conditions (printouts, e-ink screens, sun-glare).
Keep exploring
More tools you'll like
Hand-picked utilities that pair well with the one you're on — all
free, client-side, and zero-signup.