Use lighter more opaque-looking colors for larger quantities on dark backgrounds when the colormap appears to vary in opacity
For quantitative comparison on dark-background colormaps, use light-more scale order on color scales that appear to vary in opacity to improve reading speed and mitigate high-end misreading for viewers interpreting magnitude from color.
- purpose:refine
- basis:empirical
- quality:readability:use
- lever:scale-order
- channel:opacity:use
- channel:color-lightness:use
advice
Align high values with the light opaque end
Assign larger quantities to the lighter, more opaque-looking end of the scale when a dark background makes the colormap look like a color fading in from that background. For example, on a black background, put the light or saturated endpoint that looks most opaque at the high-value end of a background-interpolated colormap.
reason
Why light-more works on dark opacity-varying backgrounds
On a dark background, the lighter end can become the more opaque-looking end. When opacity variation is strong, readers follow the opaque-is-more cue, which can cancel or even override dark-is-more.
Mechanism: Matching the legend to the more opaque-looking endpoint reduces conflict between what the chart appears to show and what the legend says high values mean.
Evidence: For colormaps that appeared to vary in opacity, participants were faster with light-more encoding on dark backgrounds, where the lighter colors were the more opaque-looking colors. (Schloss et al., 2019)
context
Use when the dark background creates opacity steps
- User Goal: Judge which areas represent larger quantities from a colormap and legend.
- Data: Quantitative values encoded with a sequential colormap.
- Chart Setting: A dark background is fixed, and the scale looks like a high-contrast endpoint interpolated with that background.
- Audience: Viewers reading magnitude from color with the help of a legend.
- Success Criterion: Faster interpretation of the larger-value end of the scale.
exceptions
Do not use when the scale does not look translucent
Break it when: The dark background does not make the scale appear to vary in opacity. Why: Then the paper does not support switching to light-more; dark-is-more remains the dominant mapping when opacity cues are absent.
costs
Tradeoffs of using the light opaque end as high
Sacrifice: This mapping is less portable to light backgrounds. Risk: Applying light-more to a dark background without an opacity cue can work against the usual dark-is-more bias. Mitigation: Confirm that the scale actually reads as fading in from the dark background before reversing the high end.
mistakes
Common failure mode
Mistake: Keeping dark-more ordering on a dark background even though the scale visibly looks like a lighter foreground emerging from that background. Why it fails: The darker end then looks less opaque and conflicts with the opaque-is-more bias.
check
How to test the mapping
Failure Sign: On a dark background, the chart feels slower to read when the darker end is labeled as larger. Quick Check: If the scale looks like one color gradually appearing over the dark background, assign the high end to the lightest most opaque-looking endpoint. Stronger Test: Compare dark-more and light-more versions on the same dark background and keep the faster-read version.
fix
What to change
- Put the dark background-matching endpoint at the low end of the legend.
- Assign the most background-contrasting light endpoint to the high end of the legend.
- Keep the background fixed if the design depends on the scale reading as opacity variation.