How to Create Accessible Designs [Tips + Templates]

By Alice Corner, Jun 30, 2020

Accessible Design Header

When designing any sort of communication material, you need to be aware of the fact that not everybody will be able to process the information in the same way.

Many people across the world have different accessibility requirements, from those who are on the autism spectrum, to those who are color blind, dyslexic, or are visually impaired.

Good communication depends on your information being understood as widely as possible.

What is accessible design?

Accessibility in design comes in many different forms from accessible infographics to accessible UI design. But when creating accessible designs, there isn’t a one size fits all model.

Generally, accessible design means a design that has taken into consideration how are able to understand the information presented.

Accessible design infographic

Not every design will be accessible for every single person, but there are ways to ensure that the majority of people can access and understand your designs through how you use fonts, colors, and icons.

Below we have outlined some of the most common accessibility needs for design, and provided examples and best practice tips.

Types of accessible design [Skip Ahead]

Color Blind Accessible Design

With an estimated 300 million people who are color blind in the world, making your designs accessible to those people is important.

Contrary to popular belief, most people who are color blind can actually see color–just not in the way other people can.

There are three main types of color blindness:

  • Red/Green Color Blindness
  • Blue/Yellow Color Blindness
  • Complete Color Blindness

Color is a complex thing, and our understanding of color comes from how our eyes process light.

WATCH: Everything you need to know about COLOR

In general, good design leans heavily on color theory but when you’re designing for accessibility you need to be mindful of how you use colors.

Instead of showing contrast via color alone, try using patterns or icons to show differentiation, or pick one main color and use various shades of that color to highlight important information.

Basiic Statistical Infographic Template Accessibe Design


 

If you have to use colors to show contrast, avoid using problematic color palettes.

Color combinations to avoid for people with color blindness include:

  • Red & green
  • Green & brown
  • Green & blue
  • Blue & gray
  • Blue & purple
  • Green & gray
  • Green & black

Venngage has created an infographic outlining color palettes you can use for accessible design:

Color Palettes for Color Blindness Infographic


 

Want to learn more about color theory?

Accessible Design for Visual Impairments

The phrase visual impairment is a term that is used to describe any type of vision loss in a person. This can range from partial to full blindness.

Because visual impairments cover a large spectrum, creating designs that are accessible for people who suffer from vision loss is not a one-size-fits-all solution. But there are some tips you can use to make sure the most people possible can enjoy and understand your materials.

The most common types of vision impairment are:

  • Loss of Central Vision
  • Loss of Peripheral (Side) Vision
  • Blurred Vision
  • Generalized Haze
  • Extreme Light Sensitivity
  • Night Blindness

When creating designs that are accessible to those with visual impairments, make sure to use a large and legible font like in this poster example:

Student Conference Event Poster Accessible Desiign


 

Using a decorative font may be appealing for your design, but the more flourishes on your font the harder it is for people to read. Instead, stick to a simple font and make sure that your text is large enough to read.

Want to learn more about fonts?

Another way to make your designs more accessible is to use strong contrasting colors. A strong contrasting color palette helps the important information stand out more clearly. Contrasting colors are those that sit opposite each other on the color wheel.

color_wheel_traditional

SOURCE

Where possible, try to use a lighter color for your background and a darker color for your text. Avoid using a patterned background.

Simple chart accessible design


 

Learn more about color relationships:

Accessible Design for Neurodiversity

Neurodiversity is a catch all term to describe people who experience the world in a different way due to neurological differences. Some examples of neurodiversity include:

  • Dyspraxia
  • Dyslexia
  • Attention Deficit Hyperactivity Disorder (ADHD)
  • Dyscalculia
  • Autistic Spectrum
  • Tourette Syndrome

Making your designs accessible to neurodiverse people isn’t difficult, but it requires an understanding of your audience and their specific needs.

Often, people who live with autism (especially those towards the non-verbal end of the spectrum) can benefit from visuals to help aid their development. Using simple icons can be a great way to make your designs more accessible to them.

In this daily schedule example, clear icons are used for each activity.

Morning Routine icon infographic accessible design


 

Want to learn more about using icons?

Another way to ensure your designs are accessible for people across the neurodiverse spectrum is to make them simple.

Avoid:

  • Walls of text
  • Complicated or bright color palettes
  • Patterns or distracting backgrounds
  • Small fonts
  • Vague descriptions

Instead, use:

  • Short simple sentences and bulleted lists
  • Icons and photos
  • Clean simple backgrounds
  • Large fonts with easy to understand paragraph headers
  • Clear descriptive information

An infographic is a great way to display complex information for neurodiverse people, as you can break the information into simple sections and use icons to illustrate the important points.

Working from home infographic accessible design



Want to learn more about creating effective infographics?

Accessible Design for Dyslexia

Dyslexia is a form of learning disability that affects the part of the brain that processes language, and impacts how a person reads and understands written material. For people with dyslexia, written words can be hard to understand and comprehend.

As many as 43.5 million Americans may have dyslexia, so designing materials that are accessible for dyslexic people is essential.

Because dyslexia is different for everybody, there is no one set of rules to follow that will be guaranteed to make your design more accessible.

Some common best practices you can follow when designing for dyslexic accessibility include:

  •  Using san-serif fonts
  • Use double spacing in between words
  • Avoid using italics
  • Use even amounts of white space between paragraphs
  • Follow a standard reading pattern of left to right
  • Avoid asymmetrical designs

A sans serif font is a font that doesn’t have any embellishments on the letters and is generally easier to read for people who live with dyslexia.

font-categories-personalities


 

When creating any sort of report or white paper that will be read by people with dyslexia, use a simple but consistent layout of columns and short paragraphs.

white paper accessible design


 

A simple layout allows people with dyslexia to focus on the content of your report rather than being distracted by the flow of the design.

Using icons and symbols alongside text can also be a great way for people with dyslexia to infer meaning from your text. Some common symbols and their meanings are:

Symbols and Meanings infographic accessible design


 

Learn more about common symbols and their meanings.

Accessible Design Best Practice

Every accessibility need is different and personal. You should check in with your audience to see if they have any specific accessibility requirements.

Download this handy checklist to make sure that your designs are as accessible as possible:


 

About Alice Corner

Alice is a Content Marketer at Venngage, the online report, presentation, and infographic maker. She writes about nonprofit marketing and good design.