Color Blindness Simulator
This free color blindness simulator lets you preview any color palette, screenshot, or interface the way people with color vision deficiencies see it — including protanopia, deuteranopia, tritanopia, their milder anomaly forms, and full achromatopsia. Upload an image for a side-by-side comparison and spot accessibility problems in seconds. Everything runs entirely in your browser, so your images never leave your device — no uploads to a server, no signup, completely private.
A severity of 1 means full protanopia / deuteranopia / tritanopia.
Status update
Success — your changes were saved.
Status update
Success — your changes were saved.
Drop an image or pick a test pattern — processing stays on your device.
Simulations are approximations for design review — individual perception varies. Methods include Brettel / Viénot / Machado and legacy Coblis-style filters. Not a medical diagnosis tool.
How to use the color blindness simulator
- Upload an image. Drag and drop a screenshot, mockup, chart, or photo onto the drop zone, or click to browse and select a file. The image is processed locally in your browser and is never sent anywhere.
- Pick a deficiency type. Choose protanopia, deuteranopia, tritanopia, one of the milder anomaly forms, or achromatopsia to see how your colors shift for that type of vision.
- Compare side by side. View your original next to the simulated version so you can immediately tell which elements lose their distinction.
- Look for problem areas. Watch for colors that merge together — red and green labels, status indicators, chart series, or links that only differ from body text by hue.
- Cycle through the types. Switch between deficiencies to confirm your design holds up across the most common forms of color blindness, not just one.
- Fix and re-check. Add labels, icons, or patterns, boost contrast, then re-run the color blindness simulator to verify the issue is resolved.
What is color blindness?
Color blindness, more accurately called color vision deficiency (CVD), is a reduced ability to tell certain colors apart. It usually comes from the cone cells in the retina responding to light differently than usual, most often because of an inherited change on the X chromosome. People with CVD are rarely “blind” to color in the everyday sense — instead, specific ranges of color look muted, similar, or hard to separate.
It is far more common than many designers assume. Roughly 1 in 12 men (about 8%) and 1 in 200 women (about 0.5%) have some form of color vision deficiency. On a typical website or app, that means a meaningful share of your audience may not perceive your color cues the way you intended — which is exactly what a color blindness simulator helps you catch before launch.
The main types of color blindness
Most color vision deficiency falls into red-green types, which are by far the most common, plus the much rarer blue-yellow and total forms. The “-anopia” suffix means a cone type is essentially absent, while “-anomaly” means it is present but shifted, producing a milder effect.
| Type | Category | What it affects | Rough prevalence |
|---|---|---|---|
| Protanopia / Protanomaly | Red-green | Reds appear darker and can blend with greens and browns; reduced sensitivity to red light | ~1% of men (protanopia); protanomaly similar |
| Deuteranopia / Deuteranomaly | Red-green | Greens and reds are hard to separate; deuteranomaly is the single most common form | Deuteranomaly ~5% of men; deuteranopia ~1% |
| Tritanopia / Tritanomaly | Blue-yellow | Blues and greens, and yellows and pinks/reds, become confusable | Rare — well under 1%, affects men and women about equally |
| Achromatopsia | Total | Little or no color perception; the world is seen largely in shades of gray | Very rare — roughly 1 in 30,000 |
Why designers should check for color blindness
When color carries meaning on its own — a green “success” badge versus a red “error” badge, a multi-colored line chart, or required form fields marked only in red — anyone with a color vision deficiency may miss that information entirely. This is an accessibility issue, not an edge case, given how common red-green deficiency is.
The core principle is simple: don’t rely on color alone to convey information. This is formalized in the Web Content Accessibility Guidelines as success criterion WCAG 1.4.1 Use of Color (Level A), which requires that color is never the only visual means of conveying information, indicating an action, or distinguishing an element. Running designs through a color blindness simulator is one of the fastest ways to find places where you have accidentally broken that rule.
Practical fixes for accessible color
Most color-accessibility problems have quick, low-cost fixes that improve clarity for everyone, not just users with CVD:
- Add a second cue. Pair color with a text label, icon, pattern, or shape — for example, a checkmark on success and an exclamation icon on errors, or different line styles and direct labels on chart series.
- Increase contrast. Strong light-versus-dark contrast survives almost every type of color blindness. Check foreground and background pairs against the WCAG contrast ratios.
- Choose safer color pairings. Avoid red/green and blue/purple side by side as the only differentiator. Combinations that differ clearly in brightness — such as blue and orange — hold up far better.
- Don’t depend on hue in small elements. Tiny dots, thin lines, and small status icons are the hardest to read; give them labels or distinct shapes.
- Test early and often. Simulate your key screens during design, not after release, so fixes are cheap.
Simulator vs. color blindness test: which is which?
It is easy to confuse the two, but they answer opposite questions. A color blindness test — like the Ishihara plates you may remember from school — checks your vision, asking you to read numbers hidden in dotted patterns to detect whether you have a deficiency and roughly which type. A color blindness simulator assumes nothing about your eyesight; it transforms an image to show how it would look to someone else who has a deficiency. This tool is a simulator: it is built for designers checking their work, not for diagnosing your own color vision. If you want a diagnosis, an Ishihara-style screening online can give a hint, but only an eye-care professional can confirm the type and severity.
Under the hood, the simulation does not just tint the picture. Each pixel’s sRGB value is linearized and converted into the eye’s LMS cone response (long, medium, and short wavelengths). The math then collapses or shifts the missing cone’s contribution to approximate dichromatic vision before converting back to a displayable color. Because real cone response varies from person to person, every simulator is an informed approximation rather than an exact match — useful for catching problems, not for clinical precision.
Color-blind-safe palettes you can design with
The fastest way to pass a simulator check is to start from colors already proven to stay distinct across deficiency types. The Okabe-Ito palette (also called the Wong palette after its 2011 Nature Methods write-up) is the most widely cited option: eight colors chosen to remain separable for protanopia, deuteranopia, and tritanopia, and to survive grayscale printing because they span a wide range of brightness.
| Name | HEX | Good for |
|---|---|---|
| Black | #000000 | Baseline / text |
| Orange | #E69F00 | Warm accent |
| Sky Blue | #56B4E9 | Cool accent |
| Bluish Green | #009E73 | Success states |
| Yellow | #F0E442 | Highlights |
| Blue | #0072B2 | Primary series |
| Vermillion | #D55E00 | Warnings / errors |
| Reddish Purple | #CC79A7 | Secondary series |
You don’t have to use all eight — pick the subset your design needs and confirm the result here.
Frequently asked questions
What is a color blindness simulator?
A color blindness simulator transforms an image or color palette to approximate how it looks to someone with a color vision deficiency. It applies a color transformation for each deficiency type so you can compare the original and simulated versions and find elements that lose their distinction.
What types of color blindness can it simulate?
This tool covers the common red-green forms (protanopia and protanomaly, deuteranopia and deuteranomaly), the rarer blue-yellow forms (tritanopia and tritanomaly), and achromatopsia, which is near-total color blindness seen mostly as grayscale.
How common is color blindness?
About 1 in 12 men (roughly 8%) and about 1 in 200 women (roughly 0.5%) have some form of color vision deficiency. Red-green types are by far the most common, while blue-yellow and total color blindness are much rarer.
Can color blindness be cured?
Inherited color vision deficiency is a lifelong condition and cannot currently be cured. Special tinted glasses or filters can help some people distinguish certain colors more easily, but they do not restore normal color vision. This makes designing inclusively the responsibility of creators, not users.
How do I design for color blindness?
Never rely on color alone. Combine color with labels, icons, patterns, or position, keep strong light-dark contrast, and pick color pairs that differ in brightness as well as hue. Then verify your screens with a simulator like this one and against WCAG 1.4.1.
What colors should I avoid?
Be careful using red and green together as the only signal, since red-green deficiency is the most common form. Also watch blue/purple and green/brown pairings. Pairs that contrast in lightness — like dark blue and orange — are safer and more universally readable.
Does the simulator work on my own images?
Yes. Upload any screenshot, mockup, chart, photo, or palette and the tool simulates each deficiency type on it, showing a side-by-side comparison so you can evaluate your real designs rather than generic samples.
Is it free and private?
Completely. The color blindness simulator is free with no signup, and it runs entirely in your browser. Your images are processed on your own device and are never uploaded to any server, so your work stays private.
Is this a color blindness test?
No. This is a simulator: it shows how your images look to people with a color vision deficiency. It does not test or diagnose your own eyesight. For that, use an Ishihara-style screening online for a rough hint, or see an eye-care professional for a confirmed result.
What is the Okabe-Ito color-blind-safe palette?
It is a set of eight qualitative colors designed to stay distinguishable across the common forms of color blindness and even in grayscale. Recommended by Nature journals for scientific figures, it is a reliable starting point for charts, status colors, and category coding.
What’s the difference between protanopia and protanomaly?
Both are red-green deficiencies involving the red (L) cone. In protanopia the cone is essentially absent, giving a stronger effect, while in protanomaly it is present but shifted, producing a milder version. The same “-anopia” versus “-anomaly” distinction applies to the green and blue cone types.
Related design tools & guides
- Contrast Checker — test foreground and background pairs against WCAG contrast ratios.
- Color Picker — sample, convert, and copy colors in HEX, RGB, and HSL.
- Color Wheel — build harmonious palettes from complementary and analogous schemes.
- All design tools — browse the full collection of free, browser-based tools.