Skip to content

Data-visualization color roles

Preview Available in release assets

Provide theme-complete semantic categorical and directional data-color roles without coupling visualization meaning to a specific palette.

Data-visualization color roles primary example

Show code
<figure class="thin-data-colors" aria-labelledby="data-color-title">
  <h1 id="data-color-title">Requests by service</h1>
  <ul aria-label="Chart legend">
    <li data-data-series="1" data-data-symbol="●">Gateway — 48%</li>
    <li data-data-series="2" data-data-symbol="■">Catalog — 31%</li>
    <li data-data-series="3" data-data-symbol="▲">Preview — 21%</li>
  </ul>
  <svg viewBox="0 0 300 120" role="img" aria-labelledby="data-chart-svg-title data-chart-svg-desc">
    <title id="data-chart-svg-title">Requests by service</title>
    <desc id="data-chart-svg-desc">Gateway 48%, Catalog 31%, Preview 21%. Series also use circle, square, and triangle identities.</desc>
    <circle data-data-series="1" cx="60" cy="60" r="45">
    </circle>
    <rect data-data-series="2" x="120" y="30" width="60" height="60">
    </rect>
    <path data-data-series="3" d="M240 20 285 100 195 100Z">
    </path>
  </svg>
  <figcaption>Color supplements visible labels, values, and distinct symbols; it never carries series or positive/negative meaning alone.</figcaption>
</figure>

Anatomy

  • Six categorical roles
  • Positive/negative/neutral roles
  • Public data-color pattern hook
  • Visible legend labels and values
  • Non-color symbols or patterns

Variants and sizes

  • Categorical series
  • Directional change
  • Light theme
  • Dark theme
  • High contrast

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • All themes
  • Forced colors
  • Monochrome print
  • Color-vision deficiency
  • Long labels
  • RTL

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

No JavaScript interaction is owned. Server-rendered charts and tables choose stable series roles; client chart engines are not part of this foundation.

Accessibility

Never encode a category, value, status, or direction with color alone. Pair every role with text, direct labels, symbols, line styles, shapes, or patterns. Test adjacent fills and marks against their actual surfaces; text placed on a data color must independently meet text contrast. Provide a summary and equivalent data table for charts.

Contract
PLATFORM
Basis
Native CSS layout and document defaults over semantic HTML; no APG widget

API

Use --thin-data-1 through --thin-data-6 for categorical series and --thin-data-positive|negative|neutral for direction. .thin-data-colors maps data-data-series=1|2|3|4|5|6 and data-data-direction=positive|negative|neutral to those roles. Add data-data-symbol or an equivalent visible non-color cue. Never introduce data-pattern.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without theme or pattern CSS, labels, values, symbols, SVG descriptions, summaries, and semantic tables retain all information.

Assets and dependencies

  • /themes.css
  • /patterns/data-colors.css

Dependencies: None

Source: packages/ui/src/items/data-colors/style.ts