About This Color Blindness Simulator
This color blindness simulator transforms images and individual colors to show how they appear to people with color vision deficiency (CVD). Upload any image, select a condition, and the tool reproduces what someone with protanopia, deuteranomaly, tritanopia, or five other CVD types would see. All processing runs in a background thread inside your browser—no data leaves your device.
About 300 million people worldwide have some form of color blindness. Roughly 8% of men and 0.5% of women of Northern European descent are affected. Designing without testing for these conditions risks making your work unusable for a significant share of your audience.
Key Features
- Eight CVD simulation types – Protanopia, deuteranopia, tritanopia, protanomaly, deuteranomaly, tritanomaly, achromatopsia, and achromatomaly, grouped by category for quick selection.
- Adjustable severity – For anomalous trichromacy types, drag the severity slider from 0% (normal vision) to 100% (full dichromacy) to see how different degrees of deficiency affect perception.
- Four comparison views – Grid, side-by-side, slider overlay, and toggle modes let you compare the original and simulated images in the way that suits your workflow.
- Single-color mode – Enter any hex color to see how it shifts across all eight CVD types at once, useful for checking individual palette choices.
- Background processing – Simulations run in a Web Worker, so the interface stays responsive even with large images.
- Download results – Export the simulated image for presentations, documentation, or accessibility reports.
- Fully client-side – Every pixel is transformed in your browser. No images are uploaded to any server.
Types of Color Vision Deficiency
Color blindness falls into three categories based on which cone type is affected: red (protan), green (deutan), or blue (tritan). Each category has a severe form where cones are absent and a milder form where cone sensitivity is shifted.
Red-Green Color Blindness
- Protanopia – No red cones. Affects about 1.3% of men. Reds appear dark and merge with greens, browns, and blacks.
- Protanomaly – Reduced red cone sensitivity. Affects about 1.3% of men. Reds shift toward green and look muted.
- Deuteranopia – No green cones. Affects about 1.2% of men. Greens and reds become indistinguishable.
- Deuteranomaly – Reduced green cone sensitivity. The most common CVD type, affecting roughly 5% of men. Greens appear redder than they are.
Blue-Yellow Color Blindness
- Tritanopia – No blue cones. Extremely rare, affecting fewer than 0.01% of people. Blues and yellows become hard to tell apart.
- Tritanomaly – Reduced blue cone sensitivity. Also very rare. Blues appear greener; yellows appear lighter or pinkish.
Complete Color Blindness
- Achromatopsia – Total color blindness: the world appears in shades of gray. Affects roughly 1 in 33,000 people, often with light sensitivity and reduced acuity.
- Achromatomaly – Severely reduced color perception. Colors appear washed out and desaturated rather than completely absent.
How Does Color Blindness Simulation Work?
The simulator uses the Brettel, Viénot, and Mollon algorithm, a widely validated method for modeling color vision deficiency. Each pixel’s sRGB color is first converted to a linear color space called LMS, which models the response of the three human cone types (Long, Medium, Short). The LMS values are then projected onto a reduced color plane matching what a person with the specific deficiency can perceive. Finally, the modified LMS values are converted back to sRGB for display.
For anomalous trichromacy (the milder forms), the algorithm interpolates between normal vision and the full dichromacy simulation based on the severity value you set. At 0% the output matches normal vision; at 100% it matches complete cone loss.
The entire computation runs inside a Web Worker, a separate browser thread that keeps the interface responsive while processing every pixel in the image.
How to Use This Color Blindness Simulator
- Upload an image by clicking the upload area or dragging a file into it.
- Choose a color vision deficiency type from the Condition dropdown. Types are grouped into Dichromacy, Anomalous Trichromacy, and Monochromacy.
- For anomalous types, adjust the severity slider to simulate mild through severe deficiency.
- Switch between Grid, Side by Side, Slider, or Toggle view to compare the original and simulated images.
- Download the simulated result for documentation or accessibility review.
To test a single color, switch to the Single Color tab and enter a hex value. The tool displays how that color appears under all eight CVD types simultaneously.
Designing for Color Accessibility
A simulator reveals problems; fixing them requires deliberate design choices. These strategies make your work accessible to colorblind users:
- Never rely on color alone – Pair color with text labels, icons, patterns, or shapes. A red/green status indicator should also say “Error” or “Success.”
- Maintain sufficient contrast – WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Use a contrast checker to verify.
- Pick colorblind-safe palettes – Blue and orange remain distinguishable across nearly all CVD types. Avoid red/green and blue/purple pairings. A color wheel can help you explore safe combinations.
- Add texture and pattern – In charts, use distinct line styles (solid, dashed, dotted) or fill patterns alongside color.
- Test early – Run designs through a color blindness simulator before finalizing. Catching issues early prevents costly rework.
Making Data Visualizations Accessible
Charts and graphs encode meaning through color more than most UI elements, making them especially problematic for colorblind viewers.
- Label data directly – Place labels on or next to data series instead of relying on a color-coded legend.
- Use distinct markers – Circles, squares, triangles, and diamonds remain distinguishable regardless of color vision.
- Limit your palette – Fewer colors are easier to tell apart. For many categories, use sequential or diverging scales rather than qualitative ones.
- Add interactive tooltips – Hovering or tapping to see exact values reduces dependence on color for reading data.
WCAG Guidelines for Color
Two WCAG success criteria apply directly to color blindness:
- 1.4.1 Use of Color (Level A) – Color must not be the only visual means of conveying information, indicating an action, or distinguishing an element. This is the baseline requirement.
- 1.4.11 Non-text Contrast (Level AA) – UI components and meaningful graphics need a contrast ratio of at least 3:1 against adjacent colors, ensuring they stay visible to users with reduced color perception.
Frequently Asked Questions
Is my image data safe?
All processing happens locally in your browser. No image data is sent to any server or stored beyond your device. The simulation runs inside a Web Worker thread with no network access.
How accurate is the color blindness simulation?
The Brettel-Viénot-Mollon algorithm is one of the most widely validated models for simulating dichromacy. It provides a close approximation, though individual perception varies based on the exact genetic mutation and other physiological factors.
What is the severity slider for?
Anomalous trichromacy exists on a spectrum. The severity slider lets you simulate mild to severe deficiency for protanomaly, deuteranomaly, tritanomaly, and achromatomaly. At 0% you see normal vision; at 100% the result matches full dichromacy.
What image formats does the simulator support?
PNG, JPG, WEBP, SVG, and any other format your browser can render. Large images may take a moment longer since every pixel is transformed.
What is the most common type of color blindness?
Deuteranomaly (reduced green sensitivity) affects approximately 5% of males worldwide. Testing against deuteranopia and protanopia covers the majority of red-green deficiencies.
Can this tool diagnose color blindness?
No. This is a design and development tool, not a medical diagnostic. If you suspect a color vision deficiency, consult an eye care professional for an Ishihara or anomaloscope test.
Related Tools
- Contrast Checker — Verify that text and background colors meet WCAG contrast requirements.
- Color Picker — Pick and convert colors between HEX, RGB, HSL, and other formats.
- Color Wheel — Explore color harmonies and build accessible palettes.
- Image Comparison — Compare two images side by side with a slider overlay.
- Color Picker from Image — Extract colors from any image to build or audit a palette.