Color Blindness Simulator
Around 8% of men and 0.5% of women have some form of colour vision deficiency, most commonly red-green. Drop in a design, screenshot or illustration, choose one simulation mode, and compare the original with the simulated result side by side. Useful for checking whether a chart, map or UI remains readable when you’re not relying on colour alone.
How the simulator works
-
1
Drop in an image
PNG, JPG, WebP or SVG. Processed in the browser: nothing uploaded.
-
2
Choose a simulation mode
Pick protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia or achromatomaly.
-
3
Compare side by side
The browser applies a matrix transform and shows the original next to the selected simulation.
-
4
Export the simulated image
Download the selected simulation as a PNG, or take screenshots of the comparison for design reviews.
Forms of colour vision deficiency
| Condition | Prevalence | Characteristic |
|---|---|---|
| Deuteranomaly | ~5% of men | Red-green anomaly, M-cone shifted |
| Protanomaly | ~1% of men | Red-green anomaly, L-cone shifted |
| Deuteranopia | ~1% of men | M-cone absent, red-green barely distinguishable |
| Protanopia | ~1% of men | L-cone absent, red perception shifted |
| Tritanopia | very rare | S-cone absent, blue-yellow axis collapsed |
| Tritanomaly | very rare | S-cone shifted, mild blue-yellow loss |
| Achromatopsia | extremely rare | Complete colour blindness, grayscale only |
Most designers start with deuteranopia and protanopia because red-green deficiencies are the most common, then add the anomalous and blue-yellow modes for a broader check.
Design implications
- Don’t rely on red/green alone to distinguish states. Error/success indicators need a shape, icon or text label in addition to colour. A red X and green check are perceptibly different; red and green circles are not.
- Charts: use pattern fills, direct labels, or perceptually distinct palettes (ColorBrewer, Viridis). Avoid the traffic-light palette for data visualisation.
- Maps: borders and hatching to distinguish regions; colour alone fails.
- Hyperlinks: never styled only by colour. Underlines or weight help everyone, including people with normal colour vision.
- Required form fields: a red asterisk plus “Required” label or red border plus “Required” helper text.
- Status indicators: traffic-light red/amber/green works as a reinforcement, never as the only signal.
Good palette choices for colour-safe design
- Viridis (used by default in matplotlib, D3): purple-to-yellow, perceptually uniform.
- ColorBrewer qualitative: 8 distinct hues engineered to remain distinguishable in common CVD forms.
- Okabe-Ito: 8-colour palette specifically designed for colour-blind accessibility.
Tools and testing
- Simulator previews (this tool), quick visual check.
- WCAG contrast checker, ensures text remains readable regardless of colour perception.
- Real-user testing, nothing replaces showing your design to actual colour-blind users.
Fun fact
Modern colour-vision simulators use matrix approximations of how cone responses map into RGB. Treat the preview as a practical design check, not a medical diagnosis or an exact copy of any one person’s perception.
Frequently Asked Questions
It’s a useful approximation, but real colour perception varies between individuals. Most people with a red-green deficiency sit somewhere on a mild-to-severe spectrum, so use the preview as a design signal rather than a diagnosis.
Deuteranomaly covers the largest slice of colour-blind users (~5% of men). Testing against deuteranopia (the severe form) is a conservative check, if a design works there, it also works for the milder anomaly.
Yes, though far less often (~0.5%). Red-green deficiency is X-linked recessive, so men (XY) need only one affected X; women (XX) need both. Tritanopia is autosomal and affects sexes equally.
Not directly in this tool, that’s general low-vision simulation, which also involves blur and contrast reduction. For full accessibility simulation, dedicated tools like Chrome’s Lighthouse or NoCoffee cover those.
Related Tools
Image Resizer
Resize images to pixel-exact dimensions or percentages while preserving aspect ratio. Batch-friendly, no upload.
QR Code Generator
Generate a browser-local QR code from a plain text or URL payload. Adjust size, colours and error correction, then download PNG.
Meme Generator
Add fixed top and bottom captions to a JPG, PNG, or WebP image in your browser. Set font, size, colors, and stroke, then download a PNG.
Barcode Generator
Create a 1D barcode in your browser in Code 128, EAN, UPC, ITF-14 and other supported formats. Download the rendered result as SVG or PNG.
GIF Maker
Turn a sequence of images into an animated GIF. Set frame rate, quality and dimensions before exporting.
Material Design Color Picker
Browse the Material Design color palette. Copy any shade (50 through A700) as HEX, RGB or HSL with one tap.