Color Blindness Simulator

How to use

1. Upload Image — Drop in a UI mockup, chart, infographic, or any visual asset.
2. Compare Versions — See how your image looks under five different vision types side by side.
3. Iterate — If a chart loses meaning, switch palette, add patterns, or label data directly.

The Color Blindness Simulator previews how an image, mockup, or chart appears to people with the four most common vision types — protanopia, deuteranopia, tritanopia, and achromatopsia. Use it to verify infographics, dashboards, and brand colours communicate to everyone.

Features

• Five simulations side by side (including normal).
• Industry-standard transformation matrices.
• Up to 800px width preview for fast browsing.
• Pure browser canvas — no upload, no analytics.

Frequently asked questions

Are the simulations medically accurate?

They use widely cited transformation matrices (Brettel et al., Machado et al.) that approximate dichromatic vision well, but they are not a substitute for testing with affected users.

Why does my chart look ambiguous?

If two categories collapse into the same colour, the chart relies entirely on hue. Re-encode the categories with patterns, line styles, or direct labels.

Is my image uploaded?

No — the canvas processes everything locally. Nothing is sent to a server.

Which vision type is most common?

Deuteranopia (green deficient) affects roughly 6% of men of European descent and is the most common variety.

Related free tools

• Color Converter — Convert between HEX, RGB, and HSL color formats.
• CSS Gradient Generator — Create linear and radial CSS gradients with live preview.
• Box Shadow Generator — Design CSS box shadows with a visual editor.
• Border Radius Previewer — Preview and generate CSS border-radius values.
• Text Shadow Generator — Design CSS text shadows with a visual editor and live preview.
• Placeholder Image Generator — Generate placeholder images with custom size, color, and text.
• Color Palette Generator — Generate harmonious color palettes from any base color.
• Color Contrast Checker — Check WCAG 2.1 contrast ratio with AA / AAA pass marks for normal text, large text, and UI components.
• CSS Clamp Generator — Build fluid clamp() expressions for responsive typography and spacing — no media queries needed.
• Pixel to REM Converter — Live two-way px ↔ rem conversion with custom root font-size. Built for accessible, user-respecting design.
• CSS Unit Converter — Convert any CSS length unit to all others with customizable base font-size and viewport dimensions.
• CSS Triangle Generator — Generate pure-CSS triangles for tooltips, arrows, and speech bubbles. 8 directions, any size or color.