- Upload an Image — Click the drop zone, drag and drop, or paste from clipboard (Ctrl+V). Any image format works: PNG, JPG, GIF, WebP, etc.
- Select a Type — Choose from 8 color vision deficiency types: Protanopia (no red), Protanomaly (weak red), Deuteranopia (no green), Deuteranomaly (weak green), Tritanopia (no blue), Tritanomaly (weak blue), Achromatopsia (total), or Achromatomaly (partial).
- Adjust Severity — For anomaly types (partial deficiency), use the severity slider to control the intensity from 10% to 100%.
- Compare Views — Switch between Side by Side (original vs. simulated) and Grid View (all 8 types + original at once).
- Export — Download the simulated image as PNG, or use Export All to download all 8 types at once.
Color Blindness Simulator — Test Your Designs for Visual Accessibility
The Color Blindness Simulator is a powerful, free tool that shows how your images, designs, and UI look to people with different types of color vision deficiency. Using scientifically accurate Brettel and Viénot color transformation matrices, it simulates all 8 major types of color blindness in real-time.
Approximately 300 million people worldwide have some form of color blindness. By testing your designs with this simulator, you can ensure your color choices are accessible to everyone, improving user experiences across your entire audience.
Key Features
- 8 Color Vision Deficiency Types — Simulates all major types: Protanopia, Protanomaly, Deuteranopia, Deuteranomaly, Tritanopia, Tritanomaly, Achromatopsia, and Achromatomaly. Each uses mathematically precise color transformation matrices.
- Scientifically Accurate — Uses the Brettel and Viénot transformation matrices, the established standard in vision science. These matrices transform RGB values to approximate the color perception of people with specific cone cell deficiencies.
- Adjustable Severity — For anomaly types (partial color blindness), adjust the severity from 10% to 100% to simulate different levels of color vision weakness.
- Side-by-Side Comparison — View original and simulated images next to each other for direct comparison. Immediately see which colors lose distinction.
- Grid View — See your image through all 8 types simultaneously in a grid layout. Quickly identify which types affect your design most.
- Drag-and-Drop Upload — Upload images by clicking, dragging, or pasting from clipboard. Supports PNG, JPG, GIF, WebP, and all browser-supported formats.
- Export PNG — Download the simulated image as a PNG file. Use Export All to download all 8 types at once for documentation or presentations.
Types of Color Blindness Explained
Red-Green Color Blindness (Most Common)
- Protanopia — Complete absence of red cone cells. Reds appear as dark brownish-green. Affects approximately 1% of males.
- Protanomaly — Weak red cone cells. Reds appear duller and shifted toward green. Affects approximately 1% of males.
- Deuteranopia — Complete absence of green cone cells. Greens appear brownish-yellow. Affects approximately 1% of males.
- Deuteranomaly — Weak green cone cells. The most common type, affecting about 5% of males. Greens appear shifted toward red.
Blue-Yellow Color Blindness (Rare)
- Tritanopia — Complete absence of blue cone cells. Blues appear greenish and yellows appear pinkish. Very rare, affecting less than 0.01% of the population.
- Tritanomaly — Weak blue cone cells. Blues appear desaturated. Very rare.
Complete Color Blindness (Very Rare)
- Achromatopsia — Total color blindness. Vision is entirely in shades of gray. Extremely rare, affecting about 1 in 30,000 people.
- Achromatomaly — Partial color blindness. Colors appear desaturated and washed out. Very rare.
Use Cases
- UI/UX Design — Test button colors, links, alerts, and interactive elements for visibility across all color vision types.
- Data Visualization — Ensure chart colors, heatmaps, and infographics are distinguishable for color-blind users.
- Web Accessibility — Meet WCAG guidelines by verifying color contrast and distinction for people with color vision deficiencies.
- Graphic Design — Check logos, marketing materials, and brand colors for universal readability.
- Education — Teach about color blindness and demonstrate how different conditions affect visual perception.
- Game Development — Test game UI, health bars, item colors, and map indicators for accessibility.
Privacy & Security
The Color Blindness Simulator processes all images using the HTML5 Canvas API entirely in your browser. No image data leaves your device, no server processing occurs, and no images are stored. The tool works completely offline once loaded.