Short answer
Usually, yes. A palette tuned for white loses its darkest colours against a dark background and gains glare from its brightest ones, so contrast against the background reverses: dark blues that pass 3:1 on white can fail on near-black, and pale yellows that fail on white pass easily. Keep the same hues so series keep their identity, but adjust lightness per mode, reverse sequential ramps if needed, and recheck every series and gridline against the actual chart background.
WCAG's contrast ratio is symmetric in the two colours, so a mark's contrast depends entirely on what it sits on. The table measures the Okabe–Ito palette on white and on #121212, a common dark surface. On white, the pale yellow, orange and sky blue fall below the 3:1 that WCAG 1.4.11 asks of graphical objects needed to understand a chart; on the dark surface they are among the strongest colours, while the dark blue drops towards the threshold. No single palette is optimal for both. A dark-mode chart palette is therefore not a separate set of colours but the same hues at adjusted lightness: lift dark colours, and optionally soften the very lightest ones so they do not glare against the dark background.
On a white page, dark means 'more' because dark marks stand out. On a dark page, bright marks stand out, so a light-to-dark ramp shown unchanged makes the highest values the least visible. Most dark-mode heatmaps and choropleths therefore run from a colour near the background (low) to a bright colour (high). Viridis-type maps work in both modes without change because their ends are dark purple and bright yellow — which end matches the background decides which values recede. The choice should be deliberate and documented, since a reader switching modes may otherwise see the map's meaning appear to invert.
Chart furniture is easy to overlook. Light-grey gridlines inverted naively become bright lines that compete with the data; they should be a dark grey only slightly lighter than the background. Axis labels are text and need text contrast (4.5:1 for normal size). Very saturated colours on a dark background can appear to glow or vibrate, especially thin lines in pure red or blue; slightly desaturated, lighter versions read better. Material Design's dark-theme guidance applies the same idea to interface surfaces, preferring dark grey to pure black so that shadows and elevation still read. Tooltips and annotations need their own backgrounds checked, because a tooltip styled for light mode can end up as light text on a light box.
A reader who flips between modes, or sees a screenshot of the other mode, should recognise each series. That argues for changing lightness and chroma while holding hue: the 'blue' series stays recognisably blue in both. Define chart colours as tokens with a light-mode and dark-mode value rather than as literal hex codes scattered through chart code, so both versions are reviewed together. Test the dark palette through the same colour-vision checks as the light one; lifting colours towards lightness compresses their range, and pairs that were distinct at mid lightness can converge near the top.
Exporting a dark-mode chart for a light document (a slide, a PDF) is a common way for the wrong palette to escape. Export charts in the mode of their destination.
| Colour | On white #FFFFFF | On dark #121212 |
|---|---|---|
| Orange #E69F00 | 2.25:1 fail | 8.31:1 pass |
| Sky blue #56B4E9 | 2.30:1 fail | 8.11:1 pass |
| Bluish green #009E73 | 3.42:1 pass | 5.47:1 pass |
| Yellow #F0E442 | 1.32:1 fail | 14.16:1 pass |
| Blue #0072B2 | 5.18:1 pass | 3.61:1 pass |
| Vermilion #D55E00 | 3.86:1 pass | 4.84:1 pass |
| Reddish purple #CC79A7 | 3.06:1 pass | 6.12:1 pass |
Why: The palette was tuned for a white background.
Fix: Lift that colour's lightness for the dark theme while keeping its hue.
Why: Light-mode grid colours were inverted rather than redesigned.
Fix: Use a dark grey only a little lighter than the background.
Why: A light-to-dark ramp was reused on a dark background.
Fix: Reverse the ramp for dark mode so high values are bright.
Each statement is labelled by kind — established fact, a standard’s requirement, observed market data, a convention, or Colourwise’s own interpretation or analysis — with the strength of the evidence behind it.
Colourwise analysisStrong evidence
Several Okabe–Ito colours fall below 3:1 against white but pass against a #121212 dark surface, while the palette's dark blue is close to the 3:1 threshold on that dark surface.
Based on: Computed by Colourwise with the WCAG 2.2 contrast formula; see the table.
Source: Web Content Accessibility Guidelines (WCAG) 2.2; Color Universal Design (CUD) — How to make figures and presentations that are friendly to colorblind people
StandardStrong evidence
Understanding WCAG 1.4.11 states that chart elements need 3:1 against adjacent colours only where they are required to understand the content; if the same information is available in visible labels or values, the graphical elements themselves need not meet 3:1.
Source: Understanding Success Criterion 1.4.11: Non-text Contrast (WCAG 2.2); Web Content Accessibility Guidelines (WCAG) 2.2
ConventionModerate evidence
Material's dark theme uses dark grey rather than black surfaces, partly so that shadows and elevation remain visible.
Reviewed 29 September 2026. Colourwise summarises its sources in its own words and does not reproduce standards text or proprietary colour data. Spotted an error? Tell us.