Making Your Charts Accessible to Everyone

Contrast, color blindness, text alternatives: the best practices to keep your charts understandable by everyone, on screen and in print.

You spend an hour polishing a chart, it’s perfect on your screen… and yet part of your readers won’t understand a thing. Your colorblind colleague can’t tell your two lines apart. The black-and-white printout flattens all your colors. The reader on mobile, in full sunlight, sees only a gray blur. As for the screen-reader user, they hear a single word: “image.” Making a chart accessible isn’t about ticking a regulatory box: it’s about keeping all your work from getting lost along the way.

I. Why chart accessibility matters  

We often picture accessibility as a niche concern. In reality, the situations where a chart becomes unreadable are the daily experience of millions of readers. A few very concrete cases:

• The colorblind manager. About one man in twelve (8%) and one woman in 200 are colorblind. On a dashboard where red means “behind schedule” and green means “on track,” they see only identical bars. The most important information is invisible to them.
• The printed report. A leadership committee receives the report photocopied in black and white. Your five colored series become five near-identical shades of gray: the chart no longer means anything.
• The projector presentation. In a meeting, in a lit room, a projector washes out pale colors. Light yellow and white merge, gray labels vanish.
• The mobile reader. On the go, screen in full sun, reduced brightness: weak contrasts fade away.
• The screen-reader user. A blind or low-vision person navigates by voice. If you’ve planned nothing, their software announces “image” — or worse, the filename — and moves on to the next paragraph.

What do all these cases have in common? A fix made for one benefits everyone. Boosting contrast helps the colorblind reader as much as the reader in the sun; this is what’s called the curb-cut effect: the ramp designed for wheelchairs also serves strollers and suitcases.

II. Contrast: readable for every eye  

The real problem: your axis labels are in light gray “to keep them discreet.” On screen, in your office, it’s fine. But projected in a meeting, printed, or read by an older person whose vision is declining, they become unreadable — and a chart whose axes can’t be read is useless.

Contrast is the difference in brightness between two colors. If it’s too weak, elements blend into one another. The WCAG accessibility guidelines set measurable thresholds:

• 4.5:1 minimum for body text (titles, labels, annotations);
• 3:1 minimum for large text and graphical elements (strokes, bars, axis lines).

Concretely, these figures mean: a gray barely darker than the background fails the test, a solid gray passes it. What most often goes wrong:

• Labels and axes in overly light gray. This is the most common mistake. An axis must be readable effortlessly.
• Adjacent colors that are too close. Two neighboring slices of a pie chart, or two lines, must stand out clearly — not just for you, but after projection or printing.
• Text placed on a colored area. A white label on a light yellow is unreadable; use a dark shade from the same family.

The ten-second test: squint at your chart. If two elements blend together or a label fades away, the contrast is insufficient. A contrast checker (see links below) gives the exact figure when in doubt.

III. Color blindness: never encode by color alone  

The real problem: you publish a stock chart where gains are green and losses are red. For a reader with deuteranopia — the most common form — red and green look extremely alike. They literally cannot tell whether the stock is rising or falling. All your information rests on a distinction they don’t perceive.

Color blindness isn’t “seeing in black and white” (that’s extremely rare). It’s mostly a confusion between certain hues:

• Deuteranopia and protanopia — red/green confusion, by far the most widespread. That’s why the red/green pairing, however intuitive (“good/bad”), is the worst possible choice.
• Tritanopia — blue/yellow confusion, much rarer.

Hence the golden rule of all accessible data viz: information must never rest on color alone. Color can reinforce a message, never carry it by itself. How to go about it:

• Always back color with a second cue. A line is also distinguished by a stroke style (solid, dotted, dashed), a slice by a pattern (hatching, dots), a point by a different marker shape (circle, square, triangle).
• Label directly. Rather than a colored legend to cross-reference, write the series name at the end of its line. It’s faster to read for everyone, colorblind or not.
• Choose a safe palette. Avoid the critical red/green; the blue/orange pairing is a classic well perceived by most color blindnesses. Always check the result with a simulator (there are tools that show your chart “seen” through each type of color blindness).
• For a value scale, rely on brightness. A sequential palette (a single hue, from light to dark) stays perfectly readable even with color blindness, because it works on light/dark rather than on hue. It’s often safer than a multicolor gradient.

IV. Text alternatives  

The real problem: a blind person follows your article with a screen reader. Reaching your chart, the voice synthesizer announces “image sales-2024-final.png.” All the analysis the chart carried just disappeared for them. The same problem affects, more mundanely, any reader when the image fails to load.

A chart is an image: software doesn’t “see” the trends it contains, it only reads the text you provide around it. You therefore have to translate the visual information into words, at three levels:

