Data Visualization Accessibility Checker
by Leslie Buccino  · 
▪ Non-color visual cues are required alongside color WCAG 1.4.1 + 1.4.11 ? WCAG 1.4.1: Color must not be the only means of conveying information. WCAG 1.4.11: Graphical objects must meet 3:1 contrast against adjacent colors.
Color must never be the only way information is conveyed. Apply at least one non-color cue to every data series or chart element.
Outlines
Stroke marks & shapes
▲●■
Shape markers
Distinct per series
S1
Direct labels
Name each series
▓░
Patterns
Optional for complex viz
– –
Dash styles
Optional for complex viz
3:1
Non-text contrast
Chart marks & icons
WCAG Contrast Tester Text 4.5:1 · Large text 3:1 · Graphics 3:1
Tests text contrast (WCAG 1.4.3) and non-text elements (WCAG 1.4.11). Non-text includes chart marks, icons, and UI components — minimum 3:1 against adjacent colors.
Foreground
Background
Sample Text Aa
Load palette color into →
Palette (test up to 15 colors)
Official Palettes
Enter password to load Branded Palettes

Palette Statistics
Lightness Spread (L*) ? Perceptual lightness uniformity. Even steps = smooth sequential gradients. Uneven steps may cause perceptual jumps in sequential palettes.
Visualization Previews
Drag swatches to reorder. Use ← arrows for precision. ? Reordering here only affects preview order, not the main palette list.
Click any preview to enlarge and explore all CVD simulations.

CVD Simulation

How This Tool Works — Validation & Sources

What this tool tests

This tool evaluates color palettes for data visualization accessibility using three independent, validated methods: WCAG 2.1 contrast ratios, CIEDE2000 perceptual color difference (ΔE), and color vision deficiency (CVD) simulation. All calculations run entirely in your browser — no data leaves your machine.

WCAG contrast ratio (WCAG 1.4.3 & 1.4.11)

The contrast ratio formula is defined in the WCAG 2.1 specification and uses relative luminance per IEC 61966-2-1 (sRGB). The linearization step — converting gamma-encoded 8-bit values to linear light — is the piece most implementations get wrong. This tool applies it correctly:

  • Values ≤ 0.04045 divide by 12.92 (linear region)
  • Values > 0.04045 use the power function ((v+0.055)/1.055)^2.4
  • Luminance = 0.2126R + 0.7152G + 0.0722B (CIE 1931 primaries)
  • Contrast = (L_lighter + 0.05) / (L_darker + 0.05)

Verified values: Black on white = exactly 21:1 ✅ · #767676 on white = 4.54:1 ✅ (known borderline AA reference) · #595959 on white = 7.00:1 ✅ (AAA boundary)

WCAG 1.4.11 (Non-text Contrast) sets a 3:1 minimum for graphical objects including chart marks, icons, and UI components. This tool flags any palette color that fails 3:1 against both white and black — the worst-case condition.

Perceptual color difference — ΔE (CIEDE2000)

ΔE measures perceptual distance between two colors in CIELAB color space, designed to be perceptually uniform — equal ΔE values correspond to roughly equal perceived differences. This tool uses CIEDE2000 (Sharma et al. 2005), the modern standard that improves on CIE76 with better accuracy in blue, near-neutral, and high-chroma regions. The implementation is validated against all 15 published reference pairs from Sharma 2005 Table 1 (all pass within 0.0005 tolerance).

Context thresholds are adapted from published data visualization accessibility guidance:

  • Lines / small points: ΔE ≥ 10 — thin marks require stronger contrast
  • Medium areas: ΔE ≥ 7 — standard bar charts, moderate map regions
  • Large areas: ΔE ≥ 5 — wide bars, large map fills

These thresholds are more demanding than generic WCAG thresholds because data visualization involves simultaneous color comparison across an entire chart, not just foreground/background reading.

CVD simulation (Machado et al. 2009)

Color vision deficiency simulations use the Machado, Oliveira & Fernandes (2009) model, which is the most accurate published approach for simulating the full spectrum of dichromacy and anomalous trichromacy. The matrices are applied in linearized RGB space (not gamma-encoded), which is the correct workflow.

Verified behaviors:

  • Protanopia shifts pure red (#FF0000) by ΔE ≈ 87 ✅
  • Deuteranopia shifts pure green (#00FF00) by ΔE ≈ 80 ✅
  • Tritanopia shifts pure blue (#0000FF) by ΔE ≈ 118 ✅
  • Achromatopsia produces exact greyscale (R=G=B within rounding) ✅
  • Deuteranomaly and deuteranopia produce measurably different outputs ✅

Color-count best practice

Research on pre-attentive visual processing and categorical color discrimination consistently recommends no more than 8 colors for a qualitative data visualization palette intended to be decoded simultaneously. ColorBrewer caps its qualitative sets at 8–12; Edward Tufte and Stephen Few recommend 5–7 for most chart contexts. This tool flags palettes above 8 colors and warns above 12.

Sources & references

  • WCAG 2.1 Specification — W3C, 2018https://www.w3.org/TR/WCAG21/
  • IEC 61966-2-1:1999 — sRGB color space standardhttps://www.iec.ch/
  • Machado, G.M., Oliveira, M.M., Fernandes, L.A.F. (2009). A Physiologically-based Model for Simulation of Color Vision Deficiency. IEEE Transactions on Visualization and Computer Graphics.https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.pdf
  • Brewer, C.A. (2003). ColorBrewer — Color advice for maps and data visualization.https://colorbrewer2.org/
  • CIE Publication 15:2004 — Colorimetry, 3rd edition. Commission Internationale de l'Éclairage.https://cie.co.at/
  • Few, S. (2012). Show Me the Numbers. Analytics Press. (Color chapter, pp. 165–185)
  • Ware, C. (2013). Information Visualization: Perception for Design. Morgan Kaufmann. (Chapter 4: Color)
  • Prevalence figures — Colour Blind Awareness, NHS, and NIH National Eye Institutehttps://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/

Limitations

Uses CIEDE2000 ΔE (modern standard, validated against Sharma 2005). CVD simulation represents average dichromatic and anomalous trichromatic vision — individual variation exists. All results are advisory; final accessibility decisions should involve testing with real users and screen readers.

Color Count — Best Practices