Skip to main content

Guidelines for Accessible Emails

Creating Accessible Emails

Guidelines for Creating Accessible Emails

Font

  • Set your font size between 12 and 16 points. In Gmail that means no lower than “Normal”
  • There is a lot of debate about which font family works best.  We suggest using San Serif fonts (Arial, Helvetica, or Verdana)
  • If something is important add "Important" or "Note" ensures that all users know something has been emphasized.  Do not use color only call something out as color can not be perceived by those who listen. 
  • DO NOT use underlines in electronic communications unless the text is a link.

Line Height

  • Consider increasing the spacing between lines to improve readability. This is of particular importance for eye tracking and can reduce eye fatigue
  • Line height (line spacing) should be at least 1.5 times the font size; Spacing following paragraphs to at least 2 times the font size

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

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.  Important: 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

Use descriptive link text

Link text should give readers an idea of where they will go when they engage a link.  Some read-aloud and screen reader tools allow users to list all the links in one place. This means some users are getting links out of context.

Here are examples of links that don’t make much sense out of context:

  • Here
  • Click Here
  • Read More
  • Learn More
  • Click Here to Read More

Better options could be:

  • Download installation instructions here
  • Sign up for the vegetarian soup class
  • Read more about metacognition
  • Explore the life and times of Mr. Magoo

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)