Color Blindness Simulator

How to Use the Color Blindness Simulator

Features

Colour Blindness Is More Common Than Most Design Reviews Account For

Roughly 1 in 12 men and 1 in 200 women have some form of colour vision deficiency — in a team of any size, or an audience of any real scale, someone is very likely affected. Most of them will never mention it in a design review, because the interface usually still "works" for them in a technical sense — buttons are clickable, forms submit — it's specifically the moments where colour is the only signal that quietly fail, and those moments are easy to miss if nobody on the team happens to share that experience.

This tool exists to make that gap visible without waiting for a user complaint. Pick a type, look at the same interface or image two ways, and the problem — or the absence of one — becomes obvious immediately, in a way a written accessibility checklist rarely communicates as clearly.

Eight Types, One Root Cause

Human colour vision relies on three types of cone cells in the retina, each most sensitive to red, green or blue light. Every type simulated here traces back to one of those cones working weakly or not at all. Protanopia and Deuteranopia — no red or no green cone function — are the classic "red-green colour blind" categories, and together with their milder Protanomaly and Deuteranomaly variants, they account for the vast majority of colour vision deficiency, with Deuteranomaly alone affecting roughly 5% of men.

Tritanopia and Tritanomaly — blue cone deficiency — are far rarer and affect all genders roughly equally, causing blue/yellow rather than red/green confusion. Achromatopsia, total colour blindness, is extremely rare and shows the world entirely in shades of grey; Achromatomaly is its much milder, partial counterpart. Selecting each type updates the info panel with its real-world prevalence, so it's clear at a glance which cases are common design considerations and which are genuinely rare edge cases.

Two Ways to Test, Depending on What You Have

When you're still choosing a palette — before there's a finished screen to screenshot — the Demo Scene is the faster check: a small chart, a row of status dots, and a pair of form validation states, all rendered live with your own six colours. Swap any swatch, or pull in your last saved palette from the Color Palette Generator, and watch all four mini-patterns update together across every colour blindness type.

Once a real screen exists, Your Image mode is more useful — upload an actual screenshot, chart export or mockup and either drag the slider to compare one type against the original in detail, or switch to the grid to see all 9 variations laid out at once. The grid is usually the faster way to spot which specific type causes the worst problem for a given image; the slider is better once you want to study exactly where it breaks down.

Who Actually Needs This Check

Product designers and UI teams reviewing a chart, dashboard or status system before it ships, to catch colour-only signalling problems while they're still cheap to fix.

Front-end developers implementing designs who want to sanity-check a colour scheme independently, without waiting for a formal accessibility audit to flag it.

Data visualisation and BI teams choosing chart palettes — the single most common place colour-only encoding causes real confusion, especially with more than 3-4 series.

Content and marketing teams checking that campaign graphics, infographics and social assets still communicate clearly for the roughly 8% of male viewers with some form of colour vision deficiency.

From a Suspicious Chart to a Confirmed Fix

Reviewing a dashboard before launch: upload a screenshot, switch to the All Types Grid, and scan for any panel where two chart series or status colours become visually identical — that's the specific fix to prioritise.

Choosing a palette from scratch: generate options in the Color Palette Generator, import the result here, and cycle through Deuteranomaly and Protanomaly — the two most common types — before committing to a final set.

Explaining an issue to a stakeholder: the side-by-side Demo Scene or the slider view communicates a colour-only signalling problem far faster than describing it in a written report — download the comparison and drop it straight into a design review deck.

Auditing an existing chart library or design system: test the default series palette against Deuteranomaly and Protanopia first, since together they cover the large majority of real-world colour vision deficiency cases.

Nothing Leaves Your Browser

Every simulation — for the demo scene and for an uploaded image alike — runs locally using the Canvas API. Images are never uploaded to a server, there's no processing delay waiting on a network round-trip, and any scenario you choose to save stays in your own browser's local storage rather than an account somewhere else.

Getting the Most Out of a Colour Blindness Check

• Check Deuteranomaly and Protanopia first. Together they cover the large majority of real cases — if a design holds up against those two, it's already solved most of the problem.
• Never rely on colour as the only signal. Toggle "Show text labels" and "Show icons" in the Demo Scene to see how a small text or icon addition fixes what colour alone can't.
• Test charts with more than 3 series especially carefully. The more colours competing in a small legend, the more likely two of them collapse into the same shade for a colour-blind viewer.
• Use the grid for a first pass, the slider for a deep look. Scan all 9 types quickly first, then switch to the slider to study the specific type that looked worst.
• Re-check after any palette change. A colour swap that looks like a small refinement can shift which types are affected — it's worth a quick re-test, not just a visual gut check.
• Pair this with a contrast check. Colour blindness safety and WCAG contrast are different tests — run both using the Color Contrast Checker for a fuller picture.

When Something Looks Off

The simulated image looks almost identical to the original. This can genuinely happen — not every colour combination is affected by every type. Try Deuteranomaly and Protanopia specifically, the two most likely to show a visible difference for most palettes.

My uploaded image looks slightly soft or lower resolution. Large images are automatically scaled down before processing to keep the simulation fast and reliable — this doesn't affect the accuracy of the colour transformation, only the pixel sharpness of the preview.

The grid view took a moment to appear. Rendering all 9 simulations at once is more work than a single slider comparison; it typically completes in under a second even on a large image, but very large source photos may take slightly longer the first time.

My saved scenario loaded with different colours than expected. Saved scenarios store the exact palette and type at save time — if you changed the palette afterward without saving again, the older saved version is what gets restored.

Where This Tool Stops

Don't treat it as a medical or diagnostic tool — it simulates population-level colour vision deficiency patterns using published approximation matrices, not any individual person's exact vision.

Don't use it as your only accessibility check — pair it with the Color Contrast Checker for luminance-based contrast, since a design can pass one check and still fail the other.

Don't expect the "anomaly" types (Protanomaly, Deuteranomaly, Tritanomaly, Achromatomaly) to be pixel-precise — real anomalous trichromacy varies continuously in severity between individuals; this tool shows a reasonable mid-severity approximation, not an exact match for any one person.

Frequently Asked Questions