Color
Color and Accessibility
Contrast, meaning, and status - ensuring color works for every user
Key Insight
Color in UI design must meet accessibility requirements first, then serve visual hierarchy. Two core rules: (1) all text must meet WCAG contrast minimums (4.5:1 for body, 3:1 for large text); (2) never use color as the only way to convey meaning - always pair it with a secondary signal (icon, label, pattern) for colorblind users. Status colors (green/success, red/error) only work when consistently applied.
Key Points
- •WCAG AA: 4.5:1 contrast ratio for normal text, 3:1 for large text (18pt+ or 14pt bold)
- •Never use color alone to convey meaning - always add a second signal
- •System colors: green for success/positive, red for error/danger, yellow/orange for warning
- •Use HSB (Hue/Saturation/Brightness) to create predictable color shades
- •Monochromatic palettes (one hue, varied lightness) create cohesion without complexity
Guidelines
- ✓Check all text/background combinations with a contrast checker before shipping
- ✓Every error state must have an icon or text label alongside the color signal
- ✓Apply brand color consistently to interactive elements to set a learnable pattern
- ✓Tinted greys (a touch of brand hue) feel more cohesive than pure grey
- ✓Test designs in grayscale - the hierarchy must work without color
Formula
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention