Skip to main content
AllDevToolsHub
👁️

Color Blindness Simulator

100% Local

Simulate 8 types of color vision deficiency on any image or color palette.

Color Blindness Simulator
Normal Vision: Full color perception

Normal Vision

Normal Vision

Upload a design to see how it looks

WCAG Tip: Don't rely on color alone to convey information. Use shapes, patterns, and labels as supplementary indicators to ensure accessibility for color-blind users.
Try:
This tool runs entirely in your browser. Your input is never uploaded, logged, or sent to AllDevToolsHub or anyone else, and it keeps working offline once the page has loaded.

Upload an image or enter a color to simulate how it appears with protanopia, deuteranopia, or tritanopia.

Overview

What is Color Blindness Simulator?

Simulate 8 types of color vision deficiency including Protanopia, Deuteranopia, and Tritanopia. Apply transforms to images and view side-by-side previews.
FAQ

Frequently Asked Questions

Reference

Technical Deep Dive

DESIGN TOOLS

Color Blindness Simulator

Simulate how your designs look to users with 8 types of color vision deficiency: Protanopia, Deuteranopia, Tritanopia, Achromatopsia, and their anomalous variants. Apply color transformation matrices to an uploaded image and view a side-by-side comparison. Also shows a live color palette preview for each vision type. Includes prevalence data and WCAG accessibility tips.

🎨

Pixel-Precise Output

Generates CSS, tokens, or assets that match what your design system expects.

👀

Live Visual Preview

See changes the moment you make them, no copy-paste cycle between tool and IDE.

📋

Copy-Paste Ready

Output is formatted for direct use in stylesheets, Tailwind configs, or Figma tokens.

01 Color Vision Deficiency (CVD) Matrix

Type Cone Deficiency Prevalence (M/F) Core Visual Impact
DeuteranopiaMedium (Green)1% / 0.01%Red/Green collapse
ProtanopiaLong (Red)1% / 0.02%Red dimming / collapse
TritanopiaShort (Blue)< 0.01%Blue/Yellow collapse
AchromatopsiaAll Cones< 0.001%Total grayscale vision

02 Simulation Logic Pipeline

1
sRGB to LMS Decoupling The input image is gamma-decoded into linear RGB and projected into the Long-Medium-Short (LMS) cone-response space.
2
Dichromacy Transformation A 3x3 transformation matrix is applied to the LMS coordinates to simulate specific cone-type absence or sensitivity shifts.
3
Visual Reconstruction The transformed LMS values are converted back to linear RGB, gamma-encoded, and rendered to the browser canvas for comparison.

You Might Also Need