Guidelines for accessible infographics

Why make things accessible and WCAG in brief

Accessible infographics increase your reach, improve the user experience, and help you communicate consistently across all channels. This is mandatory for (semi-)governmental organizations, but it benefits every organization: fewer misinterpretations, better findability, and greater trust.

The WCAG guidelines are based on four principles: perceivable, operable, understandable, and robust. For infographics, this means, among other things: sufficient color contrast, no information conveyed solely by color, clear typography, text alternatives for screen readers, and a technical design that works on all devices and assistive technologies. Aim for level AA of WCAG 2.2. Want to ensure accessibility requirements are met right from the start? Then take a look at Briefing for an infographic.

Practical guidelines for accessible infographics

Color and contrast

Use color consciously, never as the sole carrier of information. Combine color with patterns, shading, markings, or labels so that categories are recognizable even without color distinctions. Use minimum contrast ratios of 4.5:1 for regular text and 3:1 for large text. Also check the contrast between graphic elements such as lines, bars, and their background. Choose a color palette that is colorblind-friendly and use saturated shades sparingly. Give interaction states and highlight information not only a different color, but also a different shape or line style.

Typography and hierarchy

Choose an easily readable sans serif font with sufficient x-height. Ensure a clear visual hierarchy with consistent heading sizes, subheadings, and labels. Maintain sufficient white space and a line spacing of approximately 1.4 to 1.6. Avoid text in all caps and overly tight spacing. For digital publication, 16 px is a practical minimum for running text; enlarge value labels in graphs so that they are also readable on mobile devices. Where possible, write at B1 level and avoid jargon or explain it briefly in the legend.

Text alternatives and descriptions

Provide each infographic with a short alt text that summarizes its purpose and key message. In addition, provide a detailed description or summary near the visual. Publish underlying data as an accessible table so that users who cannot see images can still access all the information. Use clear titles and subtitles that make the message explicit, not just the subject.

Interactive and static formats

Where possible, publish in HTML or SVG with real text so that screen readers can read labels and values. Ensure that interaction can be controlled with the keyboard and that focus styles are visible. Are you working on interactive variants? Read What is an interactive infographic. Use accessible tooltips and provide the same information in the fixed layout of the chart. For PDF: tag elements correctly, set the reading order correctly, and test with a screen reader. Always provide an alternative without animation or time pressure. Not sure whether slight movement helps or hinders? Read Infographic animation: what is it. Consider subtle movements such as micro-animations and respect everyone's motion preferences. Are you publishing your information as a video? See What is a video infographic for guidelines on subtitles, transcripts, and audio description.

Accessible infographic checklist

• Purpose and core message - Formulate one main message and make it explicit in the title and lead.
• Color and patterns - Do not rely solely on color for information; use patterns and labels.
• Contrast - Check 4.5:1 for text, 3:1 for large text and graphic elements.
• Typography - Legible fonts, sufficient size and white space, B1 word choice.
• Labels and legend - Place labels close to data, write legend clearly.
• Alt text - Brief summary of purpose and outcome, plus long description.
• Data alternative - Provide an accessible table or data download.
• Technology - HTML/SVG with real text, keyboard accessible, correct focus.

Frequently Asked Questions

Can infographics be accessible?

Yes. By not relying solely on color, using sufficient contrast, adding labels and patterns, choosing clear typography, and providing alt text and data tables, you can make infographics accessible to everyone. HTML or SVG with real text and keyboard accessibility complete this. Only use motion if it supports the information and does not create barriers.

What requirements must an accessibility statement meet?

Describe the scope of your site or publication, the level of compliance with WCAG 2.2, known shortcomings with supporting evidence, any exemptions, and an improvement plan with a schedule. Include the date, responsible organization, and contact point. Update the statement periodically when changes occur.

What makes a good infographic?

A good infographic has one clear message, a logical hierarchy, economical use of color, clear labels close to the data, and a short, informative title. Additional requirements apply for accessibility: sufficient contrast, no color-only coding, B1 texts, alt texts, and a data table as a fully-fledged alternative.

Help with accessible visuals

Want to make your infographic WCAG-compliant without compromising on impact? Animation Agency healthcare and government organizations with understandable, inclusive visualizations. We work with B1 communication, strong color contrast, subtitles, and audio description where relevant. Contact us for advice or production, or view our infographics portfolio for example cases and best practices.