Map low values to light colors and high values to dark colors
For magnitude encoding with sequential color scales, use light-to-dark ordering on the palette to improve fidelity and mitigate reversed value interpretation for readers.
- purpose:refine
- basis:heuristic
- data:quantitative
- quality:fidelity
- lever:scale-order
- channel:color-lightness:use
- aesthetic:color:use
advice
Sequential scale order
Order a sequential gradient so lighter colors represent lower values and darker colors represent higher values. For example, reverse a map or heat-style palette if darker colors currently indicate smaller numbers.
reason
Why light-to-dark ordering feels intuitive
Readers tend to read darker colors as more and lighter colors as less, so reversing that order adds avoidable interpretation friction.
Mechanism: Matching low-to-high values with light-to-dark lightness lets readers infer scale direction quickly from color alone.
Evidence: The post explicitly recommends that in color gradients bright colors represent low values while dark colors represent high values because this is most intuitive for most readers (https://www.datawrapper.de/blog/colors">Muth, 2018).
context
When to use light-to-dark ordering
- User Goal: Read ordered values from color.
- Data: Quantitative values are encoded by a sequential gradient.
- Chart Setting: A legend or scale communicates low-to-high magnitude.
- Success Criterion: Readers can infer which colors mean lower and higher values without hesitation.
exceptions
When not to use this ordering rule
Break it when: Color is encoding categories instead of low-to-high values. Why: The rule applies to ordered gradients, not category palettes.
costs
Tradeoffs of light-to-dark ordering
Sacrifice: An existing branded palette may need to be reversed or replaced. Risk: If the legend order is unclear, readers can still misread the scale. Mitigation: Keep the legend endpoints explicit when you reverse the palette.
mistakes
Common sequential-scale mistake
Mistake: Mapping low values to dark colors and high values to light colors. Why it fails: The scale fights the more intuitive reading of dark as more and light as less.
check
How to check sequential scale order
Failure Sign: The darkest color in the legend is attached to the smallest value. Quick Check: Read the low and high legend labels and compare them to the lightest and darkest colors. Stronger Test: Ask whether a reader could infer the correct direction of the scale from color alone.
fix
How to fix reversed sequential scales
- Reverse the gradient so low values are light.
- Keep high values at the dark end of the palette.
- Update the legend so the labels match the corrected lightness order.