How Should You Use Different Colors in Bar Charts? | Color Schemes for Web Dashboards

Using more colors does not necessarily make bar charts on web dashboards easier to read. A chart of monthly totals, a comparison with last year, and a chart emphasizing one result each call for different color roles. This guide explains how to limit the number of colors, choose practical HEX codes (hexadecimal color notations), and check contrast for both bars and their labels.

Let the comparison determine how many colors to use

If the chart shows one measure across several months, using the same color for every bar makes the differences in quantity easier to follow. Change the color only when a particular month deserves emphasis. Giving each month an unrelated color can suggest that the colors represent additional categories even when they do not.

When comparing two data series, such as this year and last year, assign one consistent color to each series. A series is a set of values collected under the same condition. Keep the colors unchanged from month to month, and use a legend (a guide identifying each series) and nearby labels so viewers can identify each value.

In a stacked bar chart, several categories share one bar and their colored segments touch. Their boundaries therefore matter as well as their contrast with the surrounding plot. If segments are difficult to distinguish, add a divider and the name or value of each segment. A data table can help when there are many small segments.

Color examples for monthly counts and year-on-year comparisons

Imagine a fictional chart showing inquiries: 110 in January, 135 in February, 120 in March, and 160 in April. Give the plot a white ■#FFFFFF background, and use dark blue-gray ■#273746 for axis labels and values placed outside the bars. The contrast ratio between that text and white is about 12.20:1.

Use muted blue-gray ■#687B8B for the January-to-March bars, then a deeper blue ■#205D81 for April alone. Against the white ■#FFFFFF background, the regular bars have about 4.38:1 contrast and the highlighted bar about 7.13:1. Add a label reading ‘April: 160 inquiries’ so the reason for emphasis is conveyed in words as well as color.

For a year-on-year comparison, consistently use blue ■#205D81 for this year and reddish-brown ■#96522E for last year. The brown has about 5.93:1 contrast against white ■#FFFFFF. For example, show ‘April: this year 160, last year 145’ with two side-by-side bars separated by a white gap. Because the two fills may be hard to distinguish through brightness alone, add direct ‘This year’ and ‘Last year’ labels or a pattern to one of the series.

When the quantities share a common scale, start the numerical axis of an ordinary vertical bar chart at zero. Truncating it can exaggerate differences even if the colors stay unchanged. Color should help viewers track the comparisons, not make the differences look larger than they are.

Check contrast and provide cues beyond color

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, a defined web accessibility conformance level, requires a contrast ratio of at least 3:1 against adjacent colors for parts of a graph that are needed to understand its meaning. For regular-size text, the usual minimum is 4.5:1 against the background. The criteria for a bar and for text are not identical.

For instance, the muted bar color ■#687B8B contrasts about 4.38:1 with white ■#FFFFFF. That is sufficient contrast for identifying the bar shape against white, but it falls short of 4.5:1 if small white letters are placed inside the same bar. Putting the value outside the bar in dark text ■#273746 on white avoids that problem.

Do not rely exclusively on a legend. Put series names and values close to the bars, and check keyboard focus feedback if bars can be selected. Test whether the series remain identifiable for viewers with different color vision, on narrow phone screens, and in black-and-white printouts.

HueRoll lets you enter HEX codes, explore related colors and lighter or darker shades, and compare a selected color against white or black. It does not automatically compare two arbitrary colors or determine Level AA compliance. Check the actual neighboring colors of the bars and the contrast between every numerical label and its background, and keep only colors that serve a clear purpose.