Colour blindness simulator
Upload an image — or load the built-in sample — and see it approximated for the three main types of colour blindness, side by side with the original. Everything runs in your browser: nothing you upload ever leaves your device. Free, instant, no sign-up.
Everything happens in your browser, via the canvas element — your image is never uploaded to a server. JPG, PNG, GIF or WebP, up to 8 MB.
Original
Protanopia (red-blind)
Deuteranopia (green-blind)
Tritanopia (blue-blind)
What the three types mean
Colour blindness (more precisely, colour vision deficiency) usually means one of the eye’s three cone types responds weakly or not at all, so certain colour pairs become hard to tell apart. Roughly 1 in 12 men and 1 in 200 women worldwide have some form of it — almost always red-green.
- Protanopia — red-blind. The long-wavelength (red) cone is missing or non-functional; reds appear darker and can be confused with greens or browns.
- Deuteranopia — green-blind. The medium-wavelength (green) cone is affected; this is the most common form and shares many of the same red/green confusions as protanopia.
- Tritanopia — blue-blind. The short-wavelength (blue) cone is affected; much rarer, it confuses blue with green and yellow with violet.
How this works
Each simulation multiplies every pixel’s red, green and blue values by a fixed 3×3 matrix — the widely used Wickline/HCIRN “Color Blind Web Page Filter” set — and redraws the result on a canvas. Nothing is uploaded anywhere: the file never leaves your device, the image is decoded and processed by your own browser, and it is discarded the moment you close or reload the page.
What this is — and isn’t. This simulation approximates common types of dichromacy using a well-known mathematical model. It is a design aid, useful for spotting colour pairs that might cause trouble — it is not a medically accurate rendering of any individual’s vision, and it doesn’t cover anomalous trichromacy (partial colour weakness, more common than total colour blindness) or achromatopsia (total colour blindness). Use it alongside, not instead of, the WCAG rule it supports: 1.4.1 Use of Colour — never make colour the only way to convey information.
One image is a start. Your whole site is more.
Colour is one of dozens of things a page can get wrong for people with low vision or colour blindness. Point our free scanner at a real URL and it checks the whole page against WCAG 2.2 — including colour contrast — and tells you what to fix first, with the legal context for the site’s jurisdiction.
Also want to check colour contrast directly? Try the contrast checker, or see what our scanner covers, criterion by criterion.
Other free checkers
Colour contrast checker
Enter two colours and get a live WCAG 2.2 AA/AAA pass or fail for normal text, large text and UI — hex, RGB or HSL.
Colour converter
Enter a colour in hex, rgb() or hsl() and get all three notations at once, with contrast ratios against black and white.
Colour palette generator
Generate complementary, triadic and other harmonious palettes — every swatch shows its readable text colour, WCAG contrast ratio and AA pass/fail.