Inclusive Color Sequences for Data Viz in 6 Steps
Co-written by Voranouth Supadulya and Cameron Calder
We’ve all seen it — a set of visualizations that have gone to the circus and back displaying colors that range the full spectrum of the rainbow with seemingly little rhyme or reason. Perhaps the color sequence was dynamically generated? …Perhaps it wasn’t. Intentional or not, color implemented incorrectly can distract from the content and create confusion in the meaning.
Because of this, there are a number of reasons why it’s advantageous to create a predictable color sequence for data visualizations:
1. A common color sequence, when used across a set of visualizations, creates harmony in the product’s visual language.
2. It provides meaning and intention when a sequence is consistently used throughout the product experience.
3. Perhaps the best reason to be intentional with a color sequence is that it provides an opportunity to think inclusively. Accessible UI can positively impact a wide range of people from users with color deficiencies to those with temporary or permanent disabilities.
A color sequence as described can be achieved by you, and there are 6 simple steps to follow when crafting your visualization palette.
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.
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.
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.
Cross-hatching pattern: Start at the top left and cross-hatch down then across. This sequence is better for introducing colors quickly. It doesn’t utilize contrast as well within the same color family previously used.
Chevron-skipping pattern: Start at the top left. Create a chevron pattern down, skip a swatch at the top and repeat. Offers good color/contrast range in a sequence.
Diagonal pattern: Start at the top left and continue downward/across. This sequence is good if you want a bit more color variety than just contrast skipping. Like cross-hatching though, it doesn’t utilize contrast as well within the same color family previously used.
Diagonal switchback pattern: Start at the top left and bounce back/forth to the bottom right creating an upward diagonal on each side. This is certainly the most complicated example shown but it’s great for maintaining a range of color/contrast across a sequence.
If you aren’t achieving your desired color sequence or contrast, consider alternating the order of the color swatches prior to numbering the sequence. The example below re-orders the swatches in alternating sequence to create higher contrast diversity.
In conclusion, a good color sequence creates consistency across your team’s implementation of data visualizations and brings harmony to the product. It also considers inclusivity by making the content more approachable and understandable. Before choosing colors at random, slow down and determine a color sequence that is accessible, reproducible, and jointly works with the product palette.
Voranouth Supadulya is a product Designer and Cameron Calder is product team Design Lead at IBM Studios in Austin. The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.
