Keep meaningful chart elements visually separable

Preserve visible separation between primary marks and text. For example, add at least 1px white space between touching stacked-bar segments or pie slices, and reposition overlapping points or labels when they obscure the elements readers must distinguish.

When adjacent marks touch or overlap, readers can lose the boundary between one meaningful element and the next. Visible spacing and unobscured text restore figure-ground separation so required chart elements can be perceived as distinct parts.

Mechanism: Separating adjacent marks and keeping text clear prevents visually merged elements, so readers can distinguish the content that carries meaning.

Evidence: Chartability defines this perceivable check as keeping primary chart elements from being obscured, requiring at least 1px white space between adjacent touching elements, and preventing any text from being obscured or overlapped. The linked distinguishability guidance frames the goal as making foreground content separable, and the linked chart examples show added white space to separate overlapping marks (Elavsky et al., 2022; W3C, n.d.; Contrast and No Use of Colour Alone in Scatterplots – Observable, n.d.).

Notes: This guideline is about distinguishability, not only contrast.

• User Goal: Distinguish one chart element from another and read all visible text.
• Data: Adjacent categories or overlapping marks where separability is required to understand the chart.
• Chart Setting: Charts with touching elements or overlap, such as stacked segments, pie slices, overlapping points, or labels placed near marks.
• Audience: Viewers who rely on visual discrimination of marks and text.
• Success Criterion: Each required element is visibly separate, and no text is covered or unreadable.

Break it when: The chart does not require readers to discriminate or separate the touching or overlapped elements to understand it. Why: The source treats obscuring as a failure only when discriminability or separability is required for understanding.

Sacrifice: Added separation uses space that could otherwise be given to tightly packed marks. Risk: Applying separation indiscriminately can spend room on elements that do not need to be distinguished. Mitigation: Reserve spacing and overlap fixes for primary marks and text whose separation is required to read the chart.

• Mistake: Let touching segments or slices meet edge to edge with no white space. Why it fails: Adjacent elements can merge when readers need to tell them apart.
• Mistake: Place text where marks, lines, or other text overlap it. Why it fails: Any obscured text becomes unreadable.
• Mistake: Layer other chart elements over primary marks. Why it fails: The primary chart elements are no longer clearly distinguishable.

Failure Sign: Adjacent marks visually merge, or text is covered by marks, lines, or other text. Quick Check: Inspect every touching boundary and verify at least 1px white space between adjacent elements such as stacked segments or pie slices, and verify that no text is overlapped. Stronger Test: If understanding the chart requires separating two elements, confirm that each one can be visually distinguished without guessing where one ends and the other begins.

• Add at least 1px white space between adjacent elements that touch.
• Reposition or reorder overlapping marks so primary chart elements are not obscured.
• Move text so no mark, line, or other text overlaps it.
• If the current arrangement still merges required elements, change the layout so the needed elements are visually separable.