Color Vision Simulator — Find Color-Dependent Design Problems
See whether labels, controls, charts and calls to action remain understandable when colors are perceived differently.
Color Vision Simulator
Find color-dependent information before publishing. Images are processed locally in your browser and are not uploaded.
What does each color-vision condition mean?
Protan
Reduced or absent sensitivity from the long-wavelength (L) cones. Reds may look darker or less distinct, and some red–green combinations become difficult to separate.
Deutan
Reduced or absent sensitivity from the medium-wavelength (M) cones. Red–green distinctions are weakened, usually without the same darkening of reds seen in protan conditions.
Tritan
Reduced or absent sensitivity from the short-wavelength (S) cones. Blue–yellow combinations, and sometimes blue–green combinations, may become harder to distinguish.
Achromatic
Very limited or absent color discrimination. The grayscale preview is a practical design reference based on brightness, not a reproduction of every symptom of achromatopsia.
Terminology: “anomaly” describes reduced cone sensitivity and is simulated at 20–80%; “opia” describes the complete form represented at 100%. Perception varies between individuals.
Upload an image to start the comparison.
What to inspect
- • Status colors that become indistinguishable
- • Chart series, buttons and links that lose emphasis
- • Text that depends on hue instead of light/dark contrast
How to fix problems
- • Add labels, icons, borders, shapes or patterns
- • Never communicate success/error using only green/red
- • Verify text separately with the Contrast Checker
This is a design approximation based on the Machado–Oliveira–Fernandes model. Individual perception varies; the result is not a medical test or a complete accessibility audit.
Scientific basis:Peer-reviewed model (2009)Thesis and severity matrices (2010)
Design Information That Does Not Depend on Color Alone
Color is useful for status, hierarchy and emphasis, but it should not carry essential meaning by itself. Two chart series, success and error messages, or selected and unselected controls can become difficult to distinguish when their only difference is hue. The same risk appears in thumbnails when colored text loses separation from the background.
Upload an image and compare the original with protan, deutan, tritan and achromatic simulations. Choose a partial severity to explore anomalous color vision or 100% for a complete deficiency simulation. Grid view makes broad differences easy to scan, while Before / After view, synchronized zoom and panning help you inspect small labels and individual interface elements.
When meaning disappears, reinforce it with labels, icons, shapes, patterns, borders or position. Check text with the Contrast Checker as a separate step because a color-vision simulation does not replace WCAG contrast measurement. The simulator is an approximation for design review, not a diagnosis or a guarantee that every person will perceive an image identically.
- Partial and complete protan, deutan and tritan simulations
- Achromatic preview plus Before / After comparison
- Synchronized zoom and pan without image distortion
- Private local PNG and ZIP exports