by

We want everyone to see our infographics. But not everyone has 20/20 vision. Good thing there are accessibility tools for designers, which help us make work everyone can enjoy.

But before we get to those tools, how do we know what rules to follow? Here at Lemonly, we reference the Web Content Accessibility Guidelines for clients in the private sector whenever possible. (Those in the public section currently follow Section 508.)

WCAG version 2.1 categorizes its rules into three levels: A, AA, and AAA. Each additional A adds additional constraints on design. Since we’re a small design firm, we most often conform to the AA level, but can provide AAA compliance for clients who request it.

Now, much of what WCAG covers pertains to web developers, and for that audience, the language is precise and understandable.

But for everyone else, the unabridged accessibility guidelines are pretty technical. So let’s talk only about what matters most in the realm of infographics: design.

To start, let’s agree on couple ground rules:

Everyone Should Be Able to Perceive Text

This one’s a given. Of course we want to make your infographic easy to read. That means designers will ensure the following:

  • Line height (line spacing) should be at least 1.5 times the font size.
  • Spacing following paragraphs should be at least 2 times the font size.
  • Letter spacing (tracking) should be at least 0.12 times the font size.
  • Word spacing should be at least 0.16 times the font size.
  • Text and images of text should have a contrast ratio of at least 4.5:1, except for the following:
    • Large text, which needs a contrast ratio of at least 3:1
    • Incidental text or images of text that are decoration, not visible, or are part of a picture with significant other visual content
    • Logotypes

Everyone Should Be Able to Perceive Graphics

While you, as a designer, might have the best monitor available, think about your parents. Did they buy their computer back in the early aughts? Well, that light-gray icon on a white background might not even show for them. So let’s follow these guidelines:

  • Graphics should have a contrast ratio of at least 3:1, except when a particular presentation of graphics is essential to the information being conveyed.

All Possible Barriers to Perception Should Be Removed

Lastly, it’s always a good idea to test, test, test in a variety of scenarios to make sure that you aren’t absentmindedly placing barriers on the path to understanding. A couple of the most important ones:

  • Meaning isn’t determined solely by color. So be sure to view that graphic in grayscale and see if it still makes sense.
  • The meaning of content isn’t affected by orientation, such as a portrait vs. a landscape view.

Dive deeper with this section of an accessibility webinar, which covers color contrast and much more.

Accessibility Tools for Designers

Going the Extra Mile

You might be curious about how someone who uses a screen reader can enjoy an infographic. The short answer? They often can’t.

Infographics are usually delivered as JPG or PNG images, which computers and thus screen readers are often not equipped to interpret. This not only impacts those with impaired vision, but also means that search engines probably won’t pay attention to the content within infographics.

So what are we infographic designers to do? There are a couple good options:

  1. We can prepare a fully responsive infographic built with HTML, CSS, and JavaScript. This is the most accessible and SEO-friendly way, but of course, comes with the highest cost.
  2. We can export an infographic as an SVG. This is a more web-friendly image format that we’ve talked about before on the blog, and represents a nice middle ground between static and interactive infographics. (See that post for more info.)

As with all technology, Lemonly is ready to keep up with accessibility guidelines and tools as they advance. In the meantime, let us know how you make your infographics accessible, and if we should check out any other tools!