How Do You Use Blue and Red in Graphs? Distinguishing Data Series with Colors and Labels

When using blue and red for two data series in a graph, do not rely on line color alone. Combine a solid or dashed line with different point markers and clear labels naming each series. This helps readers follow the data even when the colors are hard to distinguish or the chart is viewed on a small phone screen. The examples below use fictional signup counts to show how to separate series in both line and bar charts.

Choose blue and red that stand apart from the background, and name the series

A data series is a set of related values recorded across dates or other categories. For this example, PC signups use blue ■#215E9B and smartphone signups use red ■#B54343, against a white ■#FFFFFF chart background. HEX is a hexadecimal web color code consisting of a hash sign and six letters or digits. These colors are proposed examples; there is no rule that PC data must be blue or smartphone data red.

Blue ■#215E9B against white ■#FFFFFF has a contrast ratio of approximately 6.69:1, while red ■#B54343 against white ■#FFFFFF measures about 5.46:1. A contrast ratio expresses the relative luminance difference between two colors. Although both lines contrast with white, blue ■#215E9B and red ■#B54343 differ from each other by only about 1.23:1. Where the lines cross, hue alone is not a reliable way to keep them distinct.

Use a solid line with circular markers (●) for the blue series and a dashed line with diamond-shaped markers (◆) for the red series. Label the legend with the data names “PC” and “Smartphone,” not simply “Blue” and “Red.”

Use line styles and direct labels for a signup-count chart

Imagine comparing website signup counts by day of the week. These numbers are fictional examples created for this explanation, not actual traffic or signup measurements.

On the line chart, draw the PC series as a solid blue ■#215E9B line with circles and the smartphone series as a dashed red ■#B54343 line with diamonds. Between Tuesday and Wednesday, the two lines cross, but their patterns and markers remain different. Label the final points directly as “PC 28” and “Smartphone 27.” If those labels overlap, stagger them vertically and connect each label to its point with a short leader line.

If you present the same values in a grouped bar chart, keep “PC” and “Smartphone” close to the corresponding bars. Add visible values or patterns when needed so that the audience does not have to match distant legend colors to individual bars. The goal is to connect each visual mark with a meaningful series name.

Check chart-line contrast and provide another way to read the values

WCAG (Web Content Accessibility Guidelines) 2.2 generally requires meaningful parts of graphics, including lines needed to understand a chart, to contrast by at least 3:1 with adjacent colors. It also requires that color not be the only visual way to convey information. Both example line colors exceed 3:1 against white, but do not make the lines extremely thin or depend on their hues alone at intersections.

For series names, values, and axis labels, use dark charcoal ■#253041 on white ■#FFFFFF. This pair has approximately 13.31:1 contrast, above the 4.5:1 requirement for normal-sized text. Include a table of the plotted values, as shown above, so readers can obtain the exact numbers without relying only on the line colors or marker shapes. At smartphone widths, check that point markers and direct labels do not collide.

HueRoll lets you adjust a color using HEX input and check the selected color against white or black. It cannot directly compare arbitrary pairs such as the two plotted colors or automatically determine WCAG pass/fail results. Calculate the actual line, text, and background combinations separately before publishing the chart.