We use essential cookies to make Venngage work. By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.

Manage Cookies

Cookies and similar technologies collect certain information about how you’re using our website. Some of them are essential, and without them you wouldn’t be able to use Venngage. But others are optional, and you get to choose whether we use them or not.

Strictly Necessary Cookies

Always Active

These cookies are always on, as they’re essential for making Venngage work, and making it safe. Without these cookies, services you’ve asked for can’t be provided.

Show cookie providers

  • Venngage
  • Amazon
  • Google Login
  • Intercom

Functionality Cookies

These cookies help us provide enhanced functionality and personalisation, and remember your settings. They may be set by us or by third party providers.

Show cookie providers

  • Venngage
  • Chameleon
  • Intercom
  • Algolia

Performance Cookies

These cookies help us analyze how many people are using Venngage, where they come from and how they're using it. If you opt out of these cookies, we can’t get feedback to make Venngage better for you and all our users.

Show cookie providers

  • Venngage
  • Mixpanel
  • Intercom
  • Google Analytics
  • Hotjar

Targeting Cookies

These cookies are set by our advertising partners to track your activity and show you relevant Venngage ads on other sites as you browse the internet.

Show cookie providers

  • Google Ads
  • Google Tag Manager
  • Facebook
  • Pinterest
  • Product
  • Templates
  • Learn
  • Pricing
Learn
Educational Resources
Blog
Blog
Webinars
Webinars
Help Center
Help Center

How to Create Accessible Infographics With Venngage

Written by: Ann Smarty


Feb 04, 2020

How to Create Accessible Infographics With Venngage header image

Infographics are content assets that convey information in a visual way. While visualizing your content has multiple benefits – from making information easier to grasp and remember to encouraging people to share that information, infographics can also make content inaccessible.

Where infographics can lack is in making the visualized information accessible to all, i.e. people with visual disabilities.

Therefore, infographic designers must include accessibility factors into their design process to ensure the content is:

  • Easy to see for people with visual difficulties, such as color blindness 
  • Recognizable to screen readers
  • Possible to understand to people with cognitive disabilities

In the meantime, let’s dive in to see how you can apply accessible design in creating infographics with Venngage.

The concept of inclusive visual design

More than 60 million Americans, are reported to have a disability of some kind.

That’s more than a quarter of US population which far too many of web users for graphic designers to ignore.

Shir Ekerling Quote Acessible Design


As Shir Ekerling, CEO of accessiBe, an AI-based start-up offering an automatic web accessibility solution, put it,

“The number of disabled users who are cut off from using the Internet fully is enormous. They are far too many to dismiss as marginal and irrelevant.”

This is where the concept of inclusive visual design comes into play including as many people’s needs and abilities as possible.

If you are planning to create a lot of infographics, consider creating a new project to curate them. This will open up more marketing, lead generation and link-building opportunities. This business name generator will help you find a cool affordable .fun or .tech domain.

Related: 8 Best Practices for Designing for Diversity and Inclusion

How to design and accessible image infographic using Venngage

When it comes to infographic design, consider both color blindness and low vision should be taken into account.

Make sure your infographic is clear and easy to understand. People with low vision should have no difficulty reading and understanding it.

Practically, this means:

  • Making sure to provide good contrast
  • Ensuring your font size is large enough
Accessible-design-webinar-banner


Understanding Accessible Color Contrast

When designing your infographic, you can use an accessible design tool to run some contrast-checking and accessibility testing to ensure your designs comply with all accessibility guidelines, therefore pass Web Content Accessibility Guidelines (WCAG) requirements. This will ensure your infographic is easy to read for people with poor vision.

accessible infographics

Once you have selected your colors, you can view the color combination in grayscale to identify how the colors appear to a colorblind user:

accessible infographics color selection tool

Pro Tip: To find your color RGB hexadecimal format inside your infographic editor, select that area and click “color” icon on top:

accessible infographics screencap

From there you can adjust the color until you find a more suitable background color using the contrast checker.

It is also recommended to avoid using shades of gray, yellow, and orange.

You can also upload your whole infographic to see whether your colors pass the requirements:

accessible infographics color scheme

Here is a cheat sheet for picking color blind friendly palettes:

color-blind-friendly-palette-infographic


If color contrast is still a little too dense for you, you can always use our Free Color Blind Simulator; the tool lets you experience what it’s like to have red/green, blue/yellow, or complete color blindness. Just add the link to the color vision simulator and try out the different filters there.

