UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Typography Color Accessibility

Chart Accessibility Encoding

Chart Accessibility Encoding turns a frequent interface judgment into an executable constraint before generation.

chartsaccessibilitycolor

Design Principle

Charts cannot rely on color alone; categories and states need text, shape, line style, or direct labels.

Principle Charts cannot rely on color alone; categories and states need text, shape, line style, or direct labels.

Design action Give each series direct labels, distinct line styles/symbols, or text states; keep legends close and high-contrast.

Examples Positive example: Multi-series lines, status distributions, maps, and heatmaps inform decisions rather than decorate. Counterexample: Red and green lines differ only by color.

Apply when Multi-series lines, status distributions, maps, and heatmaps inform decisions rather than decorate. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems.

Agent Directive

Give each series direct labels, distinct line styles/symbols, or text states; keep legends close and high-contrast.

Apply When

  • Multi-series lines, status distributions, maps, and heatmaps inform decisions rather than decorate.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Red and green lines differ only by color.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Typography Color Accessibility
Quality
86%
Version
v1
Published
6/6/2026