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 people are able to understand the information presented.
(Note accessible design is a close cousin to inclusive design. The main difference is that inclusive design is more of a mindset, while accessible design comes with a set of guidelines.)
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
- Accessible Design for Visual Impairments
- Accessible Design for Neurodiversity
- Accessible Design for Dyslexia
- Accessible Design Best Practice Checklist
Accessible Design Templates [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.
If you have to use colors to show contrast, avoid using problematic color palettes and opt to use accessible colors instead.
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:
Want to learn more about color theory and color blind design?
- Color Blind Design Guidelines: How to Convey Meaning to Everyone [With Examples & Templates]
- A Total Guide to Accessible Colors [Including Palettes & Templates]
- Color Blind Friendly Color Palettes
- Everything You Need to Know About Picking and Using Brand Colors
- Watch: Color relationships explained
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:
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.
Where possible, try to use a lighter color for your background and a darker color for your text. Avoid using a patterned background.
Learn more about color relationships:
Related: Image Alt Text: Definition and Best Practices for Accessible Designs
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.
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.
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.
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.
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:
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:
Accessible Design Templates
Now that you understand the different types of accessibility and their needs, it’s time to put your accessible design into practice.
If your department or organization doesn’t have budget for a designer, using a pre-made template can be a quick and easy way to create professional looking designs. Using a slick graph, well designed presentation, or informative but polished infographic can help build trust in your organization.
Related: 8 Best Practices for Designing for Diversity and Inclusion
Accessible Graphs
Graphs are often used alongside reports or presentations to give detailed insights and understanding of your data.
But often graphs don’t take accessibility into account. Using colors that are too similar, or not labelling data can mean that your data isn’t accessible.
Make Your Graphs Accessible with Color
When using a graph template, like this pie chart template example below, make sure that you are using shades and contrasting colors to differentiate data.
Show Difference with Shades in your Accessible Bar Charts
Using shades of colors is also effective in bar charts to show different genres or topics. In this accessible chart example the box office sales have been arranged according to genre. The chart is also well spaced out and easy to understand.
Label Your Charts Thoroughly
Labelling your charts is the easiest way to make them more accessible. Especially if your value range is quite large, adding details to each point on your line graph is really helpful.
In the line chart template below, a note has also been added to confirm overall decrease, which helps aid comprehension of the chart.
Accessible Presentations
Presentations are an important type of communication when it comes to accessibility. Especially if you are presenting a pitch deck or a business proposal and it’s crucial to make sure everybody understands the information.
Presentations are also often used during employee onboarding to communicate important information about company culture – and being an inclusive employer should start here.
Create a Presentation With Simple Colors
In the pitch deck example above a simple color palette has been used, and the contrast between the pink and black is suitable for most people who live with color blindness. The fonts are large and easy to read, and important information has been highlighted using bold or different colors.
Use an Agenda in Your Presentations for Accessibility
In the remote team meeting presentation below, the agenda has been set out at the start of the meeting. This is especially useful for accessibility when remote working, as it makes sure everybody knows what to expect straight away.
Illustrate Your Reports with Icons for Accessibility
Another way to make your presentations more accessible is to use icons throughout the design. An icon can help provide context for information, and can help you create engaging slides.
Accessible Infographics
Creating accessible infographics is simple with a Venngage infographic template. Following all of the rules we’ve covered in this post, such as using contrasting colors, simple fonts, and icons, you can create engaging and accessible infographics.
Use Icons in Your Accessible Infographics
In the accessible infographic template above, icons have been used alongside the different shades of blue to show an increase of scores on a scale. Each section is also clearly labelled. The infographic is well spaced out and is easy to understand. It also contains a website to visit for more information, which helps provide context.
Use Boxes to Separate Information in Your Infographic
In the infographic example below icons are used throughout to illustrate the stats in each box. Each individual stat is also placed in its own box to help differentiate the information. The colors used are simple and makes the design easy to read.
Use a Timeline Infographic to Communicate Processes
If you’re creating a timeline infographic you should make sure your design is fully accessible. Timelines are especially good for creating consistent layouts and flows.
In this accessible infographic example, the timeline follows a “zig zag” pattern to progress week to week. The use of lines that connect icons makes it very easy to follow.
Accessible Reports
Reports are often dense informational documents that contain a lot of important information. Making sure that your readers can understand and digest the important points easily is important for accessibility.
Create an Exec Summary in Your Reports
With reports, one way to achieve this is to include an infographic summary. An exec summary presented as a one page infographic at the beginning of a report should highlight the key data points.
If you’re an organization that produces annual or quarterly reports, you can create an interesting and accessible report template that you can reuse again and again.
Use Icons in your Annual Reports for Accessibility
Using an annual report summary template like the example below makes good use of icons and graphs. The font is simple to understand and the important information is highlighted in a separate “year at a glance” box.
