Add separating strokes between same-colored categories
For charts that group multiple categories with one shared color, use separating strokes on adjacent or overlapping marks to improve readability and mitigate lost boundaries for readers tracking individual categories.
- purpose:refine
- basis:heuristic
- lever:encoding
- group-cardinality:many
- quality:readability:use
- polish:hierarchy
advice
Outline same-colored marks
Add visible strokes between categories that share the same color. For example, draw white outlines around same-colored treemap cells or around overlapping same-colored lines so readers can still follow the individual categories inside each color group.
reason
Restore boundaries without adding more colors
Shared color can communicate a higher-level grouping, but it also makes neighboring categories blend together. A contrasting stroke restores the boundaries so readers can track the smaller units without breaking the color grouping.
Mechanism: The outline separates touching or overlapping marks while preserving the shared hue that signals the larger group.
Evidence: The post recommends keeping original categories visible inside same-colored groups by separating them with a stroke and shows examples that use white strokes around same-colored areas and lines (Muth, 2022).
context
Use when shared color hides category boundaries
- User Goal: Reduce the number of colors while keeping individual categories visible.
- Task: Let readers follow categories inside a higher-level color group.
- Data: Many categories are present within grouped totals.
- Chart Setting: Same-colored marks touch, overlap, or sit directly adjacent to one another.
- Audience: Readers trying to trace individual categories through the grouped display.
- Success Criterion: Shared-color groups stay readable as both groups and individual categories.
exceptions
Do not use when categories are already clearly separated
Break it when: Categories already have distinct colors or do not touch or overlap. Why: The stroke is solving a boundary problem that is not present.
costs
Accept a little extra visual structure
Sacrifice: The chart gains an additional visible styling layer. Risk: Heavy strokes can compete with the data if overused. Mitigation: Keep the stroke strong enough to separate boundaries without making it the main visual feature.
mistakes
Avoid same-color grouping without boundaries
Mistake: Giving several touching categories the same color without any separating stroke. Why it fails: The categories merge visually and become hard to follow.
check
Hide the stroke to see whether it is needed
Failure Sign: Adjacent or overlapping same-colored marks blend together. Quick Check: Temporarily remove the stroke and see whether the categories become harder to trace. Stronger Test: Inspect the places where same-colored marks touch or overlap and confirm that each category boundary remains visible.
fix
Add the boundary treatment
- Add a contrasting stroke between adjacent same-colored categories.
- Outline overlapping same-colored lines so each line can still be followed.
- Keep the shared color for the higher-level grouping instead of adding more hues.