Colour blindness simulator for palettes — protanopia, deuteranopia, tritanopia

How to use the colour blindness simulator

1. Paste your palette into Colours, one per line or separated by commas. HEX, rgb(), hsl() and CSS names all work.
2. Choose what to Simulate: All types, one dichromacy, one anomaly type, or Achromatopsia (no colour).
3. For protanomaly, deuteranomaly or tritanomaly, set Severity for the anomalous types from 10% to 100%.
4. Compare the swatch rows with the Original row, and read the warning list of pairs that merge.
5. Download Simulated values as cvd-simulation.csv if you need them in a report.

What it does and when to use it

Charts, maps, status badges and form errors often rely on colour alone. A red “error” and green “success” that look nothing alike to you can look almost the same to someone with a red-green deficiency. This tool runs every colour in your palette through a published vision model and tells you which pairs become hard to separate.

Use it on chart palettes, legend colours and any set where colour carries meaning. Then fix the risky pairs by changing lightness, adding labels or patterns, or picking new hues. The colour distance calculator shows how far apart two colours are, and the contrast grid checks text pairs.

How it works

Each colour is converted to linear RGB, multiplied by the Machado matrix for the chosen type and severity, clipped to the 0–1 range, and converted back to sRGB. Severity 100% is the full dichromacy matrix.

To flag risky pairs, the tool compares every pair with CIEDE2000 colour difference. A pair is listed when it was 10 or more apart originally but less than 10 apart after simulation. The threshold of 10 is a practical rule of thumb, not a standard.

Worked examples

These are the simulator’s own results.

A common five-colour chart palette. With All types, the tool flags 10 pairs. Under protanopia, green #2ca02c and orange #ff7f0e end up only ΔE2000 1.3 apart (#a39119 and #a59100), and blue #1f77b4 and purple #9467bd only 1.9 apart.

Pure red and green, deuteranopia. #ff0000 becomes #a39000 and #00ff00 becomes #efd63a. Both turn olive-yellow, but they still differ in lightness, so the pair is not flagged.

Deuteranomaly at 60%. The same red becomes #bb7d00 and the green #d6e131: closer together than normal, but less shifted than full deuteranopia.

Limits and tips

• Lightness is your strongest tool. Pairs that differ clearly in lightness usually survive every simulation; check them in grayscale too.
• The model assumes a standard sRGB screen. Wide-gamut or uncalibrated displays show different colours to begin with.
• It simulates flat colours, not images or whole pages.
• All calculation happens in your browser.