← Docs
Recipe

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.