Inclusive Color Sequences for Data Viz in 6 Steps
By: Cameron Calder
Tags: Colors, Data Visualization, Design

Step 1: Start with an established color palette

This step can be started from two distinct places: from an existing design system or from a product-specific color palette. The main difference is an existing design system will typically have a larger set of color options than a product palette.

Depending on your starting point, the process will either be subtractive or additive. If you are starting from a product palette, then the process will need to be additive. ColorBox, by Lyft design, is a tool you can use to create colors in addition to your original product palette. ColorBox provides a way to quickly create contrast steps in your colors which will be important for your data visualization sequence. Referencing an existing design system is also a valuable place to start since they typically include broader color options. Starting from a design system will be a subtractive approach considering you’ll be narrowing the palette down to a sequence specific for data visualization usage. We’ll be using the IBM Design language v2.0 color palette as an example of this process.

The IBM Design v2.0 palette is especially useful because it has contrast in mind with swatch progression. We’ll describe why this is valuable in step 4…

Step 2: Consider your product palette

Even if you are starting from an existing design system you still need to consider the product palette that will deliver the data visualizations. Product palettes typically contain a primary color, sometimes a secondary color, and a neutral which is commonly used for the UI foundation. The colors we’ll use for our product example are Indigo, Teal, and Gray.

In data visualizations, there’s an argument to be made to steer away from product colors used throughout the UI. Colors used consistently in products establish intent and expected behavior. You may not want to use a product color as one of many area graph category colors if that same color is used as a primary action everywhere else in the product. With this being the case, we’ll remove the product colors from the list and others close to their hue to avoid confusion (like Violet and Purple).

Step 3: Drop colors with pre-existing meaning

The next step would be to identify colors that may have meaning attached to them… colors with baggage, if you will. Green, Yellow, Orange, and Red often fall into this category making them potentially problematic when used in cases where the color’s job is to simply provide distinction against others around it. If this case rings true for you, consider omitting those colors.

Step 4: Narrow palette for contrast

A critical method for creating a distinction between your palette and your UI is through contrast. First, you’ll need to determine whether the data visualization background will be dark or light. Consider using a single background color for consistent visualizations and to make accessible contrast ratios achievable.

For this section, we’ll be referencing the Web Content Accessibility Guidelines 2.1

3:1 Color Contrast Ratio

Color contrast in shapes 3 x 3 pixels and larger is considered accessible if it meets a contrast ratio of 3:1.

To find the start of the color range, use WebAim’s Color Contrast Checker to check all of the colors against your chosen background color. From there, pick the color that meets the minimum of 3:1 contrast ratio to be the start of the range. Any color higher than the ratio 3:1 is accessible and can be included in the range.

4.5:1 Color Contrast Ratio

If shapes are less than 3 x 3 px, the rule becomes more rigid and the object must meet a ratio of 4.5:1.

Using the same logic as above, select the range of colors that meet the minimum of 4.5:1 against your UI background color.

Narrow the color palette to 3:1

Most data visualizations can be achieved with 3:1 contrast so we’ll use it for our example. Using your background color as the baseline, remove all colors that fail within 3:1 of that color. It is also wise to just remove the edge colors of the steps (1 and 90) since the contrast distinctions between the colors at the edges can be difficult to view.

Example using a white background

Step 5: Consider color deficiency

Color deficiency has a far deeper reach than most realize. It affects approximately 8% of men and .5% of women in the world. The 3 main types of color deficiencies are deutan, protan, and tritan.

Deutan: Red-green confusion that includes the subtypes deuteranomaly and deuteranopia. Deuteranomaly is the most common form of color deficiency. It impacts 4.63% males and .36% females.

Protan: Also red-green confusion. It includes the subtypes protanomaly and protanopia. Protan is the less common form of red-green confusion accounting for a total of ~2% males and .05% females.

Tritan: Blue-yellow confusion that includes the subtypes tritanomaly and tritanopia. Tritanopia is quite rare. Some sources estimate that 0.008% are affected by this type of color deficiency.

If you don’t already have it, download the Mac application Sim Daltonism to simulate from a perspective of a color deficiency user.

For our first color study, let’s focus on the color deficiency Deuteranomaly. Using Sim Daltonism, you can see the colors perceived as someone who has the Deuteranomaly color deficiency. Many of the colors start to become indistinguishable.

Once the simulator has captured images from the color deficiency types, group the perceived colors. This is done by identifying which color rows look similar to each other. You’ll also want to consider how similar the colors look at a small scale of 2–3 pixels. This is important for determining how much color distinction you’ll need depending on if your visualizations have smaller or larger identifying features.

To be accessible for the red-green color confusion, only consider color groups in Protan and Deutan color deficiencies. To be completely accessible for all six of the color deficiencies, consider color groups across all color deficiencies.

After the colors are organized, choose 3–4 colors that do not share perceived similarities across the color deficiencies.

If you are targeting 6/6 color deficiencies, you may want to consider a smaller color set for optimal distinction. Particularly for Tritanopia.

Step 6: Choose a sequence

Having a color sequence becomes critical as it creates the distinction between the colors used in the scaled down palette. In our examples, we’ll be showing a sequence of 20. (This is quite a bit more than would typically be used but it’s good to have a range that can scale up to accommodate data visualization categories.) For data visualizations that do have a higher number of categories though, consider a secondary visual aid like an icon or unique shape/pattern to help with identification.

In addition to creating color distinction from the background, you need to be able to discern colors that are adjacent to each other. For instance, if you have a stacked bar chart, the colors of the bars will need to have a ratio of 3:1 between large sections (larger than 3 x 3 px) and a ratio of 4.5:1 between smaller sections (smaller than 2 x 2 px). A common suggestion is to add contrast lines with a pixel width of the same color as the background to help discern between the edges of the elements, thus adding contrast distinction between the colors.

There are quite a few ways to create sequences including using patterns for numbering and reorganizing the color palette. A few methods are:

Contrast skipping: Skip swatches side to side to create higher contrast and utilize the same color longer throughout the sequence. This sequence works better against a darker UI where contrast nuance is more noticeable. Lighter UI’s may benefit from another sequence.