Accessible Design 101: How to Create Visual Content for Every Audience

By July 11, 2019 January 6th, 2020 Design Tips
Visual Communication Design Tips

Visual communication is about much more than making beautiful designs. It’s about sharing information in a clear, accurate way, whether that involves charts, graphs, illustrations, the careful use of typography, or other visual elements. But whether you’re a traditional graphic designer or a visual communication designer, there is yet another dimension at play: accessible design.

Accessible design means making sure that as many people as possible can enjoy and benefit from your work. If someone is color-blind, they should still be able to differentiate between distinct elements of your design. If they’re visually impaired, the alt text and description/caption you attach to images on your interactive microsite should help them understand the overall flow and message of the page. The fonts, too, should be easy to read. And for those who are hard of hearing, you’ll want to ensure your videos and motion graphics can be understood without the aid of a voiceover. 

The Americans with Disabilities Act Accessibility Guidelines (ADAAG) are a comprehensive resource on how to design everything from infrastructure to signage. Let’s take a look at just a few of the best practices that apply to visual communication designers — people responsible for creating everything from interactive experiences and motion graphics to social-media micronarratives and conference collateral

Accessible Fonts

The ADAAG offers up highly specific standards on the casing, style, and proportions of fonts, depending on where they appear. For instance, type on signs — such as restroom markers — should be all uppercase and sans serif. The instructions even dive into stroke weight: “Stroke thickness of the uppercase letter ‘I’ shall be 15 percent maximum of the height of the character.”

So when you’re designing signs and other informative materials that may appear in public settings, it’s well worth your while to review these guidelines in depth before you get started. (Also check out this fantastic Adobe Illustrator tutorial on designing for signs.) Even so, there are many best practices you should follow no matter what you’re designing: 

  • Don’t use type that is too small. Consider 12-point font the minimum type size for print in most cases. 
  • Avoid very lightweight fonts; aim to use medium- or bold-weight type.
  • Make sure the font is easy to read, and that it’s easy to tell the difference between numbers and characters. Script fonts, for instance, may be hard to decipher for many.
  • Make sure your kerning isn’t too tight. That is, there should be adequate spacing between the characters. 
  • Ensure overall spacing between words and paragraphs is even. Avoid splitting words at the ends of lines. 
  • Breaking up larger blocks of text with bullet points improves ease of reading. 
  • Ensure your PDFs pass the accessibility checker built into Adobe Acrobat.

Accessible Colors

When talking about font above, one big point we haven’t yet addressed is color palette and contrast. We all know it would be hard to read yellow font on a white background. Accessible design ensures that there is enough contrast between different elements in a design — such as between text and background. This not only ensures your text is easy to read — it also makes it easier for your viewers to distinguish between the different elements of your design. 

The smaller the font, the more contrast you’ll probably need. “[A]t small print sizes, it is better to use black print on a white background,” explains the Centre for Excellence in Universal Design.

When it comes to illustrations, images, graphs, and other non-textual elements, you’ll want to ensure that people who are color-blind or visually impaired can enjoy your design too. After all, they comprise a large contingent of your audience. An estimated 8% of men and 0.5% of women have some form of color vision deficiency, according to Colour Blind Awareness

Take a look at how those who are color-blind might see some of your images, compared to those who are not: 

Color-blindness comparison deuteranopia
Color-blindness comparison tritanopia

Courtesy Color Blind Awareness

Deuteranopia, also called “red/green color blindness,” is the most common type. People with deuteranopia tend to mix up colors that have some red or green in them. “So someone with red/green colour blindness will probably confuse blue and purple because they can’t ‘see’ the red element of the colour purple. See the example of pink, purple and blue pen cases [above] to understand this effect,” Colour Blind Awareness explains. 

So for instance, to design for this population, you won’t want to place blues and purples in direct contrast, especially when those elements need to be distinguished — blue text on a purple background, for instance. You should also avoid juxtaposing red and green. Someone with deuteranopia wouldn’t be able to see the number 74 in this image: 

Color-blindness test red-green

Courtesy 99 Designs

