Key Insight
Color vision is unreliable (~8% men are colorblind) and context-dependent, so color must never be the sole indicator of meaning.
Key Points
- •Approximately 8% of men and 0.5% of women have some form of color vision deficiency
- •Color perception changes with surrounding colors (simultaneous contrast)
- •People can only remember and distinguish 5-7 colors reliably in working memory
- •Color sensitivity is weakest in peripheral vision-central focus is needed for hue detection
- •WCAG requires 4.5:1 contrast ratio for normal text and 3:1 for large text or UI components
- •[FIGURE 4.2 - Simultaneous contrast] Shows: Same colored bar appearing different shades depending on surrounding background color. Teaches: Color perception is relative to context-the same color looks different against different backgrounds. Reproduce as: Interactive contrast demo with adjustable surrounding color.
- •[FIGURE 4.9 - Color blindness simulation] Shows: Same interface viewed with normal vision vs simulated red-green color blindness. Teaches: ~8% of men cannot distinguish red from green; designs must work without relying on these color differences. Reproduce as: Color blindness simulator toggle.
- •[FIGURE 4.11 - Grayscale test] Shows: Colored chart converted to grayscale showing lost differentiation. Teaches: If information is lost in grayscale, color-blind users will miss it; always pair color with other indicators. Reproduce as: Grayscale toggle for any UI.
- •[FIGURE 4.16 - Color redundancy] Shows: Status indicators using color alone vs color + shape/icon. Teaches: Redundant coding (color + shape) ensures information survives color vision deficiency. Reproduce as: Status indicator with toggleable redundancy.
Guidelines
- ✓Always pair color with a secondary indicator: icon, text label, pattern, or position
- ✓Test designs in grayscale to verify information survives without color
- ✓Limit meaningful color distinctions to 5-7 categories maximum
- ✓Use color for reinforcement, not as the only differentiator (e.g., red + "Error" label)
- ✓Ensure interactive elements meet WCAG contrast minimums against their background
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention