Accessible Charts: How to Design for Colorblind Users

8% of men and 0.5% of women are colorblind.

That means 1 in 12 males can't distinguish your red and green lines.

Your boss might be colorblind. Your client. Your professor.

If your chart only uses color to differentiate data, you're excluding millions of people.

Here's how to make your charts accessible to everyone—including the colorblind.

Why This Matters

The Business Case

Scenario: You present sales data with red (declining) and green (growing) lines.

Your colorblind boss sees: Two identical gray lines.

Result: Confusion, wasted time, reduced credibility.

The Accessibility Case

Web Content Accessibility Guidelines (WCAG):

Requires sufficient color contrast and not relying solely on color to convey information.

Many organizations (government, education, healthcare) must meet WCAG standards.

Even if not required: It's the right thing to do.

The Numbers

Colorblindness types:

• Red-green (most common): 8% of males, 0.5% of females
• Blue-yellow (rare): 0.01% of population
• Complete (very rare): < 0.01%

In a room of 25 people: Statistically, 1-2 are colorblind.

The Solution: Don't Rely on Color Alone

Principle: Redundant Encoding

Bad: Color is the ONLY way to distinguish data

Good: Color PLUS something else (pattern, shape, label)

Example:

Bad line chart:

• Red line (Group A)
• Green line (Group B)
• Colorblind sees: Two gray lines

Good line chart:

• Red SOLID line (Group A)
• Green DASHED line (Group B)
• Colorblind sees: Solid vs dashed (clear!)

Colorblind-Safe Color Palettes

Palette #1: Blue & Orange

Colors:

• Blue: #0173B2
• Orange: #DE8F05

Why it works:

• High contrast
• Distinguishable by all colorblind types
• Professional appearance

Use for: Two-category comparisons

Palette #2: Multi-Color Safe

For 4+ categories:

• Blue: #0173B2
• Orange: #DE8F05
• Green: #029E73
• Red: #CC78BC
• Yellow: #ECE133
• Purple: #56B4E9

These colors avoid red-green confusion

Source: ColorBrewer (colorbrewer2.org)

Palette #3: Grayscale (Universal)

When printing in black & white:

• Black: #000000
• Dark gray: #404040
• Medium gray: #808080
• Light gray: #C0C0C0

Plus patterns (solid, striped, dotted)

Why it works: Accessible to everyone, including total colorblindness

Design Strategies by Chart Type

Line Charts

Strategy: Different line styles + color

Good practices:

• ✅ Solid, dashed, dotted, dash-dot lines
• ✅ Different line thicknesses
• ✅ Different point markers (●, ▲, ■)

Bar Charts

Strategy: Patterns + color

Good practices:

• ✅ Solid fill, striped, dotted, crosshatch
• ✅ Direct labels on bars (best!)
• ✅ High contrast colors

Even better: Label each bar directly (no legend needed)

Pie Charts

Strategy: Labels + patterns

Good practices:

• ✅ Label each slice directly (not just legend)
• ✅ Use patterns for additional distinction
• ✅ High contrast between adjacent slices

Or: Use bar chart instead (easier to distinguish)

Heatmaps

Strategy: Use colorblind-safe sequential palette

Good palettes:

• Blue to yellow: Works for red-green colorblindness
• Purple to green: Alternative
• Single hue (light blue to dark blue)

Avoid:

• ❌ Red to green (classic colorblind problem)
• ❌ Rainbow palettes (multiple colorblind issues)

Best: Use diverging palette (blue-white-orange) with clear midpoint

Tools & Testing

Test Your Charts for Colorblindness

Online simulators:

• Coblis (Color Blindness Simulator): coblis.com
• Toptal Color Blind Filter: toptal.com/designers/colorfilter

How to use:

1. Create chart
2. Take screenshot
3. Upload to simulator
4. View in different colorblind modes
5. Verify you can still distinguish all elements

Takes: 2 minutes

Built-In Colorblind Modes

macOS:

• System Preferences → Accessibility → Display → Color Filters
• Enable "Protanopia" or "Deuteranopia"

Windows:

• Settings → Ease of Access → Color filters

Test your charts in these modes

Quick Accessibility Checklist

✅ Don't rely on color alone - Use patterns, shapes, or labels too

✅ High contrast - Light colors vs dark colors, not light vs lighter

✅ Direct labels - Label lines/bars directly when possible (not just legend)

✅ Safe color combinations:

• ✅ Blue + Orange
• ✅ Blue + Yellow
• ❌ Red + Green
• ❌ Blue + Purple
• ❌ Red + Brown

✅ Test in colorblind mode - Use simulators or OS color filters

✅ Works in grayscale? - Print test page in B&W—still distinguishable?

Common Mistakes

Mistake #1: Red & Green Together

Example: Profit (green) vs Loss (red)

Problem: Most common colorblind type can't distinguish

Fix:

• Green (solid) vs Red (dashed)
• Or use Blue vs Orange instead

Mistake #2: Subtle Color Differences

Example: Light blue, medium blue, dark blue for 3 categories

Problem: Hard for everyone, impossible for some colorblind types

Fix: Use completely different colors OR add patterns

Mistake #3: Color-Only Legends

Example: Legend with just colored squares, no other distinction

Problem: Colorblind can't match legend to chart

Fix: Add patterns or direct labels

The Takeaway

Making charts accessible to colorblind users makes them better for everyone.

Key principles:

1. Color + Pattern/Shape - Redundant encoding
2. High contrast - Not subtle differences
3. Direct labels - Best accessibility solution
4. Safe color combos - Blue/orange, not red/green
5. Test - Use colorblind simulators

Time investment: 2 extra minutes

Benefit: Inclusive, professional, clear communication

Resources

Color palette generators:

• ColorBrewer 2.0: colorbrewer2.org
• Coolors: coolors.co/generate
• Adobe Color: color.adobe.com

Colorblind simulators:

• Coblis: color-blindness.com/coblis-color-blindness-simulator/
• Toptal: toptal.com/designers/colorfilter

Guidelines:

• WCAG 2.1: w3.org/WAI/WCAG21/quickref/
• A11y Project: a11yproject.com