Color in Data Visualization: Principles for Charts, Dashboards, and Infographics

Data visualization color is a distinct discipline from brand or UI color. The goal is not aesthetic harmony but accurate encoding — color must communicate data structure, not override it. This issue covers the four semantic color roles in dataviz, perceptual uniformity requirements, color blindness constraints, and the specific rules that distinguish good chart color from misleading chart color.

Data Visualization Charts Accessibility

Highlights

Data visualization has four distinct color roles: categorical (encodes group membership — must be maximally distinguishable), sequential (encodes ordered quantity — must increase uniformly in lightness), diverging (encodes deviation from a midpoint — must be balanced and symmetric), and highlight (marks selected/anomalous values — must not resemble any categorical color). Using brand colors for dataviz without role-mapping is one of the most common failures in design system implementations.

Perceptual uniformity is non-negotiable for sequential and diverging scales. HSL-based color interpolation for sequential scales produces visible brightness bands — a well-known failure mode where certain hue combinations produce a false visual midpoint. Use OKLCH or CIELAB interpolation for all sequential and diverging scales.

Approximately 8% of men have some form of color vision deficiency. Red-green distinction is the most affected pairing. Categorical palettes for dataviz should rely on lightness difference and shape as the primary encodings, with color as a secondary reinforcement — never as the sole distinguishing signal.

Building a categorical palette for dashboards

A good categorical palette for dashboards requires: (1) Minimum 4.5:1 contrast between any two adjacent colors when placed against the dashboard background. (2) Lightness variation of at least 15 OKLCH L units between any two colors, so that the distinction survives grayscale printing or colorblind simulation. (3) Maximum 8 distinct categories in a single chart — beyond 8, categorical encoding breaks down cognitively. For more than 8 groups, group smaller categories into 'Other.' (4) Temperature separation between adjacent categories — alternating warm and cool hues prevents accidental perceived gradient ordering. The full ColorArchive archive is a good starting point: filter by family and pick one representative at medium saturation and lightness from each of 6-8 families.

When chart colors and brand colors conflict

A common tension in product dashboards: brand colors assigned to dataviz categories immediately suggest meaning — 'success' brand green used for a neutral data category creates a false positive association. The solution is a clear semantic hierarchy: brand colors remain in UI chrome (navigation, CTAs, brand marks), while dataviz uses a purpose-built palette. The dataviz palette should share temperature (warm-tending or cool-tending) with the brand but use different hues. Brief the product team explicitly: 'these are data colors, not brand colors.' This prevents the gradual reassignment of dataviz colors to brand purposes over time.

Newer issue

Extracting Brand Color from Photography: A Systematic Method for Designers

2028-09-16

Older issue

Print Color Management: What Every Designer Who Works with Printers Needs to Know

2028-09-30