Color Blindness Simulator
Color
Drop a screenshot of a chart, dashboard, or design and switch between 8 simulated views: normal, three full-color blindness types (protanopia, deuteranopia, tritanopia), three partial color-weakness types (protanomaly, deuteranomaly, tritanomaly), and full monochrome (achromatopsia). Each is rendered by applying the corresponding linear transform per pixel via Canvas — fast, fully offline. Useful for sanity-checking charts and palettes before shipping.
Vision type
About the simulation
Color blindness simulation uses linear RGB transforms (Brettel/Viénot-style matrices). It's an approximation of how the image might appear, not a clinical replica. Always validate critical accessibility decisions with real users or formal contrast tooling like WCAG checkers.
How to use
- Drop a screenshot of a chart, palette, or design.
- Click each chip to see the image rendered for that vision type.
- Download a copy of the current simulation to share with the team.
Frequently asked questions
- Are these scientifically accurate?
- They're approximations based on widely-cited linear RGB transforms (Brettel / Viénot / Mollon style). Real human vision varies; treat the previews as 'how this might look', not exact.
- Which types affect the most people?
- Deuteranomaly (mild green weakness) is by far the most common — about 5% of men. Protanomaly and protan/deutan dichromacy together account for most CVD.
- What's achromatopsia?
- Complete color blindness — the world is seen in shades of gray. Very rare, but a good worst-case check: if the design still works in pure grayscale, it'll work for everyone.
- Why is my image uploaded?
- It isn't — the simulation runs locally with Canvas. The image and the matrices both stay in your browser.
Related tools
Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.