Making infographics accessible

An infographic is a picture of information, and pictures leave some readers out: people who use screen readers, people with low vision, people with color vision deficiency, and anyone reading on a dim phone in the sun. Most of the fixes are cheap if you plan for them. Write alt text that states the finding, publish the content as real text, meet contrast minimums, and never let color carry meaning alone.

Write alt text that states the finding

Alt text should tell a reader what a sighted person learns from the image. "Infographic about smartphones" doesn't do that. "Smartphone ownership among U.S. adults rose from 35 percent in 2011 to 91 percent in 2024, according to Pew Research Center" does.

A simple formula:

1. What kind of graphic it is, briefly ("Line chart", "Infographic with three sections").
2. The main message, in one sentence.
3. The key numbers that support it.
4. Where to find the full version, if there is one ("Full data in the table below").

Skip "image of" or "picture of"; screen readers already announce that it is an image. Don't paste every number into the alt attribute. Long alt text is tiring to listen to and can't be navigated. Put the detail in text on the page.

Publish a text version

Every infographic of more than one chart should have its content available as text. On the web, the easiest way is to put it right next to the image: the headline as a heading, each section as a short paragraph or list, the key figures in a table, and the sources as links. That text also helps search engines understand the page and lets people copy a number without retyping it.

If the layout can't hold all of that, link to a separate text version, and say in the alt text that it exists.

Better still, build the infographic in HTML and SVG instead of a flat image. Text stays text, it scales on zoom, and screen readers can read the labels. Every piece in our gallery is an inline SVG with a title and description, and each page includes the data as an HTML table.

Meet contrast minimums

The Web Content Accessibility Guidelines (WCAG) set measurable contrast ratios between foreground and background:

• 4.5:1 for normal text.
• 3:1 for large text (at least 18 point, or 14 point bold).
• 3:1 for graphical objects needed to understand the content, such as bars, lines, icons and the borders of shapes.

Common failures in infographics: light gray source lines, pale category colors in a chart, white text on a bright yellow or light orange panel, and text placed over photos. Check each color pair with a contrast checker, and check again if the piece also appears on a dark background.

Light colors are fine for things that are meant to recede, like gridlines. They aren't fine for data people have to read.

Don't rely on color alone

About one in twelve men and one in two hundred women have some form of color vision deficiency, mostly red-green. If the only difference between two lines is red versus green, many readers can't tell them apart.

Add at least one more cue:

• Label lines and bars directly instead of using a color legend.
• Use different shapes, patterns or line styles (solid versus dashed).
• Make the colors differ in lightness, not just hue. Test by viewing the piece in grayscale.
• Use position: put the highlighted item first, or separate it.

A grayscale check catches most of these problems in a few seconds.

Make text big enough to read

Text that looks fine on a 27-inch monitor shrinks to a few pixels when an infographic is shown at phone width. Test at the real display size. As a rough floor, labels shouldn't render below about 12 CSS pixels on a phone, and body text should be larger. If the piece is too detailed to be readable at that size, split it.

Avoid long stretches of all caps, light or condensed weights for small text, and text set along curves or at angles. Each makes reading harder for everyone and much harder for people with low vision or dyslexia.

Keep a logical order

Sighted readers scan an infographic in an order set by the layout. Screen reader users get whatever order the content has in the file. When you build in HTML or a tagged PDF, keep the source order the same as the visual order: headline, introduction, sections in sequence, sources last.

Numbered sections help everyone. They give an obvious path and make the piece easier to discuss ("see section 3").

Motion and interaction

Animated and interactive infographics bring their own requirements. Give users a way to pause anything that moves for more than five seconds, respect the reduced-motion setting where possible, and make every interactive element usable with a keyboard. Don't hide essential numbers behind hover tooltips, which don't exist on touch screens or on paper.

A quick accessibility checklist

None of this needs special software. It needs a few minutes per piece, and the result is a clearer infographic for every reader.

Questions