How to Choose Colors That Make Charts Easy to Read on Dark-Themed Dashboards

On a dark-themed dashboard, choosing bright lines for a chart is not enough if the axis labels, target markers, or selected values are difficult to see. Dark layouts need different brightness levels for the data, the text, and the supporting guides. Using a customer-support dashboard as an example, this article explains how to compare actual results with a target and verify the color choices in the finished interface.

Check chart graphics and text against their own requirements

Imagine an interface with a dark navy page background ■#0B1220 and a slightly lighter navy chart panel ■#182335. A near-white heading ■#F1F5F9 has approximately 14.41:1 contrast against the panel. Light-gray axis numbers ■#CBD5E1 have about 10.63:1, whereas darker gray ■#475569 achieves only about 2.08:1. The last choice is inadequate for small axis labels, even though it may seem suitably subtle for a dark theme.

A contrast ratio describes the difference in relative luminance between adjacent colors. WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for accessible web content) generally requires at least 4.5:1 for normal-sized text at Level AA, or 3:1 for qualifying large text. Parts of graphics that are necessary for understanding the data, such as essential chart lines, generally need at least 3:1 against adjacent background colors. Assess labels and graphical elements separately rather than relying on how bright the chart looks overall.

Example: daily support resolutions compared with a target

Suppose a dashboard plots the number of support requests resolved on five days: Monday 32, Tuesday 28, Wednesday 41, Thursday 37, and Friday 45. A separate horizontal line marks the daily target of 35. Make the actual results a solid cyan line ■#67E8F9 and the goal a dashed amber line ■#FBBF24. Against the navy chart panel ■#182335, their contrast ratios are approximately 10.89:1 and 9.45:1. Both exceed 3:1 as graphical elements required to interpret the results.

However, the cyan ■#67E8F9 and amber ■#FBBF24 differ from each other by only about 1.15:1. At an intersection, color alone may not make the two lines easy to distinguish. Add circular markers to the actual series, keep the target dashed, and label it directly as “Target: 35.” In the legend (the key explaining what each series represents), write “Resolved requests — solid line” and “Target — dashed line.” Keep the five daily values available as text or in a data table, so readers do not have to identify colors to obtain the numbers.

A muted blue-gray ■#334155 can be used for optional grid lines, but it has only about 1.52:1 contrast with the chart background ■#182335. Treat these as decorative guides only when the axis labels, point values, and an accompanying table convey the data without them. If interpreting the chart depends on a particular grid or reference line, use a brighter gray ■#94A3B8 or another sufficiently contrasting treatment. This example gray has approximately 6.15:1 contrast against the navy panel ■#182335. Important guides should stand out while purely decorative lines stay restrained.

Verify tooltips, keyboard access, and mobile layouts

For a tooltip (the small information panel shown when a data point is selected), near-white text ■#F8FAFC on a blue-gray surface ■#334155 has approximately 9.90:1 contrast. The tooltip surface ■#334155 itself differs from the chart panel ■#182335 by only about 1.52:1. If a visible boundary is important, outline it with light gray ■#94A3B8. That outline provides about 4.04:1 contrast with the tooltip interior ■#334155 and 6.15:1 with the surrounding chart panel ■#182335.

Do not make the figures available only when someone hovers with a mouse. Let keyboard users and people tapping on a phone access values too. An active point can be described in words, such as “Wednesday: 41 resolved; target: 35,” and the exact figures should remain in a table. On narrower screens, check that legends and axis labels do not overlap and that line thickness, circular markers, and required contrast remain adequate. Use more than a color difference to identify the two series.

HueRoll lets you enter a HEX code (a hexadecimal color value), select a color, and check its contrast against white or black. It cannot compare arbitrary color pairs, automatically determine WCAG AA or AAA passes or failures, or evaluate a whole chart. The ratios between the chart lines and the navy background in this example were calculated separately. Finally, inspect the text, lines, and interaction states in the actual dark-themed interface.