Accessible Graphic Design

What is the first thing that comes to mind when you think about graphic design? Is it bright colours? Sleek typography?

While it’s easy to get hung up on the visual details, graphic design is first and foremost a visual communication method used to convey information with a specific objective. Ease of understanding is the main goal. Everything else – colour, layout, and typography, etc. – is the means designers use to communicate messages more effectively.

So, if getting a message across is the goal, then shouldn’t it be accessible to everyone – or at least to the widest audience possible? To that end, it’s important to consider the diversity of peoples’ abilities, needs and preferences; What works for one person, may not work for everyone. Some people may perceive colour differently. Others might find it hard to see very light fonts with thin strokes. Many find busy layouts and too much information overwhelming. The more we consider these things when making design decisions, the more likely we are to reach a wider audience with our message.

Whether the design is for print or online, every format has its own considerations and complexities. There are some general rules you can follow regardless of whether you’re creating a website, social media post, digital ad, poster, or slide deck.

Typography

Good readability and legibility are key to making text accessible.

• Legibility refers to how easy it is to recognize characters and tell them apart. Poor legibility also tends to contribute to poor readability.
• Readability is how easy it is to read the text, and it is related to the typeface and how the designer lays out the type.

Here are a few rules that will help you ensure that text is both readable and legible:

Rule #1: Pick typefaces that have clear and easily recognizable characters. 

Avoid overly ornamental, cursive or highly stylized typefaces. The more easily identifiable letters are, the easier they will be to read.

• DON’T use decorative typefaces that have hard to recognize characters.

• DO choose clear typefaces with letters that are easy to identify.

Rule #2: Choose typefaces that have characters that are easy to tell apart.

You can check whether a typeface has easily distinguishable characters by comparing certain characters that often look similar, such as the lower-case letters a and o, the capital letter I and lower-case letter l, and the capital letter B and number 8.

• DON’T use typefaces that have characters that are very similar to one another.

• DO use typefaces that have unique characters that are easy to differentiate. For example, characters set in Minion Pro are easy to tell from one another.

Rule #3: Choose typefaces with regular or medium font weight

When the weight of the font is too thin, text can be hard to see especially when text size is small, the reader is seeing text on a small screen (such as a mobile device), or if the contrast between the text and the background is not high enough (see Rule #6 on Contrast, below).

• DON’T use fonts that are too light or too heavy.

• DO pick fonts with regular to medium weight.

Rule #4: Consider Spacing

Leading (Vertical) Spacing: When lines of text are too far apart from one another, it can be difficult for readers to keep track of where they are in the text as they move from line to line. When the vertical spacing is too tight, it can make text hard to read. You can achieve best readability by not going into either extreme and by keeping the line height between 1.5-2 times the text size.

Tracking (Horizontal) Spacing: The spacing between letters also impacts readability and legibility. When there isn’t sufficient space between letters, they can overlap to form other characters. For example, the letters c and l can look like the letter d when they are too close together. When letters are too far apart, it can be difficult to string them together into words, which can reduce the speed of reading.

• DON’T set lines of text or letters too close to one another or too far from one another.

• DO set line spacing to 1.5-2 times the text size and leave enough space between letters without spacing them too far apart.

Rule #5: Pick a medium line length for optimal readability

A medium line length allows for a good reading rhythm and pace, while making it easy to keep track of where you are in the text.

• DON’T make lines too short, or too long.

• DO choose a medium line length, ideally between 40-75 characters.

Colour

An accessible colour scheme is all about how you apply and use the colours you have chosen. The most important things to keep in mind are colour contrast, and to rely on more than just colour to communicate information.

Rule #6: Make sure the contrast between the foreground and background is high enough.

You can use the ratios published by the Web Content Accessibility Guidelines (WCAG) of 4.5:1 or higher for regular text and 3:1 or higher for larger text, bold text, and non-text elements.

• DON’T use foreground and background colour combinations that have low contrast.

• DO make sure that contrast is at least 4.5:1 for regular text and at least 3:1 for larger text and non-text elements

Rule #7: When using colour to communicate information, use additional cues such as shapes, icons, and text.

Whenever you use colour in a meaningful way, such as to differentiate categories in a chart, or to highlight correct or incorrect information, add in another visual cue like an icon or text label.

• DON’T use colour as the only way to communicate important information.

• DO use additional cues such as icons or text whenever you use colour to convey meaning.

Images

Images are great for illustrating concepts, drawing attention, and to make content more engaging and appealing. To use images without compromising accessibility, remember to add alternative text descriptions, and avoid text within images whenever possible.

Rule #8: Use Alt Text to describe images to non-visual users

Non-visual users rely on alternative text descriptions to perceive information in images. These descriptions can be added to images in documents, social media posts, and web pages. They are not visible on the page but can be read by assistive technologies, such as screen readers. Ask yourself what you are trying to say with the image and summarize it in a sentence or two. You don’t have to explain every detail, keep it clear and concise.

• DON’T use images in meaningful ways without providing an alternative text description.

• DO add concise alternative text descriptions – ideally under 120 characters – that reflect your intention for using the image.

Rule #9: Don’t embed text within images

Sometimes text is not separated from images. Instead, both the visual elements and the text are combined into a single image, commonly in the case of advertisement banners or carousel slides. Text that is embedded within an image is not accessible for many reasons. It cannot be read by a screen reader, nor modified if the viewer requires an alternative colour scheme, a larger text size, or a different typeface. People with learning disabilities may find it helpful to be able to select text as they read or copy and paste to take notes. Finally, good contrast is harder to achieve when text appears on top of images. With a few exceptions such as logos, avoid embedding text within images.

• DON’T embed text within images, preventing users from being able to select and modify text.

• DO separate images from text whenever possible.

Accessible graphic design is intentionally combining text and visuals in a way that is accessible to as wide an audience as possible, with ranges of abilities. If you are interested in learning more about accessible graphic design, consult the following resources:

• Access Ability 2. A Practical Handbook on Accessible Graphic Design
• Accessibility and Inclusion Toolkit
• Colour Contrast Analyser (CCA)
• Checking for Colour Contrast Webinar