Colour Blindness Simulator Online Free Tool
Colour Blindness Simulator 8 types of colour vision deficiency (protanopia/deuteranopia/tritanopia + anomaly + achromatopsia) with severity slider. Free, client-side.
Pick a colour and see how it appears across all 8 colour-vision deficiency types — with a severity slider for partial (-omaly) variants.
9 vision simulations
The severity slider only affects the four -omaly (partial) variants. The full dichromacy variants (-opia) and achromatopsia use their canonical matrices.
How to Use Colour Blindness Simulator Online Free Tool
- Pick a colour with the picker, or type a hex like
#4f46e5(or the shorthand#f00) into the text field. Both stay in sync. - Dial the severity slider to choose how strong the anomaly variants should be. 0% makes the
-omalyswatches identical to normal vision; 100% makes them identical to the full dichromacy. 50% is typical for moderate cases. - Read the nine swatches: normal vision plus Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, Achromatopsia, and Achromatomaly - the exact eight types the FAQ promises.
- Check the luminance-correct labels: each swatch's label colour flips between black and white so it stays readable on the simulated colour.
- Press
Ctrl+Enter(⌘+Enteron Mac) to force a re-simulation after a paste. - Press Reset to go back to the default purple and a 50% severity.
- Copy the report or Download a timestamped `.txt` with the full table - label, description, hex, RGB, and relative luminance for each of the nine entries.
Frequently asked questions
Is this tool free?
Yes, completely free. No registration, no limits, no hidden fees.
Is my data secure?
Yes. All colour maths happens in your browser – no data is sent anywhere. The computation is nine 3×3 matrix multiplications per update.
What is colour blindness?
Colour blindness (colour vision deficiency, CVD) is when someone cannot distinguish certain colours. Red-green CVD is the most common – about 8% of men and 0.5% of women have some form of it.
What types does this simulate?
All eight: Protanopia (red-blind) and Protanomaly (red-weak), Deuteranopia (green-blind) and Deuteranomaly (green-weak), Tritanopia (blue-blind) and Tritanomaly (blue-weak), plus Achromatopsia (total) and Achromatomaly (partial). The four -omaly variants use a severity slider that blends between normal vision and full dichromacy.
Is the simulation accurate?
It uses the widely-cited Machado/Viénot dichromacy matrices and linearly interpolates to the identity matrix for the anomaly variants. Good enough for design review and accessibility audits; not a medical diagnostic tool.
Why should designers care?
Roughly 1 in 12 men and 1 in 200 women have CVD. Charts that rely on red-green contrast alone, tiny coloured status dots, and stylised error/success icons with no shape difference all fail badly. A two-minute check with this tool usually reveals one or two fixable problems per design.
What’s the difference between protanopia and deuteranopia?
Both are red-green CVD. Protanopia is missing L-cones (red), so reds look dark and greenish. Deuteranopia is missing M-cones (green), so greens look desaturated. The two result in different luminance shifts even for the same hue, which is why both are shown separately.
What does the severity slider actually do?
For the four -omaly variants it linearly blends the 3×3 identity matrix with the matching dichromacy matrix. Severity 0% → no change; severity 100% → same as the full -opia variant. The full dichromacy swatches ignore the slider.
Can this diagnose colour blindness?
No. It’s a designer’s simulation, not a medical test. For a diagnosis, use an Ishihara plate test or see an optometrist.
How do I make designs colour-blind friendly?
Use high contrast, add shape or text cues alongside colour, avoid red-green-only distinctions, include icons or labels in addition to hue, and run finished designs through this simulator. WCAG 2.2 is a good baseline.