Color Blindness Simulator
LOCAL · Browser-OnlySee 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
What is color blindness?
What types of color blindness does this tool simulate?
How accurate are the simulations?
Is my image data safe?
How do I check if my color palette is color blind safe?
Can I test how an image looks to color blind users?
Related Tools
Wcag contrast checker
Free online color contrast checker - check WCAG color contrast ratios for accessibility compliance
Open Graph Preview
Free online open graph preview - preview how your page looks when shared on social media platforms
Check website speed
Free online website speed test - analyze page load performance metrics
Color Palette Generator
Free online color palette generator - generate beautiful color palettes from any base color
Selector specificity
Free online CSS specificity calculator - calculate and compare CSS selector specificity scores instantly
Glassmorphism Generator
Free online glassmorphism generator - create glass-effect CSS styles with blur and transparency
Check broken links
Free online broken link checker - find broken links on web pages
Color tints and shades
Free online color shade generator - generate light and dark shades of any color for design systems
Keep reading: Tailwind CSS Cheat Sheet and http headers reference. Doing this in code instead? See the utility endpoints.