How to Create a Color Scheme That Makes Multiple Lines in a Line Chart Easy to Distinguish

When a line chart contains four or more series (lines connecting the same kind of measurement over time), changing their colors alone may not be enough to track them where they cross or run close together. The choice of colors matters, but so do line styles, marker shapes, and written labels. This article uses a fictional web service to compare new registrations arriving through search, social media, advertising, and email over five weekdays.

Check the background contrast and line styles before choosing four colors

All four series in this example measure the same thing: new registrations per day, counted in people. Use a common vertical axis from 0 to 60 and identical reporting periods for every series. Do not silently change the scale for individual lines. Once the measurements are comparable, assign a stable color to each acquisition channel rather than changing that assignment from day to day.

WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for accessible web content) requires that color not be the sole visual means of conveying information. Parts of graphics needed to understand the content, such as essential chart lines, generally need at least 3:1 contrast against adjacent background colors. A contrast ratio describes the difference in relative luminance between two colors. Normal-sized text such as axis labels and explanations generally needs at least 4.5:1 contrast under Level AA.

On a white plotting background ■#FFFFFF, choose four sufficiently dark colors from blue, orange, green, and violet families. Varying hue (the basic color family) helps distinguish the lines, while a meaningful difference in brightness from the background makes each line easier to locate. The colors themselves can still have similar lightness, so some users or displays may make them difficult to tell apart. Give each series a distinct line pattern and marker shape as well.

A four-series palette for search, social, advertising, and email

The following HEX values (hexadecimal color codes) are examples for lines drawn against white ■#FFFFFF. Each stated contrast ratio compares the series line with that white background. All four exceed the 3:1 guideline for essential graphical information.

• Search: Medium-deep blue ■#1668A4, a solid line with circular markers. Its contrast against white is approximately 5.91:1.
• Social media (SNS): Muted orange ■#AC4E13, long dashes with square markers. The contrast is approximately 5.45:1.
• Advertising: Deep green ■#14775F, short dashes with triangle markers. The contrast is approximately 5.48:1.
• Email: Violet ■#7543A3, a dash-dot line with diamond markers. The contrast is approximately 6.80:1.

Very thin strokes can appear faint after rendering, so try a line width of around 3px as an initial design choice and ensure the marker shapes remain recognizable. The legend (the key explaining which series each line represents) should include words such as “Search — solid line, circle.” Also label the final points directly: “Search 48,” “Social 55,” “Advertising 50,” and “Email 40.” This reduces the need to look repeatedly between a distant legend and a line. Use dark-gray label text ■#1F2937 against white ■#FFFFFF; the text contrast is approximately 14.68:1. There is no need to render small labels in the exact colors of the lines.

Here are the fictional values behind the chart. Each acquisition channel uses the same unit, and the accessible data table makes the exact numbers available even when a graph cannot be interpreted visually.

On Tuesday, social media records 38 registrations and advertising records 40, so the two lines come close together and may cross between days. Keep the square and triangle markers visible near the crossing. When a point is selected, identify it in words, for example “Tuesday, Social media: 38 people” or “Tuesday, Advertising: 40 people.”

Check intersections, guide lines, and small-screen interactions

Although both line colors contrast well with white, the orange used for social media ■#AC4E13 and the green used for advertising ■#14775F have only about 1.01:1 contrast against each other. Lightness differences alone will not distinguish them at an intersection. Retain the different dash patterns, marker shapes, and direct labels, and consider allowing people to examine one named series at a time. When a series is selected, announce the series name and value in text.

If the chart uses very light-gray grid lines ■#E5E7EB, their contrast against white ■#FFFFFF is only about 1.24:1. This can be an example of decorative guides when tick labels and a data table already provide the values without relying on the grid. If a reference line is essential for interpreting positions, use a stronger gray ■#6B7280 or another sufficiently contrasting treatment. This example gray has about 4.83:1 contrast against white ■#FFFFFF.

Slate-colored axis numbers ■#475569 have approximately 7.58:1 contrast on white ■#FFFFFF. For keyboard-operated legend controls, a dark-teal focus outline ■#0F766E can indicate which control currently receives keyboard input; its contrast against white ■#FFFFFF is about 5.47:1. On smaller screens, final-point labels may overlap. Offset them with leader lines or replace crowded labels with a clearly named series-and-value list. Never make hovering a mouse the only way to read the numbers.

HueRoll lets you select a color from a HEX code and check its contrast against white or black. It cannot compare arbitrary pairs of custom colors or automatically judge WCAG AA or AAA compliance. The line, text, and grid color ratios in this example were calculated separately. Finally, review the actual line widths and screen sizes to confirm that all four series remain distinguishable without relying on color alone.