brycewang-stanford/color-accessibility-guide

Color Accessibility Guide

Design data visualizations that are accessible to colorblind readers and follow best practices for clarity, using tested palettes and encoding principles.

Color Vision Deficiency Overview

Approximately 8% of males and 0.5% of females have some form of color vision deficiency (CVD). The most common types:

| Type | Prevalence (Male) | Affected Colors | Commonly Confused | |------|-------------------|-----------------|-------------------| | Deuteranomaly (green-weak) | 5% | Green | Red and green | | Protanomaly (red-weak) | 1% | Red | Red and green | | Deuteranopia (no green) | 1% | Green | Red and green | | Protanopia (no red) | 1% | Red | Red and green | | Tritanopia (no blue) | 0.003% | Blue | Blue and yellow | | Monochromacy | Very rare | All | All colors |

Key takeaway: Never rely solely on a red-green distinction to convey information. About 1 in 12 male readers cannot distinguish them.

Recommended Colorblind-Safe Palettes

Qualitative Palettes (Categorical Data)

Wong (2011) Nature Palette (8 colors)

Widely recommended for scientific publications:

# Wong's colorblind-friendly palette
wong_palette = {
    "black":       "#000000",
    "orange":      "#E69F00",
    "sky_blue":    "#56B4E9",
    "bluish_green":"#009E73",
    "yellow":      "#F0E442",
    "blue":        "#0072B2",
    "vermillion":  "#D55E00",
    "reddish_purple":"#CC79A7"
}

Okabe-Ito Palette

okabe_ito = ["#E69F00", "#56B4E9", "#009E73", "#F0E442",
             "#0072B2", "#D55E00", "#CC79A7", "#000000"]

Tol's Qualitative Palette

# Paul Tol's qualitative palette (up to 12 distinct colors)
tol_qualitative = ["#332288", "#88CCEE", "#44AA99", "#117733",
                   "#999933", "#DDCC77", "#CC6677", "#882255",
                   "#AA4499", "#661100", "#6699CC", "#888888"]

Sequential Palettes (Ordered Data)

For continuous data, use perceptually uniform colormaps:

import matplotlib.pyplot as plt

# Recommended sequential colormaps
# These are perceptually uniform and colorblind-safe:
good_cmaps = ["viridis", "plasma", "inferno", "magma", "cividis"]

# Avoid these (not perceptually uniform, not colorblind-safe):
bad_cmaps = ["jet", "rainbow", "hsv"]  # NEVER use these

# Example usage
import numpy as np
data = np.random.randn(10, 10)
fig, ax = plt.subplots(figsize=(8, 6))
im = ax.imshow(data, cmap="viridis")
plt.colorbar(im)
plt.title("Use viridis, not jet")
plt.savefig("heatmap.pdf", dpi=300, bbox_inches="tight")

Diverging Palettes (Data with Meaningful Center)

# Colorblind-safe diverging palettes
# Blue-to-Red via white (good for temperature, correlation)
import matplotlib.colors as mcolors

# Built-in matplotlib options:
diverging_safe = ["RdBu_r", "PuOr_r", "BrBG"]

# Custom two-color diverging (Tol):
tol_diverging = ["#364B9A", "#4A7BB7", "#6EA6CD", "#98CAE1", "#C2E4EF",
                 "#EAECCC", "#FEDA8B", "#FDB366", "#F67E4B", "#DD3D2D", "#A50026"]

Design Principles for Accessible Visualization

1. Data-Ink Ratio

Edward Tufte's principle: maximize the proportion of ink used to display actual data.

import matplotlib.pyplot as plt

fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(12, 5))

# BAD: Low data-ink ratio (chartjunk)
ax1.bar(range(5), [3, 7, 2, 5, 8], color="blue", edgecolor="black",
        linewidth=2)
ax1.set_facecolor("#EEEEEE")
ax1.grid(True, color="white", linewidth=2)
ax1.set_title("Before: Low Data-Ink Ratio")

# GOOD: High data-ink ratio
ax2.bar(range(5), [3, 7, 2, 5, 8], color="#0072B2", edgecolor="none")
ax2.spines["top"].set_visible(False)
ax2.spines["right"].set_visible(False)
ax2.set_title("After: High Data-Ink Ratio")

plt.tight_layout()
plt.savefig("data_ink_ratio.pdf", dpi=300)

2. Redundant Encoding

Never use color as the sole channel for conveying information. Combine color with at least one other visual channel:

| Channel | Examples | |---------|----------| | Shape | Circles, squares, triangles for different groups | | Pattern | Solid, dashed, dotted lines | | Fill pattern | Hatching, cross-hatching for bar charts | | Label | Direct text labels on or near data points | | Position | Separate panels (facets) for each group | | Size | Varying point sizes |

import matplotlib.pyplot as plt

markers = ['o', 's', '^', 'D']  # Different shapes
colors = ['#0072B2', '#D55E00', '#009E73', '#CC79A7']
labels = ['Group A', 'Group B', 'Group C', 'Group D']

fig, ax = plt.subplots(figsize=(8, 6))
for i in range(4):
    ax.scatter(x[i], y[i], c=colors[i], marker=markers[i],
               s=80, label=labels[i], edgecolors='black', linewidth=0.5)

ax.legend()
ax.set_xlabel("X Variable")
ax.set_ylabel("Y Variable")
plt.savefig("redundant_encoding.pdf", dpi=300)

3. Line Style Differentiation

line_styles = ['-', '--', '-.', ':', (0, (3, 1, 1, 1))]
colors = ['#0072B2', '#D55E00', '#009E73', '#CC79A7', '#E69F00']

fig, ax = plt.subplots(figsize=(8, 5))
for i in range(5):
    ax.plot(x, data[i], color=colors[i], linestyle=line_styles[i],
            linewidth=2, label=f"Method {i+1}")

ax.legend()

Checking Your Visualizations

Simulation Tools

| Tool | Platform | URL | |------|----------|-----| | Coblis | Web | color-blindness.com/coblis | | Color Oracle | Desktop (Win/Mac/Linux) | colororacle.org | | Sim Daltonism | macOS | michelf.ca/projects/sim-daltonism | | Colorblindly | Chrome extension | Chrome Web Store | | Matplotlib CVD simulation | Python | See code below |

Programmatic CVD Simulation

from colorspacious import cspace_convert
import numpy as np

def simulate_cvd(rgb_hex, deficiency="deuteranomaly", severity=100):
    """Simulate how a color appears to someone with CVD."""
    # Convert hex to RGB [0,1]
    rgb = np.array([int(rgb_hex[i:i+2], 16)/255 for i in (1, 3, 5)])

    # Convert using colorspacious
    cvd_space = {"name": "sRGB1+CVD",
                 "cvd_type": deficiency,
                 "severity": severity}
    rgb_cvd = cspace_convert(rgb, cvd_space, "sRGB1")
    rgb_cvd = np.clip(rgb_cvd, 0, 1)

    return "#{:02x}{:02x}{:02x}".format(*[int(c*255) for c in rgb_cvd])

# Test your palette
for color in ["#FF0000", "#00FF00", "#0072B2", "#D55E00"]:
    sim = simulate_cvd(color)
    print(f"{color} -> {sim} (deuteranomaly)")

Quick Reference: Do's and Don'ts

| Do | Don't | |----|-------| | Use Wong or Okabe-Ito palettes | Use red vs. green to distinguish categories | | Use viridis/cividis colormaps | Use jet/rainbow colormaps | | Add shape/pattern as redundant encoding | Rely on color alone | | Use direct labels when possible | Force readers to match colors to legend repeatedly | | Test with CVD simulators | Assume your color choices work for everyone | | Use high contrast (WCAG AA: 4.5:1 ratio) | Use light colors on white backgrounds | | Keep maximum 7-8 colors in categorical charts | Use 15+ colors that are impossible to distinguish |