Learn Color Theory
Master color with interactive guides.
What Is Color Vision Deficiency?
Understanding how your audience perceives color is essential for inclusive design.
Human color vision relies on three types of photoreceptor cells in the retina called cones. Each type is sensitive to a different range of wavelengths: L-cones respond primarily to long wavelengths (red), M-cones to medium wavelengths (green), and S-cones to short wavelengths (blue). The brain combines signals from all three cone types to produce the full spectrum of colors we perceive.
Color Vision Deficiency (CVD) occurs when one or more cone types are absent or function differently. The most common forms affect the L-cones (protanopia) or M-cones (deuteranopia), both of which make it difficult to distinguish red from green. Rarer conditions affect S-cones (tritanopia, disrupting blue-yellow perception) or all three types (achromatopsia, resulting in complete color blindness). As a designer, understanding these conditions helps you create palettes that communicate effectively to everyone.
Who Is Affected?
Color vision deficiency is far more common than most designers realize.
Scale in practice
Roughly 1 in 12 men and 1 in 200 women experience some form of color vision deficiency. In a product with 100,000 male users, approximately 8,000 will struggle to distinguish colors that rely on red-green differentiation alone. Designing with CVD in mind is not an edge case — it is a core accessibility requirement.
CVD Color Simulator
Pick any color and see how it appears under each type of color vision deficiency.
Palette CVD Preview
See how your entire palette looks under each CVD type and identify colors that become indistinguishable.
Semantic Collision Demo
See what happens when color is the only cue for status information, versus pairing it with shapes and text.
Normal Vision
Deuteranopia
WCAG 1.4.1 — Use of Color
The Web Content Accessibility Guidelines state that color must not be the sole means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. When you pair color with icons, labels, or patterns, the information remains accessible even when color perception is limited. Toggle between the two modes above to see the difference in practice.
Design Best Practices
Practical strategies for building CVD-friendly palettes and interfaces.
Use Shape Cues
Pair color indicators with distinct shapes. For example, use a checkmark icon for success, an X for errors, and a triangle for warnings. Shapes remain distinguishable regardless of color perception, providing a redundant channel of information.
Don't Rely on Color Alone
Add text labels, patterns, or underlines alongside color. Charts should include direct labels or distinct dash patterns rather than relying on a color-coded legend that CVD users may not be able to decode.
Test with Simulation
Use CVD simulation tools (like the one above) to verify that your palette maintains sufficient visual differentiation. Test with protanopia and deuteranopia simulations at minimum, since red-green deficiencies affect the largest user population.
Prefer Blue-Orange
The blue-orange color axis is the most universally distinguishable across all major forms of CVD. When you need a two-color contrast pair for data visualization or status indication, blue and orange is a safer default than red and green.
Maintain Sufficient Contrast
Beyond hue differentiation, ensure adequate luminance contrast between foreground and background colors. WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. High contrast helps not only CVD users but also users in bright-light environments.
Ready to Check Your Palette?
Run CVD simulations and accessibility checks on your actual palette colors. PerfectPalette will flag confused pairs and suggest fixes automatically.