For more tips on color blind design guidelines, check out this post: Color Blind Design Guidelines: How to Convey Meaning to Everyone [With Examples & Templates]

For more on the topic of accessible design, check out this post: ADA Standards for Accessible Design: How to Be Compliant

Choosing an Appropriate Font Size

When you have to visualize a lot of information within one image, it is very tempting to use tiny font to be able to say more.

Unfortunately, this goes against inclusive visual design principle making your infographic hard to read for partially sighted users.

WCAG 2.0 requires a text font no less than 10 points (which is about 13 pixels) for it to be accessible. Smashing Magazine suggests sticking to 16px fonts.

Additionally, it is recommended to avoid “fancy” fonts as it may pose some issues to people with cognitive disabilities. The best practice is to use “standard” fonts, avoiding cursive and fantasy fonts.

  • One of the most accessible fonts is Arial; other good options are Calibri, Helvetica, Verdana, and Tahoma
  • Try to use no more than 2 types of fonts
  • Again, make sure there is a good color contrast between the text and the background (use the color contrast checker above).

Pro Tip: Generally, Venngage’s infographic templates offer readable fonts by default but you can always change the font by selecting the text and clicking through available options:

accessible infographics font selection

[You can also change the font size using the drop-down next to the font]

Create a detailed transcript

More than 7,2 million of adults (ages 16 to 75+) were reported to have a visual disability in the United States in 2016.

It was also estimated that over 90% of the visually impaired use screen readers. Screen readers work by translating textual content to either voice or braille.

Therefore it is important to provide a detailed text transcript for your infographic:

Make Your Transcript Easy to Find

  • Always make it clear where the transcript can be located by using headings like “Text Alternative” or “Text Version”.
  • Use “Skip Navigation” links to make your graphic transcript easy to locate. The “Skip Navigation” concept was invented to let screen reader users go directly to the text version of the infographic. You can use this detailed tutorial on how to add anchor links to create accessible “Skip Navigation” for your infographic page.

Related: Image Alt Text: Definition and Best Practices for Accessible Designs

Structure Your Transcript Using HTML Subheadings

Within your transcript make sure to use H2/H3 subheadings to ensure your content structure is easy to understand (when listening to it).

Screen reader users should be able to scan the page by headings and understand each section. This helps screen reader users to navigate through your transcript easily and come back to any section they want to listen to again.

One of the best ways to structure your content well is to use Text Optimizer’s Content Ideas section. It generates the most popular questions on each topic, so you can use the suggestions as the base structure of your content.

accessible infographics

Using question research for content structuring makes content much easier to understand and more interesting to read (or listen to).

You can also select an accessible theme which would have many of user experience elements (including “Skip Navigation”, breadcrumb navigation, clear site structure, etc.) already in place.

Test Your Transcript for Clarity

Use Text-to-Speech tools to simulate screen reader user experience and make sure your transcript is clear enough when it is being read to you.

Provide an Alternative File Format

Finally, offering alternative file formats is always a good idea. It includes all kinds of audience into your content marketing strategy.

For example, you can download your infographic as a PDF file and offer it as a free download. People with poor Internet connection or those using PDF files for printing will be thankful. You can download Venngage infographics as PDF files.

Additionally, you can turn your infographic into a video and let people with hearing or attention difficulties watch a more entertaining version.

Conclusion

In many ways, creating an accessible infographic means making your infographic easy to read and understand which also helps make it more useful. On the other hand, providing a detailed transcript will make your infographic page SEO-friendlier.

That being said, following the steps above, you will achieve more goals, beyond catering to people with various disabilities. Specifically, you will ensure your infographic search discoverability and make it more engaging. Good luck!

Want to learn more about accessible design?

More infographic design guides:

How to Make an Infographic in 5 Steps

How to Use Color Blind Friendly Palettes to Make Your Charts Accessible

How to Pick Colors to Captivate Readers and Communicate Effectively

About Ann Smarty

Ann Smarty is the co-founder of Smarty Marketing. Ann has been into Internet Marketing for over a decade, she is the former Editor-in-Chief of Search Engine Journal and contributor to prominent search and social blogs including Small Biz Trends and Mashable. Ann is also the frequent speaker at Pubcon and the host of a regular Twitter chat #vcbuzz.