Creating Accessible Emails
Guidelines for Creating Accessible Emails
Font
- San Serif fonts work best (Arial, Helvetica, or Verdana)
- Set your font size between 12 and 14 points. In Gmail that means no lower than “Normal” and not larger than “Large”
- Bold and italics are acceptable for emphasis. If you use color to call something out, use bold or italics as well
- DO NOT use underlines in electronic communications unless the text is a link.
Colors
- Use high contrast colors
- On white backgrounds, avoid low-contrast colors (no yellow!!)
- Avoid dark backgrounds when possible (stick to white background and dark text). If using dark backgrounds, avoid using dark colors - keep contrast high.
- Note - people with colorblindness may perceive reds and greens as black or grey
- Examples:
- These are acceptable color combinations
- These are not
Tools for checking color contrast
- WebAIM Contrast Checker (Recommended)
- WCAG Contrast Checker (Firefox addon)
- Color Contrast Analyzer (Chrome addon)
Structure
- Hierarchy of information
- Keep important information close to the top of the e-mail
- Go into more detail later in the body
- Gmail does not allow for headings - this is the ONLY exception to creating “fake” headings by using bold, bigger font sizes, all caps, etc. If you are using other email clients this may not be an issue
- Use real bullets and numbered lists
- Use number lists when the order is important
Photos or Images with Text
- Ask yourself if an image is necessary for the message, does it relate to the content and how.
- If photos are needed, describe the action or feeling of the photo(s) and how it relates to the content.
- Avoid images with text. If the image is necessary, then repeat all the text included in the image as part of the email.
Find a great example of combining a poster image and text information (http://bit.ly/SwatEmailExample)