Accessible Charts: Why Your Data Viz Fails the Contrast Test

Your dashboard looks crisp on the office monitor. Then you present it on a projector and nobody can read the legend, or a colorblind teammate asks why two lines are the same color. You checked the body text for contrast, so what went wrong? Charts have their own contrast rules, and the labels and legends you skipped are exactly the parts that fail.

Contrast Isn't Just for Body Text

Accessibility guidance mostly talks about paragraphs, so it's easy to assume small chart labels don't matter. They do — arguably more, because a legend you can't read makes the whole chart meaningless. The rule of thumb: small text needs a 4.5:1 ratio, and large text (roughly 18pt, or 14pt bold) needs 3:1. Every label, axis tick, legend entry, and callout in your chart is text, and every one of them needs checking. A color contrast checker turns that from a guess into a number in seconds.

The Pair That Looks Distinct But Isn't

The trap in charts is that colors can look completely different to you and still fail contrast against each other or against the background. Two saturated blues with different hues can land at nearly the same luminance, which is exactly what a projector or a colorblind viewer loses. The counter-intuitive part: distinct colors aren't the goal — distinct luminance is. If you're designing a palette, convert your candidate colors through a color converter to see them in terms of lightness rather than hue, and prefer pairs that differ in brightness, not just in name. Then verify the whole set in the checker before you build the chart.

A Chart Checklist

Three checks before you ship any data viz. Check the text: every label against its background, small and large separately. Check the series: each line or bar against the background, not just against each other. And check the colorblind view — if the chart relies on red-green to separate series, add a second signal like a dash pattern or a direct label. When you've settled the palette, you can minify the chart's SVG with a SVG minifier before deploying so the accessible version is also the fast one. We covered the full WCAG 2.2 contrast rules in our guide to new contrast standards; the chart version is the same discipline applied to every pixel with a label attached. Check the text, check the series, check the colorblind view — then your chart works for everyone, projector included.