Order categorical color-key items to match the chart's reading order

Order categorical color-key items in the same sequence that readers encounter the colors in the chart. For example, when colored elements have the same visual weight and readers scan left to right, put the color from the chart’s top-left reading position first in the key.

A reader usually tries to identify the first color they see in the chart. When the key follows the same reading order, the eye does less back-and-forth searching.

Mechanism: Shared order between chart and key shortens the search path for color-to-category lookup.

Evidence: The post recommends placing colors in the same order in both chart and key so readers can identify what the first seen color represents, while explicitly limiting that advice to cases where the colored elements are the same size. (Muth, 2023)

• User Goal: Match a visible color in the chart to its category quickly.
• Data: Categorical color encoding.
• Chart Setting: Colored elements have equal visual weight and no natural category order.
• Audience: Readers scan the chart in a left-to-right reading pattern.
• Success Criterion: The first colors encountered in the chart appear first in the key.

• Break it when: The categories already have a natural order. Why: The inherent sequence should control the key instead.
• Break it when: The colored elements differ strongly in size. Why: A largest-first order can be easier to scan than spatial order.

Sacrifice: You may give up alphabetical or arbitrary key order.
Risk: This rule becomes misleading when semantic order or size order matters more than spatial order.
Mitigation: Switch to the stronger order when categories are inherently ordered or differ in size.

Mistake: Use a key order that is unrelated to the chart’s reading sequence when marks have equal visual weight. Why it fails: Readers must bounce between chart and key to find the first colors they see.

Failure Sign: The first item in the key does not correspond to the first color readers are likely to encounter in the chart.
Quick Check: Trace the chart from the top-left reading position and see whether the key follows the same sequence.
Stronger Test: Compare the current key against a reordered version that mirrors chart order and see which one supports faster lookup.

• Reorder the key items to match the chart’s reading sequence.
• Put the earliest encountered chart color first in the key.
• If a natural category order or strong size differences are present, stop using chart order and switch to that stronger sequence.