Color-blind safe palette design
Build charts and interfaces that remain distinguishable for users with deuteranopia, protanopia, and tritanopia.
The problem
Red-green encoding fails for ~8% of males. Status indicators, heatmaps, and categorical charts collapse into indistinguishable blobs when hue alone carries meaning. The fix is not desaturation — it is deliberate contrast in luminance and shape.
Safe palette (6 stops)
Blue
#0072B2
Orange
#E69F00
Bluish-green
#009E73
Yellow
#F0E442
Pink
#CC79A7
Black
#000000
Based on the Wong 2011 Nature Methods palette. Works for deuteranopia, protanopia, and tritanopia without modification.
Rules
- Never rely on hue alone — pair with pattern, label, or luminance delta.
- Test every chart in greyscale first. If it works without color, it works for everyone.
- Avoid red-green as the only differentiator for binary states.
- Use direct labels on data points instead of legends when possible.
Quick test
Paste your screenshot into Coblis or use Chrome DevTools rendering emulation. If any two categories merge, add a luminance gap of at least 30 points in HSL.
Meridian tip: Apply this palette in your dashboard theme tokens. Set --chart-1 through --chart-6 to these hex values and reference them in all chart components.