Designing Information That Survives Color-Vision Differences
Use labels, shapes, patterns and contrast to make charts, controls and creative assets understandable beyond hue alone.
Color perception is not binary
Color-vision differences include reduced sensitivity and complete deficiency along different color axes. Protan and deutan conditions affect red–green distinctions in different ways, while tritan conditions affect blue–yellow distinctions and are much less common. Perception varies between people, so a simulation represents a model rather than one universal view.
Where designs commonly fail
Failures appear when color is the only carrier of meaning. A red error border without a message, green and red chart lines without labels, or a selected state distinguished only by hue can lose its intended signal.
- Status messages with no icon or text
- Chart series distinguished only by hue
- Maps without patterns or labels
- Links differentiated only by color
- Controls with weak selected states
Build redundant visual cues
Redundancy is useful here: pair color with a label, icon, pattern, border, position or line style. Direct labels usually outperform a distant legend. In controls, combine color with a checkmark, stronger border or change of shape. These cues also help in sunlight, on poor displays and in compressed images.
How to use a simulation responsibly
Compare the original and simulated image at several severities, then locate places where hierarchy or meaning disappears. Fix the underlying encoding and test again. Do not use a simulator to diagnose vision or to claim that every viewer will see the exact preview. Run a separate WCAG contrast test for text because simulation and contrast measurement answer different questions.
Put it into practice
Check your own work in the browser
The related tool turns these ideas into a repeatable visual check. No account is required for the free workflow.
Open Color Vision Simulator