Accessibility best practices can help ensure that your content can be understood by all of your subscribers, including those who use assistive technologies, like screen readers. They also make messages easier to read and understand for all of your subscribers.
Provide enough color contrast
If there’s not enough contrast between your text and background colors, it can be difficult to read the content of your email.
These tips can help make your emails easier to read:
- If the font size is set to 24 or higher in the Attentive email builder, use colors with a contrast of at least 3:1.
- If the font size is set to 19 or higher and the font weight is set to bold in the Attentive email builder, use colors with a contrast of at least 3:1.
- For all other text, use colors with a contrast of at least 4.5:1.
You can check the color contrast using an online tool such as https://webaim.org/resources/contrastchecker/ or https://colorable.jxnblk.com/.
Separate images and text
Web browsers allow you to adjust font sizes and font spacing to make content easier to read. If your email uses images that contain text, content can be difficult to read because the text in the image can’t be adjusted.
Consider these tips if your images contain text:
- If possible, remove the text from the image and use the Attentive email builder to place the text next to the image.
- If your image is a logo that contains text, be sure to follow the steps in the Add alternate text to your images section below.
- If you can’t remove text from the image, follow the tips in the Provide enough color contrast section above to help make the text easier to read. Be sure to also follow the steps in the Add alternate text to your images section below.
Add alternate text to your images
Because people who use screen readers or who’ve turned off images in their email apps won’t be able to read the text that’s part of an image, you should always add alternate text to the image. When an image includes alternate text, screen readers announce the alternate text and email apps show an image’s alternate text when the image doesn’t appear.
Follow these steps if your images contain text:
- In the Attentive email builder, click the image that contains text.
- In the panel on the right, under CONTENT PROPERTIES, enter alternate text in the Alternate text field. Be sure to enter all text that’s visible in the image itself. If the image is a logo, include the company name followed by any other text that’s visible in the image.