What to look out for in an accessible design?
The design determines how easy the text of your newsletter is to read. Therefore, keep the points below in mind when designing. They slightly limit your design choices, but you can still create an attractive and modern newsletter.
Making text easy to read
The settings below are interrelated: for example, a large font helps very little if the lines are too close together.
- Font size: for many people, anything smaller than 14px is already difficult to read. Therefore, use a minimum of 14px. On mobile screens, text is often displayed even smaller. Use media queries to guarantee a minimum of 16px there.
- Font: thanks to web fonts, you have plenty of choice, but not every font is equally legible. Choose a font that does not look too much like handwriting and where the spacing between the letters is not too small. Also pay attention to the fallback font, which appears if the recipient’s email client does not support web fonts.
- White space: keep the line spacing at least 2px larger than the chosen font size and leave space between paragraphs. Space between the text and the edges of the email, and between images and text, makes your newsletter extra clear.
- Alignment: align your text to the left. That is the most comfortable to read. Justifying text (‘justified’) is common in print, but on a screen, the irregular spacing between words creates a restless appearance.
Taking colour, imagery and movement into account
- Contrast: people with impaired vision benefit from a clear distinction in colours, especially between the text and the background. Also pay attention to your colour combinations for people who are colour-blind.
- Number of images: images are less suitable for people with a visual impairment. You can of course use images, but make sure there is a good balance between text and imagery.
- Text in an image: including text as an image gives you more control over the appearance, but a screen reader cannot read that text aloud. Therefore, include all text in your newsletter as regular (plain) text.
- Flashing content: rapidly flashing images or colours can trigger a seizure in people who are sensitive to this. It is therefore better not to use them.
Buttons and links to tap
Make buttons and links large enough. This helps people who cannot move their mouse or fingers very precisely, and on small screens, every reader will notice the difference. The text on such a button is also important: you can read more about this under the text for links and buttons.
Checking your design
- View the newsletter without images and enlarge the content by zooming in. Check whether everything still looks good.
- Use an online tool to test whether the colour contrast is high enough, for example via https://contrastchecker.com.
Also read how to take accessibility into account when structuring the HTML code.