Let’s imagine you’ve been tasked with a project to create data visualizations. Woo! Grab a box of crayons, pick your favorite colors and let’s get started! … Wait no!!!

Tempting as it may be, creating a palette that spans the color spectrum often fails accessibility requirements. Take this lovely set of colors from a popular UI palette generator:

All the colors!

When simulating the Deuteranopia color deficiency, some colors that were once quite different become less distinguishable from one another. The purple and blue have essentially become one.

Deuteranopia color deficiency (No green cones)

When viewing the palette in greyscale, the colors become very difficult to distinguish from one another. Blue and red are nearly identical, along with the green and orange.

Achromatopsia – Unable to perceive color

(check out Color Oracle for quick colorblindness simulation on Mac, Windows and Linux)

Why does this happen?

A color can be broken down into three components: Its hue, lightness, (also referred to as tone or value) and saturation (also known as chroma).

Hue:

For people without color-deficient vision, hue is the easiest component of a color to recognize. Blue is blue, yellow is yellow and red is red. Shifting the hue changes a color from blue, to purple to red to orange to yellow etc.

Shifting the color hue

Lightness:

A color’s lightness is also fairly straightforward. It’s a measure of how dark or light a color appears. In the physical world, it’s a representation of how much light an object reflects. If an object reflects no light, it appears black. If it reflects 100% of the light, it’s pure white. Variations in lightness are easier for people with color-deficient vision to detect.

Changing a color’s lightness

Saturation:

A color’s saturation is a measure of its purity or intensity. Removing saturation fades a nice vibrant color down to a shade of grey. (Doing so reveals the color’s underlying lightness)

Changing a color’s saturation

The magic (or trap) is in the lightness

Often, hue and saturation do a great job of masking the underlying lightness of a color. The rainbow color pallet above fails because there isn’t enough variation in lightness between the different hues.

Almost a solution, but not quite

Picking a single color and creating a palette by varying the lightness works… to an extent.

This works 😄

This method is fine when you’re working with a limited number of data points. The three colors above are easy enough to distinguish from one another. However, you might be comparing dozens of data points at once. When you add more stops to a single color gradient, things start to fall apart. Because the colors are in the same hue, they become more difficult to distinguish.

Not so much ☹️

The solution: multi-hue gradients with a broad range of lightness

Introducing multiple hues to the gradient solves the problem created by a single color. The gradient below has four hues. However, because the lightness of the colors are similar, viewing the palette in greyscale produces VERY sad results:

A mutli-hue gradient with poor distribution of lightness

To improve the contrast, the lightness is varied evenly across the entire gradient. Dark on the left (pure black) and light on the right (pure white)

A mutli-hue gradient with even distribution of lightness

Using this method, and playing with different hues, we can create a variety of more accessible color palettes:

The method above represents a significant improvement over picking random colors or using a single color, but it’s not without challenges. Despite applying an even variation of lightness across the gradient, some of the swatches could still use more contrast. We could fiddle with the colors a bit more, or we could…

Tip the hat to math and science

Chroma.js lightweight Javascript library for color manipulation. It allows you to smooth out multi-hue color gradients with bezier interpolation and apply lightness correction to maximize contrast across your palettes. It also plays nice with D3 charts.

There’s a great interactive tool to assist in palette creation. All of this is backed by serious color nerdery.  (The black line under the color gradient represents the lightness scale.)

Applying bezier interpolation and lightness correction to a multi-hue gradient