Online Color Blindness Simulator: input any color to simulate how it appears under Protanopia, Deuteranopia, Tritanopia, and other color vision deficiencies. Essential for accessible design. All processing is done locally.
TL;DR: Free online color blindness simulator that renders how colors appear under protanopia, deuteranopia, tritanopia, and more. Enter any color for instant comparison. Essential for accessible design. Local processing.
For local tools, open DevTools → Network and search your input — it should not appear in requests.
Usage Guide
Designs look clearly contrasted to normal-vision eyes, but a red-green color-deficient viewer sees something different — buttons and backgrounds blur together. This tool simulates three common color-vision deficiencies (protanopia, deuteranopia, achromatopsia) by converting images or page screenshots for comparison, local processing.
1. How to use
- Upload an image (UI screenshot, chart, infographic) or enter color codes.
- Pick a simulation type: protanopia / deuteranopia / tritanopia / achromatopsia and preview the result.
- Compare original and simulated side by side — is the information still distinguishable?
2. Practical accessibility tips
- Red-green deficiency is the most common (about 8% of men) — never rely on color alone for status (green=success, red=failure); add icons or text.
- Always check data visualizations: multi-line charts distinguished only by color may overlap entirely for color-deficient viewers.
- WCAG contrast ratios (4.5:1) are the baseline, but two high-contrast colors can still confuse under deficiency — the simulator catches this.
- Simulate during brand-color design phase — an order of magnitude cheaper than fixing visuals after launch.
3. Limitations and correct usage
The simulator is an approximate model, not real deficiency experience — actual color vision is a continuum, and simplified models (e.g. assuming full L-cone absence in protanopia) are representative approximations. Use it as a design aid, not an acceptance gate: it surfaces "color-only information" designs, but final validation needs real-user testing or established accessibility standards. One more application: simulation also helps non-UI contexts — chart palettes, choropleth map color scales, game UI rarity colors.
FAQ
No. The simulation runs inside the current tab — your screenshot is read into memory for pixel processing and never lands on a server.
Protanopia, deuteranopia, tritanopia, and several other types — switch between them to compare how the same screenshot reads under each.
It shows how distinguishable your palette is to color-blind users — state conveyed by red versus green alone, chart series colors sitting too close — so you can go back and add contrast or non-color cues like icons and text labels.
No. The simulation is an approximation: it surfaces obvious problems but cannot replace usability testing with real color-vision-deficient users.
Upload the screen, flip through the simulation types, note which areas blur together, then return to the design to retune colors or add non-color cues.
Related Tools
Related Articles
How Color-Blind Users See Your Palette: A Six-Type Self-Check and Safe Colors
What does your UI look like to the 8% of men with color vision deficiency? The six types (protanopia/deuteranopia/tritanopia, both anomalies, achromatopsia), matrix-based simulation, a three-pair self-check list, and the WCAG practice of never encoding meaning in color alone.
Color Contrast Fails WCAG — How to Fix It
Design flagged as low contrast, what are WCAG AA/AAA, how to compute contrast and tune it to pass? With our color contrast checker and converter.
How to Generate a Styled QR Code with Custom Colors (No Third-Party Host)
Want colored modules and rounded finders? Aligned with this site's designer: what you can change, logo limits, PNG vs SVG export, density and contrast pitfalls.