How to use the Color Blindness Simulator
- Drop an image, click to choose one, or paste a screenshot with Ctrl+V.
- Compare the original with the simulated versions for each type of colour vision deficiency.
- Look for information that disappears — red/green status colours, chart series, error states.
- Switch to Palette to test brand or chart colours and get warnings for pairs that become indistinguishable.
What is colour blindness?
Colour vision deficiency (CVD) affects roughly 1 in 12 men and 1 in 200 women of Northern European descent. Most people with CVD see colours — just a narrower range. The common types are:
| Type | Affected cones | Effect |
|---|---|---|
| Deuteranomaly / deuteranopia | Green (M) | Red and green are hard to tell apart — the most common form |
| Protanomaly / protanopia | Red (L) | Reds look darker and merge with greens and browns |
| Tritanomaly / tritanopia | Blue (S) | Blue/green and yellow/pink confusions — rare |
| Achromatopsia | All | No colour perception — very rare, but a useful greyscale test |
“-anopia” means the cone type is missing; “-anomaly” means it is shifted, a milder form.
How the simulation works
Each pixel is converted to linear RGB and multiplied by the colour-vision matrices from Machado, Oliveira and Fernandes (2009), a widely used physiological model — full severity for the “-anopia” types and 60% severity for the “-anomaly” types. Achromatopsia uses relative luminance. Everything runs on a canvas in your browser; large images are scaled to 900px wide for speed.
Designing for colour-blind users
- Never rely on colour alone (WCAG 1.4.1): add icons, labels, patterns or text to status messages, form errors and chart series.
- Vary lightness, not just hue: a dark green and a light red stay distinguishable for almost everyone. The OKLCH converter makes lightness easy to control.
- Use colour-blind-safe chart palettes such as blue/orange instead of red/green.
- Keep text contrast high — check pairs with the Contrast Checker.
Simulations approximate an average experience; individual perception varies, so testing with real users is still valuable.
Tools that pair well with the Color Blindness Simulator
- Color Converter — Paste any CSS colour — HEX, rgb(), hsl(), hwb(), oklch() or a name like tomato — and get every other format instantly, plus a ready-to-use 50–950 palette.
- Tailwind Color Generator — Paste one brand colour and get a balanced 11-step shade scale (50 to 950) built in OKLCH — with contrast hints and exports for Tailwind v3, v4, CSS and SCSS.
- Image Compressor — Shrink photos and graphics by 50–90% without visible quality loss.
- HEX to RGBA Converter — Paste a HEX code, drag the opacity slider and copy the exact CSS you need — legacy rgba(), modern rgb( / alpha) or 8-digit HEX.