Using color in charts

Use color to separate or to point, and use as little of it as the job allows. Match the palette to the data: distinct hues for categories with no order, a light-to-dark ramp for values from low to high, and a two-sided ramp for values above and below a meaningful midpoint. Then pick one strong color for the thing you want the reader to look at, and make everything else quieter.

Most color problems in charts come from using color for decoration. A bar chart with every bar in a different color invites the reader to look for a meaning in the colors, and there isn't one. One color for the data plus one highlight color covers a surprising share of real charts.

Three kinds of palette

Each palette type matches a kind of data, and mixing them up is one of the most common errors.

A categorical palette uses hues that look clearly different from each other and roughly equal in weight, so no category looks more important by accident. Use it for regions, product lines, or social networks. Keep it to five or six colors. Beyond that, readers can't hold the mapping in their heads, and two of the hues will start to look alike.

A sequential palette runs from light to dark in one hue (or a smooth blend of two). Use it when the values have an order: sales per store on a map, rainfall by month in a heatmap, the share of people who answered "yes". Darker should mean more. Rainbow scales are a poor choice here because the hues have no natural order, and bright yellow in the middle creates bands that aren't in the data.

A diverging palette has two hues meeting at a neutral color in the middle. Use it only when the midpoint means something: zero change from last year, the 50% line in a survey, the long-term average temperature. If the midpoint is arbitrary, a diverging palette invents a split in the data, and a sequential one is the better fit.

One highlight color

The most useful color decision in everyday charts is to make most of the chart gray and color only what the story is about. A line chart of five traffic channels in five colors forces the reader to match lines to a legend before they can see anything. The same chart with four gray lines and one colored line tells them where to look before they start reading.

Pick the highlight color so it stands out against both the background and the main data color. A warm accent (orange, coral, red) next to blues and grays works in most cases. Use it for one thing per chart, or two at most, because a third highlight starts to compete with the first two.

The gray context still matters. It shows the reader that Social's growth is unusual compared with the other channels, which is often the whole point. Removing the other lines entirely would make the chart simpler and the claim harder to judge.

Keep color meanings consistent

Once a color means something, it should mean the same thing everywhere in the report or dashboard. If "Online" is blue in the first chart, it stays blue in the fifth. If coral marks the current year, don't use coral for a warning in the next chart.

Some colors already carry meaning for readers. Red often reads as bad or as a loss, green as good, gray as inactive or "other". In finance, some markets use red for gains, so check who will read the chart. Political parties, sports teams and brands have their own colors, and using them helps when the categories are those parties or teams. Using a party's color for an unrelated category confuses people.

Assign colors to categories by a fixed rule, not by the order they happen to appear in. Many tools assign colors in sequence, so filtering out one category can shift every color down by one. Set the mapping explicitly where your tool allows it.

Color vision deficiency

About 1 in 12 men and 1 in 200 women have some form of color vision deficiency, most often difficulty telling red from green. A chart that separates two lines only by red versus green will be ambiguous for a lot of readers.

Three habits avoid most problems. Choose colors that differ in lightness as well as hue, so they stay distinct even when the hue is lost. Blue and orange is a reliable pair. Label series directly on the chart, so the reader doesn't need to match a color to a legend at all. And add a second cue where it matters: a dashed line, a marker shape, a plus or minus sign.

A quick test is to convert the chart to grayscale. If you can still tell every series apart, readers with color vision deficiency very likely can too. Most design tools and browsers have a color-blindness simulation that's worth a minute before publishing. The accessibility guide covers the other cues in more detail.

Contrast with the background

Color only works if it can be seen. Pale yellow lines on white, thin light-gray text, and dark blue on dark navy all fail. For text, including axis labels and annotations, aim for a contrast ratio of at least 4.5:1 against the background. For lines, bars and other marks the reader needs to see, 3:1 is the usual minimum.

Context colors can be lighter, because they are meant to recede, but they still need to be visible. A gray line that disappears on a laptop screen in sunlight is worse than none, because the reader doesn't know it was there. Check a chart on a phone at full brightness and at low brightness before calling it done.

Dark mode

Charts that look right on white can fail on a dark background. Saturated colors glow, dark blues sink into the background, and light-gray gridlines turn into bright stripes. If your charts appear in an app or site with a dark theme, give them their own palette instead of reusing the light one.

Keep the same hues so readers who switch modes see the same mapping. Lighten the data colors a step and lower their saturation a little. Make gridlines and context lines darker than the text, not lighter. Test the highlight color on both backgrounds, since an accent that pops on white can look harsh on near-black.

A short checklist

Titles, labels and notes have their own guide, labels and annotations.