Color Perception

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

Related Topics