Content Design Blog

On email design and content workflow

Making accessibility a habit

Accessibility in email design doesn’t have to be an arduous task

Making accessibility a habit

We all understand the importance of accessibility. About 15% of the world’s population lives with some degree of disability, and 10% of the world’s population have some form of visual impairment. Everyone should be able to read the emails we send out. And there are standards we can follow for making our emails more accessible. And, they may not be as difficult to implement as you think!

Design rule: is it easy to read?

This should be the one question that permeates through all aspects of your email’s design and can be accomplished the following ways:

Having a good contrast ratio means the background and foreground colors can be easily distinguished from each other. For example, black text on a white background offers the best color contrast ratio of 21:1, for the easiest legibility. To meet standards requirements, the minimum contrast ratio should be 7:1 for normal text, and 4.5:1 for large text. Here’s a tool you can use to test your colors.

Coding rule: keep in mind semantics

Making your code semantic means giving parts of it meaning so tools for people with disabilities can reference content correctly:

And most importantly: include alt attribute text for all images. The text should be descriptive, but not too long, with each photo or graphic containing unique descriptions. If appropriate, leave the attribute blank instead of removing it completely. Since some email clients block images from being loaded, you can also look at styling your text where possible to make it easier to read when images are turned off.

Here’s another tool to check your email code for all of these accessibility features.

The more you practice these techniques, the easier things get, until it becomes a part of your regular workflow. Keep a checklist to start out with. We’ve updated our email template guide with accessibility callouts under both design and coding sections with a checklist you can refer to.

Photo of Ovi Demetrian Jr By Ovi Demetrian Jr

Share this post

Tweet | LinkedIn post | Facebook post | Email a team member