Color Blindness Simulator
See how colors appear under different types of color vision deficiency.
Palette
Add colors to compare simulations side-by-side.
Image Simulation
Upload an image to simulate a deficiency on it.
Simulation Grid
Each row shows how the palette looks for a given deficiency.
| Deficiency | Color 1 | Color 2 | Color 3 |
|---|---|---|---|
| Protanopia | |||
| Deuteranopia | |||
| Tritanopia | |||
| Protanomaly | |||
| Deuteranomaly | |||
| Tritanomaly | |||
| Achromatopsia | |||
| Achromatomaly |
Examples
Red/green error vs. success
Palette: [#ff0000, #00ff00, #1a73e8]The deuteranopia row makes the red and green status swatches substantially more similar.A common accessibility failure: red and green traffic-light indicators collapse into similar yellows under deuteranopia, so users cannot tell success from error by color alone.
Form-field validation states
Palette: [#d93025, #1e8e3e, #f9ab00]The protanopia row reveals reduced separation between the error, warning, and success colors.Form validation cues need an extra non-color signal (icon, pattern, or label) because the red/green/yellow set becomes hard to separate under protanopia.
About this tool
The Color Blindness Simulator renders any palette — or an uploaded image — under eight color-vision-deficiency (CVD) simulations: protanopia, deuteranopia, tritanopia, their three anomaly variants, achromatopsia, and achromatomaly. It applies a fixed 3×3 transformation matrix to each sRGB pixel, so the result is a practical approximation rather than a clinical prediction of any one person's vision.
Each transformation is a 3×3 matrix multiply per pixel, so the simulation runs entirely in your browser. The image is loaded with URL.createObjectURL and read from an offscreen <canvas> — it never leaves your device. Use the grid to confirm critical UI distinctions (error vs. success, link vs. text) still hold when red-green or blue-yellow channels collapse.
How to use
Build a palette
Start with the default red / green / blue swatches, or click Add Color to drop in the brand colors you want to test. Use the trash icon to remove a swatch.
Read the simulation grid
The table below shows every input color rendered under each of the 8 deficiency types. Where two source colors collapse into visually identical cells, switch to a more distinguishable palette.
Upload and simulate an image (optional)
Drop in a screenshot, logo, or chart. Click any deficiency button to draw the simulated version onto the canvas — pixels are processed locally.
Iterate on the palette
Tweak the palette and re-check the grid until color-coded information (status, errors, links) stays distinguishable across all rows.
Use cases
Validating dashboard status colors
Test the red/green/yellow palettes used for KPIs, alerts and traffic lights so the distinction survives deuteranopia and protanopia.
Designing accessible charts and maps
Check heatmaps, choropleth maps, and stacked charts where color is the only encoding, before publishing.
Auditing marketing assets
Upload a hero banner, social card, or email header and simulate it for the most prevalent deficiencies (~8% of men have red-green CVD) before launch.
Common mistakes
Mistake:Relying on color alone to convey meaning.
Fix:Pair color with an icon, label, or pattern. Always add a non-color cue for errors, success, and required fields.
Mistake:Assuming 'red and green' is the only issue.
Fix:Blue/yellow distinctions collapse under tritanopia (~1 in 30,000). Check the tritanopia row, not just the red-green rows.
Mistake:Skipping the achromatopsia check.
Fix:Complete color blindness users effectively see grayscale. Ensure your UI works with luminance alone — the achromatopsia row is the cheapest way to test this.
Frequently asked questions
References & standards
Related tools
Box Shadow Generator
Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.
Color Contrast Checker
Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.
Color Converter
Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing
Color Extractor
Extract colors from uploaded images by hovering over pixels to get precise color values.
Color Generator
Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.
Color Mixer
Blend two colors together by any ratio. See intermediate steps and copy the result in HEX, RGB, or HSL.