1. The alternative text (alt). Short, it must deliver the conclusion, not describe pixels. Bad: “bar chart.” Good: “Sales doubled between 2021 and 2024, driven by the last quarter.” This alt also helps SEO and shows if the image fails to load.
2. The message in the article’s text. Stating the key point in plain words (“growth accelerates from 2023 on”) benefits all readers, not just those using assistive technology. A chart should never be the only place where essential information lives.
3. The underlying data. For anyone who wants to check or explore, offer a data table or a download link. It’s also a mark of transparency.

Simple rule: if you had to describe your chart over the phone to someone who can’t see it, what would you say? That sentence is your alternative text.

V. Don’t lock information inside the hover  

The real problem: your interactive chart is gorgeous — just move the mouse over a bar to see its exact value. Except on mobile, there’s no hover. In print, there’s no hover. For a keyboard or screen-reader user, there’s no hover either. All the information “hidden” in the tooltip is lost to them.

Interactive charts multiply this trap: we tuck the numbers, labels, or explanations into hover tooltips, forgetting that hovering is the least universal interaction mode there is.

The good reflexes:

• The essentials must be visible without interaction. The main message, the key values, and the labels must appear directly on the chart, not only on hover.
• Treat the tooltip as a bonus, never as the sole carrier of information needed to understand.
• Check that the chart stays complete once frozen: a screenshot, a printout, or a PDF must be enough to understand everything.

VI. Helping readers with dyslexia and easing cognitive load  

The real problem: your chart is technically readable — good contrast, safe palette — but it’s dense: a legend to decode, italic text, numbers everywhere. For a dyslexic person, every back-and-forth between the legend and the data costs effort; for someone with dyscalculia, a grid of raw numbers is a wall; for a tired or distracted reader, the message drowns in the noise.

Accessibility isn’t only about sight: dys conditions (dyslexia, dyscalculia) and, more broadly, cognitive load affect a large share of readers. You don’t help them with color, but by reducing the effort of reading and processing.

• For dyslexia — limit reading and the back-and-forth of the gaze. Prefer direct labeling (the name at the end of the line) to a legend to cross-reference. Short sentences, left-aligned text (never justified or in all caps), a simple, readable font at a sufficient size, with generous line spacing.
• For dyscalculia — let the shape speak, not the numbers. Let the chart show the comparison instead of forcing the reading of numbers. Round off, limit the number of values displayed, add telling markers (a target line, a “×2” annotation), and translate into words (“doubled”) rather than complex percentages.
• For cognitive load (ADHD, fatigue, stress) — one message, one chart. Remove decorative noise, highlight the important element, and let the rest recede. A chart that asks a single question and answers it clearly relieves every brain.

VII. On screen AND in print  

The real problem: your colorful dashboard is approved, sent, then printed in black and white for the meeting. Your five series become five nearly identical grays; no one knows which line is which anymore. The same effect occurs with photocopying, on an e-ink reader, or when a reader forces dark mode.

Color is fragile: it survives neither desaturation, nor black and white, nor certain conversions. A robust chart must stay readable even without color.

The decisive test: switch your visualization to grayscale. If the series become impossible to tell apart, then color was doing all the work — and a simple printout will be enough to break your chart.

The safeguards, all stackable:

• Patterns and hatching on filled areas (bars, slices) to distinguish them without color.
• Distinct stroke styles for lines (solid, dotted, dashed): they survive every conversion.
• Direct labeling, again and always: a name written next to a line resists black and white as well as color blindness.
• Colors contrasted by brightness: choose hues that remain different once desaturated (a dark blue and a light orange stand apart in gray; a red and a green of the same intensity merge).

VIII. The accessibility checklist  

Before publishing, run through these eight points:

• Contrast sufficient for text (4.5:1) and graphical elements (3:1).
• No information carried by color alone (backed by a stroke, pattern, or label).
• Palette tested for color blindness (no critical red/green).
• Alternative text that states the message, and the key point repeated in the text.
• Nothing essential hidden in the hover or the interaction.
• Reading load reduced: direct labeling, little text, a single message.
• Data available in textual or tabular form.
• Passes the grayscale test (screen and print).

Eight boxes, and your chart speaks to everyone.

Conclusion  

Behind every accessibility best practice, there is a real person.

And the truly good news is that these reflexes don’t only serve people with disabilities. A chart that’s readable without color, understandable without interaction, and summed up in one clear sentence is quite simply a better chart — for absolutely everyone.

Useful links  

• WebAIM — Contrast Checker
  An online tool to measure the contrast ratio between two colors and check that it meets the WCAG thresholds (4.5:1 and 3:1).

• Coblis — Color Blindness Simulator
  A simulator that shows your image “seen” through each type of color blindness: ideal for testing a chart before publishing.

• Datawrapper — How to make your charts colorblind-safe
  A practical, illustrated guide to designing charts readable by colorblind people, with examples of safe palettes.

• WCAG — Understanding contrast (W3C)
  The official W3C reference explaining the minimum contrast criteria and the reasoning behind the recommended thresholds.

• W3C WAI — Complex images (detailed text alternatives)
  A W3C tutorial on writing text alternatives for complex images such as charts and diagrams.