This tool shows how a colour appears to people with the most common colour vision deficiencies — protanopia, deuteranopia, tritanopia and full achromatopsia. Enter a colour and compare side by side how it looks to typical vision versus each deficiency, so you can check whether a palette stays distinguishable for colour-blind users.
How it works
The simulator uses the Machado et al. (2009) sRGB transformation matrices at full severity — the de-facto standard, also used by Chrome DevTools. For each deficiency it runs this pipeline: the input colour is gamma-decoded from sRGB to linear RGB, multiplied by that deficiency’s 3×3 matrix to remap the channels as the missing cone type would, then gamma-encoded back to sRGB. Achromatopsia instead collapses the colour to its luminance, producing grey.
| Type | Affected cones | Confusion |
|---|---|---|
| Protanopia | red | red-green |
| Deuteranopia | green | red-green |
| Tritanopia | blue | blue-yellow |
| Achromatopsia | all | none (greyscale) |
How common is colour blindness?
Colour vision deficiency is far more prevalent than most designers realise. Red-green deficiency (protanopia and deuteranopia together) affects approximately 8% of males and about 0.5% of females of Northern European descent, with varying prevalence across other populations. Tritanopia is much rarer, and total achromatopsia is rarer still. In practice, for every 100 visitors to a website, roughly 4–8 will have some degree of red-green colour vision deficiency.
Practical design guidance
The most common failure mode is using red and green as the only distinguishing signal — for example, a traffic-light status system where red means error and green means success. To a protanope or deuteranope, both can appear as a similar dull brownish-yellow.
Fixes that work:
- Add a second signal alongside colour — an icon (✓ / ✗), a pattern, a label, or position.
- Adjust hue and lightness, not just hue alone — making the safe state lighter and the danger state darker creates a luminance difference that persists under most deficiencies.
- Test with this tool — check that any two colours you use together remain distinguishable in all four simulated views, not just typical vision.
The WCAG 2.1 guideline 1.4.1 (Use of Color) requires that colour is not the only visual means of conveying information. Passing this check means your interface works for colour-blind users and also for greyscale prints and low-contrast conditions.
Example
A pure red (#ff0000) appears as a dull yellow-brown under protanopia and deuteranopia, because the red signal is remapped without a red cone, and as mid-grey under achromatopsia. This is why red-on-green warning systems fail for a significant share of users. All processing happens locally in your browser; nothing is uploaded.