Color Blindness Simulator
See your images through the eyes of people with color blindness. Test 8 vision types with canvas pixel transforms. Free accessibility checker.
Click or drag an image here
JPG, PNG, WebP — processed client-side
How to use Color Blindness Simulator
Simulate how your design or image looks to users with different types of color vision deficiency — deuteranopia, protanopia, tritanopia, and monochromacy. Upload an image or enter a URL to preview it through each simulation filter. Helps identify color combinations that are indistinguishable to color-blind users before they reach production.
- Upload an image (PNG, JPG, or WebP) or take a screenshot of your design.
- Select a color vision deficiency type to simulate.
- Compare the original and simulated views side by side.
- Identify any UI elements (charts, status indicators, buttons) that rely solely on color.
- Add text labels, patterns, or icons to supplement color-only distinctions.
Your data never leaves your device — 100% private processing.
Types of color vision deficiency
Deuteranopia (green-blind) and protanopia (red-blind) together affect approximately 8% of males and 0.5% of females of Northern European ancestry — these are the most important to design for. Both cause red and green to appear very similar (olive/brown tones). Tritanopia (blue-blind) is much rarer, affecting fewer than 1 in 10,000 people, and causes confusion between blue and yellow. Achromatopsia (total color blindness / monochromacy) is extremely rare — less than 1 in 33,000 — but designing for it produces highly accessible monochrome-friendly interfaces.
| Type | Missing cone | Affected population | Colors confused |
|---|---|---|---|
| Protanopia | Red (L) | ~1% males | Red and green |
| Deuteranopia | Green (M) | ~6% males | Red and green |
| Tritanopia | Blue (S) | <0.01% | Blue and yellow |
| Achromatopsia | All cones | <0.003% | All colors |
Designing for color accessibility
Never use color as the sole means of conveying information — always supplement with text labels, icons, patterns, or shape differences. Common failures: red/green traffic-light status indicators, pie/bar charts differentiated only by color, form validation that turns only the border red. Solutions: add a text label ("Error", "Success"), use distinct icons (✓ ✗), increase the lightness contrast between the colors (not just hue), and add a pattern or texture fill to chart segments. Test with the deuteranopia simulation first — it's the most prevalent and the most challenging.
Glossary
- Deuteranopia
- A color vision deficiency caused by absent or non-functional green-sensitive (M) cone cells — most common type.
- Protanopia
- Absence of red-sensitive (L) cones, causing red and green to appear similar.
- Tritanopia
- Absence of blue-sensitive (S) cones, affecting blue-yellow discrimination — very rare.
- Color-blind safe palette
- A set of colors chosen to remain distinguishable under the most common forms of color vision deficiency.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use Color Blindness Simulator?
- Converts between HEX, RGB, HSL, HSV, and CMYK instantly
- Accessibility contrast checker built in
- Generates harmonious palette variations from a single colour
- Export-ready CSS variables and design tokens
Common use cases
- Pick brand colours that meet WCAG accessibility standards
- Generate a complementary palette from a logo colour
- Convert Figma HEX codes to CSS rgb() for developers
- Create a gradient from two brand colours
- Verify sufficient contrast for text on coloured backgrounds
Related Color & Design
Color Contrast Checker
Check color contrast ratio for WCAG AA and AAA accessibility compliance. See if your text and background colors meet accessibility standards.
Color Picker & Converter
Pick a color and instantly convert between HEX, RGB, HSL, HSB, and CMYK. Generate tints, shades, and color palettes.
Color Palette Generator
Generate beautiful harmonious color palettes online. Choose from complementary, analogous, triadic, and monochromatic schemes. Free color scheme creator.
CSS Gradient Generator
Create beautiful CSS linear, radial, and conic gradients online. Get the CSS code instantly with a live preview.
Color Converter
Convert colors between HEX, RGB, HSL, HSV, and CMYK formats instantly. Paste any color format and get all others with one click.
Image Color Extractor
Extract dominant colors from any image. Upload a photo and instantly get the top colors as HEX and RGB values. Free online color palette extractor.
Explore all Color & Design.