A strong infographic makes complex information understandable at a glance. But only when accessibility is taken into account is that information usable for everyone. With WCAG 2.2 AA as a compass, you leave no one out: from color blindness and low vision to cognitive impairments and screen readers. At Animation Agency , we translate these guidelines daily into clear, inclusive visuals for healthcare and government. New to the medium? Read What is an infographic.
Accessible infographics increase your reach, improve the user experience, and help you maintain consistent communication across all channels. This is mandatory for (semi-)governmental bodies, but it yields benefits for every organization: fewer misinterpretations, better findability, and increased trust.
The WCAG guidelines are built around four principles: perceivable, operable, understandable, and robust. For infographics, this means, among other things: sufficient color contrast, no information conveyed solely through color, clear typography, text alternatives for screen readers, and a technical design that works on all devices and assistive technology. Aim for WCAG 2.2 level AA. Do you want to ensure accessibility requirements are met right from the start? Then check out Briefing for an infographic.
Use color consciously, never as the sole carrier of information. Combine color with patterns, shading, highlighting, or labels so that categories are recognizable even without color distinction. Maintain 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 backgrounds. Choose a color palette that is colorblind-friendly and be sparing with saturated tones. Do not just give interaction states and highlight information a different color, but also a different shape or line style.
Choose a legible sans-serif font with sufficient x-height. Ensure a clear visual hierarchy with consistent heading sizes, subheadings, and labels. Maintain sufficient white space and line spacing of approximately 1.4 to 1.6. Avoid all-caps text and overly tight spacing. For digital publication, 16 px is a practical minimum for body text; enlarge value labels in charts so they are also readable on mobile devices. Where possible, write at a B1 level and avoid jargon or explain it briefly in the legend.
Provide each infographic with a short alt text that summarizes the purpose and core message. Additionally, provide a detailed description or summary near the visual. Publish underlying data as an accessible table so that users who cannot see the image can still access all the information. Use clear titles and subtitles that make the message explicit, not just the subject.
Where possible, publish in HTML or SVG with real text so that screen readers can read labels and values. Ensure that keyboard interaction is controllable and that focus styles are visible. Are you working on interactive versions? Read What is an interactive infographic. Use accessible tooltips and offer the same information in the fixed layout of the chart as well. For PDF: tag elements correctly, set the reading order properly, and test with a screen reader. Always provide an alternative without animation or time pressure. Unsure whether slight movement helps or hinders? Then read Infographic animation: what is it. Consider subtle movements such as micro-animations and respect everyone's motion preference. Are you publishing information as a video? See What is a video infographic for guidelines on subtitles, transcripts, and audio description.
Make complex information clear, understandable, and convincing
Do you want to make your infographic WCAG-compliant without compromising on impact? Animation Agency helps 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 case studies and best practices.
Is your question not listed? Feel free to ask.
Ask your questionYes. By not using color as the sole medium, employing sufficient contrast, adding labels and patterns, choosing clear typography, and providing alt text and data tables, you make infographics usable for everyone. HTML or SVG with real text and keyboard accessibility complete this. Only choose motion if it supports the information and does not create barriers.
Describe the scope of your site or publication, the level of compliance with WCAG 2.2, known deficiencies with substantiation, any dispensations, and an improvement plan with a schedule. Include the date, responsible organization, and contact person. Update the statement periodically in case of changes.
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 text, alt text, and a data table as a full alternative.
Whether it concerns an ambition, product, process, technology, or idea: we make visible what makes it special and translate it into imagery that is clear, convincing, and impossible to ignore.
