Free CVD simulator
Color blindness simulator that names the pairs that collide
Free and with no signup: paste a palette and every color is redrawn four times, so #ff0000 comes back as #6d5f00 for a protanope, #a39000 for a deuteranope, an almost untouched #ff000f for a tritanope and a flat #7f7f7f with no color signal at all. The severity slider matters more than the type does — full dichromacy covers roughly a quarter of color-blind viewers, and the milder anomalous forms cover the rest. After the grid, every pair is measured: Tailwind red-500 and green-500 fall from 127 ΔE apart to 12.7 under deuteranopia, and that is the reading that decides whether a chart works.
- 100% free
- No signup
- 4 deficiency types
- 24 colors per run
- PNG contact sheet
6 colors read, 15 pairs compared in each simulation.
Full dichromacy: the cone contributes nothing. This is the worst case, and describes about a quarter of color-blind viewers.
Press Ctrl+V anywhere on the page to drop in a palette — one color per line or a block of CSS — no need to click the field first.
| As authoredThree working cone types | ProtanopiaL cone missing or shifted — about 2 in 100 men | DeuteranopiaM cone missing or shifted — about 6 in 100 men have one or the other | TritanopiaS cone missing or shifted — under 1 in 10,000, either sex | AchromatopsiaNo usable color signal — about 1 in 30,000 |
|---|---|---|---|---|
| #ef4444 | #766c42 | #a0913e | #ff0046 | #848484 |
| #f59e0b | #bba400 | #d0b914 | #ff8887 | #b1b1b1 |
| #22c55e | #c6b355 | #b5a766 | #00c1ad | #acacac |
| #14b8a6 | #afada5 | #9b9ea8 | #00bcb2 | #a4a4a4 |
| #3b82f6 | #418efa | #007df4 | #009eb0 | #858585 |
| #8b5cf6 | #007dfb | #0078f3 | #6c80a1 | #7b7b7b |
The same palette as chart series
As authored
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
Pairs that stop being two colors
Protanopia — 1 pair
- #3b82f6#8b5cf6ΔE 13.2 — separable side by side, not across a chart
Deuteranopia — 2 pairs
- #3b82f6#8b5cf6ΔE 3.8 — separable side by side, not across a chart
- #ef4444#22c55eΔE 12.7 — separable side by side, not across a chart
Tritanopia — 1 pair
- #22c55e#14b8a6ΔE 6.4 — separable side by side, not across a chart
Achromatopsia — 9 pairs
- #ef4444#3b82f6ΔE 0.7 — under the 2.3 just-noticeable difference, so these are now one color
- #f59e0b#22c55eΔE 1.9 — under the 2.3 just-noticeable difference, so these are now one color
- #22c55e#14b8a6ΔE 2.8 — separable side by side, not across a chart
- #ef4444#8b5cf6ΔE 3.4 — separable side by side, not across a chart
- #3b82f6#8b5cf6ΔE 4.0 — separable side by side, not across a chart
- #f59e0b#14b8a6ΔE 4.7 — separable side by side, not across a chart
- #14b8a6#3b82f6ΔE 11.8 — separable side by side, not across a chart
- #ef4444#14b8a6ΔE 12.4 — separable side by side, not across a chart
- #22c55e#3b82f6ΔE 14.6 — separable side by side, not across a chart
How to simulate color blindness on a palette
Colors in, four simulations out, and a list of the pairs that stopped being two colors.
Put the palette in, not just one swatch
Type or paste the colors you are worried about, one per line — or paste a block of CSS and every value in it is picked out, the labels and semicolons ignored. Twenty-four colors are simulated per run, duplicates collapsed, because the interesting failure is almost never one color on its own: it is two chart series, or a success green sitting next to an error red.
Set the severity before you judge anything
The slider runs from 0 to 100%. At 100% the cone contributes nothing at all, which is dichromacy — protanopia, deuteranopia or tritanopia — and that is the worst case to design against. Below 100% the cone is present but its peak sensitivity is shifted, which is anomalous trichromacy; deuteranomaly around 50% describes more color-blind viewers than every dichromatic type put together, so it is worth a look before you sign a palette off.
Read the collision list, then fix it with lightness
Under the grid every pair is compared inside each simulation and anything closer than ΔE 15 is listed, with pairs under 2.3 marked as merged into a single color. A pair that fails there needs its lightness separated or a second visual channel — a pattern, a marker shape, a direct label — not a different hue. Copy the whole table of simulated hex codes, or download the PNG contact sheet to drop into the ticket.
Technical specifications
| Colors per run | 24, taken in the order they appear; repeated values are collapsed and the count of skipped duplicates is shown. Anything past the limit is reported rather than silently dropped |
|---|---|
| Deficiencies simulated | Protanopia, deuteranopia, tritanopia and achromatopsia, each rendered beside the authored color — five columns in the grid and five in the downloaded sheet |
| Model | Machado, Oliveira & Fernandes (2009) 3×3 matrices — the same model Chrome DevTools uses — applied after the sRGB transfer curve is removed, because running them on 0-255 channels washes every result out |
| Severity | 0-100% in steps of 5, interpolated in linear light between the authored color and the dichromatic result. 100% is dichromacy; the mid-range approximates protanomaly, deuteranomaly and tritanomaly |
| Pair comparison | Every combination inside every simulation: 276 pairs at the 24-color limit, 1,104 comparisons across the four deficiencies, each a CIE76 ΔE in Lab |
| Flagging thresholds | ΔE below 15 is listed as a risk; ΔE below 2.3, the just-noticeable difference, is marked as two colors that have become one |
| Input accepted | Hex in 3, 4, 6 or 8 digits, rgb()/rgba() and hsl()/hsla() in comma or space syntax, CSS Color 4 slash alpha and 148 color keywords — pasted stylesheets, Figma dumps and comma-separated lists all parse |
| Output | A tab-separated table of every simulated hex code for the clipboard, and a PNG contact sheet drawn at 2× on a canvas in this tab, named for the palette size and the severity you used |
Frequently asked questions
Which deficiency should I test against first?
Deuteranomaly, then deuteranopia — the green-side conditions are the common ones. Around 8% of men of northern-European descent and 0.5% of women have some inherited color-vision deficiency, and roughly 6 in 100 men are on the deuteran side, split about five to one between the anomalous and the dichromatic form. Protan conditions run at about 2 in 100 men, tritan defects are rarer than 1 in 10,000 and hit both sexes equally because the gene sits on chromosome 7 rather than the X, and achromatopsia is around 1 in 30,000. If you only ever check one column, check the deuteranopia one.
Why doesn't the red channel just go to zero?
Because a missing cone is not a missing channel. Zeroing red would turn #ff0000 into black; a protanope's eye still receives the light, it just cannot separate it from the green signal, so the color is projected onto the plane the two remaining cone types can span. Pure red comes back as #6d5f00 for protanopia and #a39000 for deuteranopia — an olive in both cases, but a much darker one for the protanope, because the L cone carries most of red's luminance and the M cone does not. That luminance difference is why protanopes are the group that loses brake lights and red text on dark backgrounds.
Is this what a color-blind person actually sees?
No — it is what a person with typical vision would have to see to face the same discrimination problem. Every dichromatic model in circulation, this one included, is anchored to reports from unilateral dichromats: the handful of documented people with one typical eye and one affected eye, the only population that can describe both views and say which colors match. It says nothing about a lifetime of adaptation: someone born deuteranopic has learned which olive means ripe and calls plenty of things red with perfect confidence. Treat the output as a discrimination test — can these two be told apart — rather than a photograph of anyone's experience.
My palette passes contrast. Why does it fail here?
Contrast and hue discrimination are two different measurements and neither predicts the other. Tailwind's red-500 and green-500 sit 127 ΔE apart as authored and 12.7 apart under deuteranopia — still visible side by side, hopeless as two lines on a chart — while both keep exactly the contrast ratio against white that they had. Run the pair through the color contrast checker and nothing looks wrong, because that formula compares light output and is blind to hue by design.
Does color blindness change the WCAG contrast ratio?
It changes the real ratio, and WCAG deliberately does not ask you to check it. Pure red on black measures 5.25:1 as authored and 3.29:1 through the protanopia simulation, so an AA pass becomes a fail; red #dc2626 on white drops from 4.83:1 to 4.00:1 under deuteranopia. Success Criterion 1.4.3 is measured on the colors you shipped, so those simulated numbers are not a conformance failure — but 1.4.1 Use of Color is a criterion, and it is the one that a red-versus-green status dot breaks.
Can I simulate a screenshot or a whole page instead of colors?
Not here — this page takes color values, and simulating an image is a different job with a different tool. Chrome and Edge do it live under DevTools → Rendering → Emulate vision deficiencies, and Firefox has the same thing in the Accessibility panel, both on the page as rendered rather than on a static capture. If what you have is a picture, lift the colors out of it first with the image color picker or pull the dominant palette with color from image, then bring those hex codes back here where the pair-by-pair report lives.
Why do two colors show a ΔE of 12 and still get flagged?
Because ΔE 12 is a comfortable difference for two swatches touching each other and a poor one for two areas 300 pixels apart. The list flags anything under 15 and marks anything under 2.3 — the just-noticeable difference — as having merged completely. CIE76 is the metric here, which over-penalises differences among saturated colors and under-reports them among the desaturated olives and greys that dichromatic simulation produces, so read the number as a ranking of your riskiest pairs rather than as a threshold to argue over.
About simulating color-vision deficiency
Typical human vision runs on three cone types with peak sensitivities near 564nm, 534nm and 420nm — L, M and S. Take one away and color space loses a dimension: everything that used to be distinguished along that axis collapses onto a line. That is why protanopia and deuteranopia both flatten reds and greens into the same band of yellows and olives, and why they are not the same condition even so. A protanope is missing the L cone, which supplies most of the luminance in a red, so red goes dark as well as beige — pure red drops from a relative luminance of 0.213 to 0.114. A deuteranope keeps that luminance almost intact and loses only the hue. The two columns in the grid look similar until you put a red button on a dark background, at which point one of them is unreadable and the other is merely ugly.
The failure this page exists to catch is a palette chosen by hue distance. Two hues on opposite sides of the color wheel feel maximally separated, and a red-green pairing is the textbook complementary color choice, yet it is precisely the axis dichromacy removes. The numbers from the default palette make the point: blue-500 and violet-500 sit 36 ΔE apart as authored and 3.8 apart under deuteranopia, and in grayscale red-500 and blue-500 land 0.7 apart — the same grey, to within a rounding error. The repair is never a different hue. Separate the swatches by lightness instead, which every simulation preserves, and build the ramp so the steps are evenly spaced in perceived lightness — that is what the color palette generator produces. Then add the second channel WCAG 1.4.1 actually asks for: a marker shape, a hatch, a direct label. A legend keyed to hue alone fails for the same viewers no matter how good the hues are, and an icon carrying that second channel wants to stay vector, so trace it with png to svg rather than shipping a flattened raster you cannot recolor.
Three things go wrong in other simulators often enough to be worth naming. The first is gamma: the matrices are defined on linear light, and a tool that multiplies 0-255 sRGB values directly produces results that are visibly too pale — a common giveaway is a simulated red that looks sandy rather than olive. The second is the Viénot (1999) coefficients, which circulate as a set of RGB numbers and are in fact defined on LMS cone responses; applied to R, G and B they give a plausible-looking answer that is wrong, particularly for tritanopia. The third is treating full dichromacy as the only setting, which turns an accessibility check into a horror show and loses the audience it is meant to serve, since anomalous trichromats outnumber dichromats roughly three to one. None of this replaces a luminance check: run the pairs through the color contrast checker for the ratio at each text size, or the WCAG contrast checker when the whole palette has to be graded criterion by criterion. A design can clear 7:1 on every pair and still be undecodable by 8% of the men reading it.
Where the palette is simulated
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The contact sheet is no exception: it is painted onto a canvas element inside this tab and handed straight to your browser's download folder, so an unreleased brand palette never leaves the machine, and reloading the page wipes the list.