Color Blindness Simulator
See how colors appear to people with color vision deficiency
Simulation Results
Protanopia
No red cones - reds appear dark, red-green confusion
Original
Simulated
Per-color breakdown
Shift: 180 (significant)
Shift: 152 (significant)
Shift: 81 (significant)
About Color Vision Deficiency
Protanomaly
(L-cones (red))Reduced red cone sensitivity - weakened red perception
Affects: ~1% of males, 0.01% of females
Protanopia
(L-cones (red))No red cones - reds appear dark, red-green confusion
Affects: ~1.01% of males, 0.02% of females
Deuteranomaly
(M-cones (green))Reduced green cone sensitivity - most common CVD type
Affects: ~5% of males, 0.35% of females
Deuteranopia
(M-cones (green))No green cones - greens appear beige, red-green confusion
Affects: ~1.27% of males, 0.01% of females
Tritanomaly
(S-cones (blue))Reduced blue cone sensitivity - weakened blue-yellow distinction
Affects: ~0.01% of population
Tritanopia
(S-cones (blue))No blue cones - blues appear greenish, yellow-blue confusion
Affects: ~0.003% of population
Achromatopsia
(All cones)Total color blindness - sees only shades of gray
Affects: ~0.003% of population
Was this tool helpful?
What is Color Blindness Simulator?
Free online color blindness simulator to visualize how your color palettes and images look to people with different types of color vision deficiency (CVD).
This free online simulator supports protanopia (red-blind), deuteranopia (green-blind), tritanopia (blue-blind), and achromatopsia (total color blindness). Use the Color Palette mode to test hex colors side by side, or upload an image in Image mode to see pixel-accurate simulations powered by the Canvas API. All processing runs entirely in your browser -- your images and colors never leave your device. No signup required.
How to Use Color Blindness Simulator
- 1Choose between Color Palette mode or Image mode using the tabs at the top
- 2In Color Palette mode, add hex colors using the color picker or text input to build your palette
- 3In Image mode, upload an image by clicking the upload area or dragging and dropping a file
- 4View the simulated results across all color vision deficiency types displayed in a grid
- 5Use the results to identify problematic color combinations and improve your design's accessibility
Frequently Asked Questions
Related Tools
Color Contrast Checker
Free online color contrast checker - check WCAG color contrast ratios for accessibility compliance
Glassmorphism Generator
Free online glassmorphism generator - create glass-effect CSS styles with blur and transparency
Color Shade Generator
Free online color shade generator - generate light and dark shades of any color for design systems
Color Palette Generator
Free online color palette generator - generate beautiful color palettes from any base color
Placeholder Image Generator
Free online placeholder image generator - generate customizable placeholder images for your designs and prototypes
Neumorphism Generator
Free online neumorphism generator - generate soft UI neumorphic CSS styles