Color and Accessibility in Dashboards
Meaningful, accessible, redundant encoding
Color is a language: one meaning per color, one color per meaning; 8% of men have color-vision deficiency, so encode by position and shape too, and hit contrast ratios.
What you will learn
- Apply ColorBrewer-friendly scales: categorical, sequential, diverging
- Encode redundantly so colorblind users still read it
- Meet WCAG contrast for text and data-viz marks
What is this?
Color carries categories (categorical scales), magnitude (sequential), and deviations (diverging). Accessible dashboards never rely on color alone: position, shape and labels double-encode; palettes avoid the red/green blind spot; text and marks meet contrast ratios (WCAG AA). Good color already IS accessibility.
Why do you need it?
- ~8-10% of men and ~1% of women have some color-vision deficiency.
- Rainbow/garish scales invite misreading at a glance.
- Contrast failures make viewers sigh, then abandon.
- Redundancy (shape+color+label) survives every display and every vision.
Mental model
Street signage that also spells the street name
Redundant encoding
Signs use color AND shape AND words — not color alone. A green sign is still a 'street name plate' by shape and text. Dashboards should encode the status by color, position, marker shape, and a label, so no single channel is load-bearing.
How it works
- Categorical scales: distinct hues, balanced lightness, small counts (5-9).
- Sequential scales: light-to-dark of one hue (or two) for magnitude.
- Diverging scales: two hues on a zero/central anchor for above/below target.
- Accessibility: avoid red-green accent pairs; use blue/orange or color+shape+label.
- Contrast: text ≥ 4.5:1 (AA) for body; large text ≥ 3:1; marks over filled backgrounds verified.
Choosing the scale family from the message.
Examples
Status colors that survive colorblind screens
CATEGORICAL (safe): blue/orange/purple — avoid red/green pairSEQUENTIAL magnitude: light gray-blue -> deep navyDIVERGING vs target: red (below) -> neutral -> blue (above)REDUNDANT encoding: status ALSO as: marker shape (▲ ● ■) on the chart a label column ('On track' / 'At risk')CONTRACT: body text #3c3c3c on white ≥ 4.5:1Choose the scale by message, keep palettes vision-safe, and double-encode so color is a bonus, never the only clue.
In production
- An ops dashboard flags 'below SLA' tiles with a red outline PLUS a warning icon and label.
- A revenue heatmap uses one-hue sequential scale instead of the rainbow spectrum.
- A scorecard diverges around a target color (red/neutral/blue) with exact labels.
Best practices
- Pick palettes from ColorBrewer/widely-used BI defaults.
- Keep the number of categorical colors ≤ 7; group the rest as 'other'.
- Test with a colorblind simulator and grayscale screenshot.
- Never encode 'good/bad' with red/green alone — add shape/label.
Common mistakes
- Rainbow scales that read as a temperature gradient.
- Red/green traffic lights as the entire status signal.
- Low-contrast gray-on-white text everywhere.
- Random hue per tile killing cross-tile color memory.
Debugging tips
- A viewer can't tell series apart → add labels and vary shapes, not just hue.
- The chart 'looks muddy' → saturate too many hues; limit to 5-7 and group.
- Grayscale test fails → marks indistinguishable; encode position/length instead.
Interview checkpoint
Hands-on lab
- Compute contrast ratios for candidate text colors
- Prove sequential vs diverging story from data
- Simulate the grayscale loss and require redundancy
Verify Color Design with Numbers
40 min · intermediate
Quick quiz
The safest way to encode good/bad status alone?
WCAG AA body text needs a contrast ratio of at least 4.5:1.