Visual communication is about much more than making beautiful designs. It’s about sharing information in a clear, accurate way, whether that involves data visualization, 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.

Every designer should dedicate the time necessary to learn the best practices of accessible design.

When you design with accessibility in mind, you’re not just improving your content for a small subset of the population. “[E]ventually we all become less able,” explains Tyler Yearling Hively in an enlightening and important article for Modus — so when you design accessibly, you are truly designing for everyone.

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.”

Accessible design means making sure that as many people as possible can enjoy and benefit from your work.

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

An estimated 8% of men and 0.5% of women have some form of color vision deficiency

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:

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:

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

You’ve probably seen videos on social media that include subtitles for people who don’t want to turn their audio on. This has the added benefit of making those videos accessible to anyone who is hard of hearing.

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 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:

1. Ensure file names accurately represent the content.

2. 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

3. Include skip links so the visually impaired can skim over irrelevant content and code.

4. 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.

Originally published on the Killer Visual Strategies blog.