Dell's Data visualization library

Designing data visualization color palettes for Dell's design system

Role

Product Designer

Industry

B2B Cloud Services

Tag

Design System

Stage 1. Where we started - Benchmarking

As Dell approached work on version 2.0 of its design system, there was an opportunity to introduce a new element in the system that could help our leaders and customers make data-driven informed decisions and, with it, bring consistency across our products and offerings - a data visualization library.
‍
As the primary designer on this newly minted work stream, I started working with the product manager and the lead developer to identify the elements that would make up our MVP.

We started by running a quick study. We looked at seven industry leaders with strong data visualization style guides and libraries: IBM Carbon, Salesforce Lightning, Adobe Spectrum, Google Material, Mailchimp, Shopify Polaris, and Quickbooks.

Fundamentally, what all these design systems had in common were strong color palettes.

Stage 2. Collaboration with the Brand Team at Dell

There already existed a color palette that the Design System team produced in collaboration with the Brand team at Dell (see screenshot on the right for reference).

While this brand-compliant palette offered a significant starting point for my team, we noticed it was still being tested to meet WCAG AA Compliance, as prescribed by Dell’s corporate policy.

It became important to me and my team to include accessibility in every asset we create for our data visualization library.

Stage 3. Types of color palettes

While looking across the same design systems we had started our benchmarking efforts with, we realized that there were 3 main types of color palettes:

Sequential Palettes (Monochromatic and Diverging)
Categorical Palette
Alert Palette

Sequential Palette

What is a sequential palette?

Colors in sequential palettes have a correlation to one another and are attached to a numeric category (e.g. homelessness rates across the US by state).

There are two types of sequential palettes:

Monochromatic palettes (gradation from light to dark).
Diverging palettes (useful when dealing with negative values)

Monochromatic palettes

What is a monochromatic palette?

A monochromatic palette is a sequential palette that uses the gradation of one color to depict trends in a data set.

How did we come up with a monochromatic palette?

Since we had developed the brand-compliant color palette using D.A. Green’s cube helix method/approach, we had an excellent starting point for creating a monochromatic palette. Next, we needed to ensure our colors met the WCAG AA standard for color contrast.
‍
To ensure we complied with that standard, we defined the background colors our data visualization assets would use.

We then tested all color shades from the brand-compliant color palette for color contrast against the above backgrounds.

Sample Color Contrast Check

Overall Color Contrast Compliance

After testing all the color shades from the brand-compliant color palette, it became apparent that the lighter shades of each color did not meet the 3:1 standard ratio for WCAG AA.
‍
So, we ended up with the following monochromatic palettes:

Diverging palettes

What is a diverging palette?

A diverging palette is also a type of sequential palette that uses gradations of two shades of color to depict trends. This always includes both negative and positive values.

How did we come up with a diverging palette?

Using Chroma.js Color Palette Helper (https://gka.github.io/palettes), I started combining the darkest shades of different colors from our brand-compliant color palette to generate diverging palettes. I then matched the palette colors generated by Chroma.js to existing ones from our brand-compliant color palette.

Next, it was essential to keep accessibility in mind. Using Chroma.js, I tested the palettes to make sure they were colorblind-safe by testing for extreme color vision deficiencies where one of the light cones: deuteranopia, protanopia, tritanopia.

After testing all diverging palettes to make sure they were colorblind-safe, I ruled out all the ones that were not up to standard.

Accessible and Brand-Compliant Diverging Palettes

After testing all diverging palettes to make sure they were colorblind-safe, I ruled out all the ones that were not up to standard.

Categorical Palette

What is a categorical palette?

A categorical palette is a range of colors that help users distinguish data across non-numerical categories that do not have an inherent correlation (e.g., Paul and Virginia as individual people, countries, etc.).

What makes an excellent categorical palette?

Colors in a categorical palette should have sufficient visual contrast among themselves (optimized for all color deficiencies) and avoid false associations or correlations because of similarities in brightness or hue.

Testing

Once I established what made an excellent categorical palette, I combined different colors from the accessible and brand-compliant palette below using a tool called “viz palette” (https://projects.susielu.com/viz-palette) to make sure there was enough visual contrast and no correlation between colors:

Sample color combination testing

The test below shows that the colors picked have sufficient visual contrast among themselves. Folks with no color vision deficiencies cannot confuse them with one another. This, however, changes as you look at deuteranopia, where green and orange or blue and purple become indistinguishable from each other in large areas (e.g., donut chart).

Final Categorical Palette

After several rounds of combination tests, I landed on the following categorical palette. As shown in the color reports below, conflicts between are significantly low.

Alert Palette

What is an alert palette?

An alert palette is a range of colors used to show health status—good, bad, and warning. It consists of three colors: green, red, and orange.

How did we come up with an alert palette?

When we got to pick the colors that would make up our alert palette, I started off again with the brand-compliant and accessible monochromatic palette. It is important to note that the darker shades tend towards black, making them indistinct from one another. The lighter the shades of red, green, and orange are, the more they are distinct from one another. This is how we then land on the following colors: