Chart Patterns

title: "Chart Patterns — Designing Accessible Chart Elements" description: "Learn how to design accessible chart elements including labels, patterns, legends, and typography that all users can read and understand." weight: 6 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

Accessible charts use clear labels, patterns, high-contrast colors, and proper typography so users with low vision and cognitive disabilities can understand them.

## What You'll Learn

How to design chart elements for accessibility including labels, legends, patterns, and contrast.

## Why It Matters

A chart that relies solely on color to convey meaning is inaccessible to color-blind users and users with low vision.

## Real-World Use

A bar chart uses both color and cross-hatch patterns to distinguish data series. Labels are directly on the bars, not in a distant legend. The chart meets 3:1 contrast for non-text elements.

## Chart Design

```html
<svg role="img" aria-label="Product sales by region"
     viewBox="0 0 500 300">
  <!-- Accessible patterns instead of color alone -->
  <defs>
    <pattern id="solid" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="#4a90d9"/>
    </pattern>
    <pattern id="striped" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="#d94a4a"/>
      <line x1="0" y1="0" x2="10" y2="10" stroke="#fff" stroke-width="2"/>
    </pattern>
    <pattern id="dotted" width="10" height="10" patternUnits="userSpaceOnUse">
      <rect width="10" height="10" fill="#4ad94a"/>
      <circle cx="5" cy="5" r="2" fill="#fff"/>
    </pattern>
  </defs>

  <!-- Chart bars with patterns -->
  <rect x="50" y="100" width="80" height="120" fill="url(#solid)"/>
  <rect x="160" y="60" width="80" height="160" fill="url(#striped)"/>
  <rect x="270" y="130" width="80" height="90" fill="url(#dotted)"/>
</svg>

Legend Design

<dl aria-label="Chart legend">
  <div>
    <dt><span style="display:inline-block;width:1em;height:1em;background:#4a90d9;" aria-hidden="true"></span> North America</dt>
    <dd>$1.2M</dd>
  </div>
  <div>
    <dt><span style="display:inline-block;width:1em;height:1em;background:#d94a4a;border:2px dashed #fff;" aria-hidden="true"></span> Europe</dt>
    <dd>$1.5M</dd>
  </div>
</dl>

Common Mistakes

1. Color-only differentiation

Use patterns, shapes, or labels in addition to color to distinguish data series.

2. Low contrast labels

Text labels in charts must meet 4.5:1 contrast ratio against the background.

3. Legend far from chart

Place the legend adjacent to the chart. A distant legend is hard to reference.

4. Direct labels missing

Label data points directly instead of relying solely on a legend.

5. Tiny font sizes

Chart labels should be at least 12px for readability.

Practice Questions

1. Why should charts use patterns in addition to color? Color-blind users cannot distinguish some color combinations. Patterns provide an alternative.

2. What is the minimum contrast ratio for chart text? 4.5:1 for small text, 3:1 for large text (18px+).

3. Where should chart labels be placed? Directly on or near data points rather than in a distant legend.

Challenge: Design a chart that uses three patterns (solid, striped, dotted) plus different colors to distinguish data series.

FAQ

Mini Project

Create a bar chart that uses both color and patterns, direct data labels, a clear legend, and meets contrast requirements.

What's Next

Learn about Color in Charts and how to choose accessible color palettes for data visualization.