How to Make Blue and Green Lines in Charts Easier to Distinguish: Consider Color Differences and Line Styles

Two blue and green lines on a line chart can be hard to tell apart when they are identified by color alone. When the lines cross or the chart becomes smaller on a phone, it may be difficult to follow the correct series. A better approach is to give blue and green different levels of lightness and use solid or dashed strokes and different point shapes as additional clues. We will work through a fictional example comparing four weeks of customer inquiries.

Vary the lightness of blue and green, not just the hue

A series is one set of related values in a chart, such as the number of inquiries received through a particular channel each week. If two series use blue and green at similar lightness levels, changing the hue (the basic color family, such as blue or green) may not be enough to make them easy to follow.

For a chart with a white ■#FFFFFF background, try deep blue ■#113762 and a moderately lighter green ■#3A9862. HEX is a web color notation using a # sign followed by hexadecimal letters and numbers. The blue is considerably darker than the green, giving the two series a difference in lightness as well as hue. Still, no color pair can guarantee that every viewer will distinguish the lines, so their shapes should differ too.

Combine solid and dashed lines with different point markers

Imagine that a fictional web service plots the number of support inquiries received by email and live chat over four weeks. The figures below are made up solely to demonstrate the chart design.

Draw email as a solid blue ■#113762 line with circular markers, and chat as a long-dashed green ■#3A9862 line with square markers. Distinct markers at each week provide another way to trace the series when their paths run close together. In the legend (the key that explains what the chart’s marks mean), spell out “Email: solid line, circles” and “Chat: dashed line, squares” rather than showing two colored strokes alone.

In week 1, chat has 38 inquiries compared with email’s 24. By week 2, email has 37 and chat has 36, so the two lines cross between weeks 1 and 2. This is precisely where their different stroke styles are useful. Place direct labels such as “Email: 48” and “Chat: 40” near the right ends of the lines. If labels overlap, offset them vertically and make their association with each line clear. Keep the accompanying data table so exact values remain accessible without interpreting the colors.

Check crossings, contrast, and the smaller-screen layout

A contrast ratio measures the difference in relative lightness between adjacent colors. Against the white ■#FFFFFF plot background, the blue ■#113762 has a ratio of approximately 12.02:1, and the green ■#3A9862 approximately 3.59:1. Both are above the 3:1 criterion used for important graphical objects such as chart lines under WCAG (Web Content Accessibility Guidelines) 2.2. For axis labels and values, use dark gray ■#293847 on white ■#FFFFFF: its ratio is approximately 11.99:1, above the 4.5:1 requirement for normal-sized text.

These ratios do not tell you whether a very thin line or tightly spaced dashes will remain recognizable at a small size. Try a slightly thicker stroke, inspect the lengths and gaps in the dashes, and check whether the circles and squares remain visibly different on a phone. Also review the chart in grayscale or in a black-and-white printout. Make sure labels do not cover the lines near their crossing.

HueRoll can show HEX values and compare a selected color’s contrast with white or black. For contrast between blue and green themselves, or against any other background, check those specific color pairs separately. Make the final decision based on the lines, markers, and text labels working together rather than on color alone.