Color In Charts

title: "Color in Charts — Accessible Color Palettes for Data Visualization" description: "Learn how to choose accessible color palettes for charts that work for color-blind users and maintain sufficient contrast for all users." weight: 7 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

Accessible chart colors use color-blind friendly palettes, sufficient contrast, and redundant encoding (patterns, labels) to convey information to all users.

## What You'll Learn

How to choose color palettes that work for users with color vision deficiencies and meet WCAG contrast requirements.

## Why It Matters

8% of men have some form of color blindness. Red-green color blindness is the most common. Charts using only red and green are unreadable for these users.

## Real-World Use

A line chart shows three data series using a blue-orange-teal palette (color-blind friendly). Each line also has a distinct dash pattern. The chart is understandable even in grayscale.

## Color-Blind Friendly Palettes

```css
/* Color-blind friendly palette */
.color-blind-safe {
  /* Blue / Orange / Teal / Dark Blue */
  --c1: #0077BB;
  --c2: #EE7733;
  --c3: #009988;
  --c4: #004488;
}

Contrast Requirements

<svg role="img" aria-label="Chart with accessible colors"
     viewBox="0 0 400 200">
  <!-- These colors meet 3:1 contrast against white background -->
  <rect x="20" y="120" width="80" height="60" fill="#0077BB"/>
  <rect x="120" y="80" width="80" height="100" fill="#EE7733"/>
  <rect x="220" y="60" width="80" height="120" fill="#009988"/>
</svg>

Color Test

// Check color contrast
function getContrastRatio(hex1, hex2) {
  const lum1 = getLuminance(hex1);
  const lum2 = getLuminance(hex2);
  const lighter = Math.max(lum1, lum2);
  const darker = Math.min(lum1, lum2);
  return (lighter + 0.05) / (darker + 0.05);
}

Common Mistakes

1. Red/green color coding

Avoid using red and green as the only differentiators. Use blue/orange instead.

2. Low contrast between data and background

Ensure chart elements have at least 3:1 contrast against the background.

3. Color as the only encoding

Always add patterns, labels, or shapes in addition to color.

4. Not testing in grayscale

Test charts in grayscale to verify they are understandable without color.

5. Assuming all users see color the same way

Color perception varies. Design for the widest range of users.

Practice Questions

1. What percentage of men have color blindness? Approximately 8% of men have some form of color vision deficiency.

2. What is the best color palette for accessibility? Blue-orange-teal palettes work better than red-green for color-blind users.

3. How do you test if a chart works without color? View the chart in grayscale. If data series are distinguishable, the chart works without color.

Challenge: Create a chart using the blue-orange-teal palette with additional pattern differentiation. Test in grayscale.

FAQ

Mini Project

Create a multi-series line chart using a color-blind friendly palette. Add dash patterns to each line. Test with color blindness simulation tools.

What's Next

Learn about Focusable SVG Elements and how to make interactive SVG elements keyboard accessible.