The less-common tritanopia is also called “blue/yellow color blindness,” though as in the case of deuteranopia, this doesn’t fully describe their experience. “The most common colour confusions for tritanopes are light blues with greys, dark purples with black, mid-greens with blues and oranges with reds,” according to Colour Blind Awareness.

This is why you should avoid juxtaposing oranges and reds, or blues and greens. 

Monochrome designs that include variations on a single color are another great way to make accessible designs for the color-blind. 

Now that you understand a little more about how it works, here’s a handy list of color combinations to avoid, courtesy of 99designs

  • Green + Red 
  • Green + Brown
  • Light Green + Yellow
  • Blue + Green 
  • Blue + Purple 
  • Black + Green
  • Grey + Green
  • Grey + Blue 

Not sure what your design will look like to someone who is color-blind? Upload it into this color-blindness simulator

Accessible Motion Graphics & Videos

It’s always visual communication best practice to ensure that your designs communicate the majority of their message through the visuals, with minimal reliance on text or voiceover. But when it comes to accessible design, this is especially important. 

When you create a video or motion graphic, ensure that your main points are not only narrated through the audio track but depicted on-screen through animated characters, graphs, charts, and other illustrations and icons. 

In any case, if there is a voiceover, make sure to include subtitles as an option for anyone viewing your video on sites like Vimeo or YouTube. If you’re sharing your video on social media, consider turning the subtitles on for all your viewers. You’ve probably already seen plenty of videos on social media that include subtitles for people who don’t want to turn their phone or computer audio on. This has the added benefit of making those videos accessible to anyone who is hard of hearing. 

And of course, make sure your voiceover artist speaks clearly, and that the background music doesn’t make it too difficult to hear or understand the voiceover. These are all essential elements of an accessible design.

Accessible Design for Interactive Content & Digital Spaces

When it comes to building a great user experience in digital environments, there are a huge number of factors to consider. All great visual communication designers should know the best practices for these kinds of interactive spaces, since most of their designs will very likely live there.

We’re not going to dive too deeply into these considerations—it would take a whole other article to cover them all. Still, let’s take a look at a few essentials for ensuring accessibility in digital spaces:

  • Ensure file names accurately represent the content. 
  • Familiarize yourself with accessible HTML, which includes tags that will help your users understand what is on the page, including: 
    • Heading tags 
    • Alt tags
    • Semantic HTML elements, such as <button> instead of <div>
    • Link titles 
  • Include skip links so the visually impaired can skim over irrelevant content and code.
  • Follow all the advice above about font and color choice.  

Every designer should dedicate the time necessary to learn the best practices of accessible design. What we’ve listed above are just some of the essentials. To learn more, check out the Americans with Disabilities Act Accessibility Guidelines, the Centre for Excellence in Universal Design, and the guidelines on W3Schools

Erin McCoy

Author Erin McCoy

Erin McCoy is director of content marketing and public relations at Killer Visual Strategies. She earned her BA in Spanish with minors in French and Russian, and holds 2 master’s degrees from the University of Washington: an MFA in creative writing and an MA in Hispanic literature. She has won nearly 2 dozen awards in photojournalism, and has dedicated those skills to boosting Killer’s brand recognition and thought leadership in visual communication. Since Erin took on her marketing/PR role, Killer has been named a member of the Inc. 5000 for 4 years in a row; has been featured in such publications as Inc., Forbes, Mashable, and the Huffington Post; and has been invited to present at such conferences as SXSW and SMX Advanced.

More posts by Erin McCoy

Join the discussion 2 Comments

  • Clare Burke says:

    Hi Erin!

    My name is Clare and I am currently doing my Thesis. I am looking into the area of visual impairment and social media. I was wondering if you could offer some advice on a particular area that I should focus on. I have been speaking to a few people who are visually impaired and one interesting area I have discovered is their issue with interacting with memes and gifs, especially the younger users I have asked. Do you think this is a good issue to address?
    Any feedback would be greatly appreciated!

    Thank you

    • Erin McCoy says:

      Hi Clare!

      How visually impaired users interact with GIFs and memes would be a fascinating thesis topic, one I’d love to read more about! Best of luck!

      Erin

Leave a Reply