Making charts that work in dark mode

Charts get embedded in dark dashboards, dark docs and dark social feeds, and most of them were designed on white. Inverting the colours is not enough, because colour behaves differently on dark backgrounds.

Saturation reads stronger on dark

A vivid red that looks confident on white becomes aggressive and slightly blurry on near-black. Pull saturation down and lightness up for dark themes; the perceived intensity stays the same.

Avoid pure black and pure white

Pure white text on pure black causes halation, especially at small label sizes. Near-black backgrounds around #10151b with off-white text are noticeably easier to read for the same contrast ratio.

Gridlines need to be quieter

A gridline at 10% white on dark carries the same visual weight as 15% black on light. Gridlines copied straight from a light theme dominate a dark chart.

Export with the background baked in

A transparent PNG designed for dark mode becomes unreadable the moment someone drops it into a white document. Export with the background you designed for, or export both.

The practical approach is two palettes sharing one meaning: same green for profit, different tone per theme, so the chart reads identically in either place.