Colour Blindness Vision Simulator
Simulate UI colour palettes under Protanopia, Deuteranopia, Tritanopia, and Achromatopsia.
Simulation: Deuteranopia (Red-Green Deficient)
Under Deuteranopia, red and green hues shift toward muddy yellows and browns, while blues remain relatively stable. Color 1 (#e53935) and Color 3 (#43a047) may become indistinguishable in UI icons without secondary text labels.
Standard Vision (Trichromacy)
Simulated Perception
Visual Scene Simulation (Live Side-by-Side)
Look closely at the Ishihara test plate: people with normal vision easily see "74". Under deuteranopia or protanopia, the green and orange dots blend together into matching brownish tones, rendering the number invisible.
Design Accessibility Findings
- Confusable Pair: Color 1 (Red) and Color 3 (Green) produce near-identical brown-gold luminescence under deuteranopia.
- WCAG 2.2 Recommendation: Never rely on color alone to communicate state (e.g. error vs success). Always combine colors with symbols, icons, or descriptive text labels.
- Contrast Stability: Yellow (#fbc02d) and Blue (#1e88e5) maintain high chromatic contrast across all red-green deficiency variations.
About this tool
How to use it
- Select a color vision deficiency type from the dropdown (Deuteranopia, Protanopia, Tritanopia, or Achromatopsia).
- Choose a sample design preset (Traffic Lights, UI Alert Badges, Transit Maps) or customize individual hex codes.
- Optionally upload an image or UI screenshot to preview pixel-by-pixel color transformation on a client-side HTML5 canvas.
- Click 'Simulate Color Vision' to view side-by-side normal vs. perceived color swatches.
- Read the WCAG 2.2 accessibility findings and copy the simulated hex values for design system testing.
Why it matters
Approximately 8% of men and 0.5% of women worldwide experience color vision deficiency (CVD). When digital interfaces communicate system status exclusively through color—such as a green success badge versus a red error badge with identical icons—users with deuteranopia or protanopia perceive both as identical muddy olive-brown tones. Simulating chromatic perception in the browser ensures that UI designers and developers identify and rectify accessibility barriers before shipping products.
When to use it
Use this simulator during design system audits, when selecting color pairings for data visualizations and line charts, when testing syntax highlighting themes, or when auditing marketing graphics and infographics for digital accessibility compliance.
Good to know
All image and canvas operations execute 100% locally inside your browser runtime. Zero images, files, or palette data are ever uploaded or transmitted across the network.
Common questions
What is the most common form of color blindness?
Deuteranomaly (anomalous green cone sensitivity) is by far the most prevalent, accounting for roughly 5% of all males. Together with Deuteranopia, Protanomaly, and Protanopia, red-green deficiencies account for over 99% of all color-blind individuals.
What is the difference between an -opia and an -anomaly?
Conditions ending in '-opia' (like Protanopia or Tritanopia) indicate a complete absence of one of the three cone photoreceptors (dichromacy). Conditions ending in '-anomaly' indicate all three cones are present, but one has an abnormal spectral response curve (anomalous trichromacy).
How does this tool calculate color perception?
The simulator uses the peer-reviewed Machado, Oliveira, and Fernandes (2009) color perception matrices. It converts sRGB values into linear RGB, applies a 3x3 spectral transformation matrix tailored to each photopigment shift, and converts back to sRGB.
What does WCAG 2.2 require regarding color?
WCAG Success Criterion 1.4.1 (Use of Color) mandates that color must not be used as the sole visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Always pair colors with icons, labels, underlines, or textures.
Is my uploaded image uploaded to an external server?
No. The image is processed entirely within your computer's local memory via the browser's HTML5 Canvas API and JavaScript. It is never uploaded to any remote server or third party.