datarekha
Data Visualization Medium Asked at AirbnbAsked at FigmaAsked at Tableau

How do you choose colors that are both accessible to colorblind viewers and analytically meaningful?

The short answer

About 8 % of men have red-green color deficiency, making the default red-green diverging palette unreliable. Use colorblind-safe palettes such as Okabe-Ito or ColorBrewer, match palette type to data type (sequential for ordered magnitudes, diverging for values around a meaningful midpoint, qualitative for unordered categories), and always add a redundant encoding such as shape, pattern, or label.

How to think about it

Three palette families

  • Sequential (e.g., light blue to dark blue): use when the variable has a natural low-to-high order and zero is not a special value — population density, revenue, temperature in summer.
  • Diverging (e.g., blue-white-red): use when there is a meaningful midpoint, such as zero or a target, and deviations in both directions matter — profit margin (negative vs. positive), sentiment score.
  • Qualitative (e.g., Okabe-Ito, ColorBrewer Set2): use for unordered categories — product lines, regions, species. Each color should be equally visually salient.

Colorblind-safe choices

Red-green is the most common axis of color deficiency (deuteranopia and protanopia). Avoid any palette where the only distinction between groups is red versus green. Reliable alternatives:

  • Okabe-Ito (8-color qualitative, designed for colorblindness)
  • ColorBrewer palettes (available in matplotlib, ggplot2, Tableau, and Vega)
  • Blue-orange diverging (both visible under deuteranopia)

Redundant encoding

Color should never be the sole encoding. Pair it with:

  • Shape on scatter plots (circle vs. triangle vs. square)
  • Line style on line charts (solid vs. dashed)
  • Direct labels or pattern fills on bar charts
  • Position when possible (grouped bars rather than stacked color)

This ensures the chart is still readable when printed in black-and-white or viewed by someone with color deficiency.

Contrast and background

Beyond hue, check luminance contrast. The WCAG AA standard requires a contrast ratio of at least 4.5:1 for text and 3:1 for large graphical elements. Tools like Coblis (color blindness simulator) and the Paletton contrast checker help validate designs before publication.

Learn it properly Colour & accessibility for clarity

Keep practising

All Data Visualization questions

Explore further

Skip to content