Creating Attractive, Accessible Emails

Create beautiful emails that reach the largest audience possible. Below are approaches to creating accessible, styled emails.

Regardless of the approach you take, make sure you ensure the color contrast of your text and background colors is above 4.5:1.

Avoid if Possible:
The Single Image Approach

A common approach to creating attractive emails is to create an image. This may be through PowerPoint or an email creation application. The result looks good but it has some downsides that make it less than ideal:

  • The image cannot be read by someone who is blind without additional alternative text. The amount of alternative text that is needed is often longer than recommended.
  • An image may be more difficult for individuals with low vision to change. Often these individuals change the color combinations, font size, or overall zoom – all of which do not work well with images.
  • An image takes longer to load than styled text, increasing the chance a reader will skip your email.
  • Images may not display well on mobile phones with smaller screens.
  • Images can’t be searched making your email harder to find when someone wants to go back to it.
  • Images do not allow the user to copy and paste the content.

If you decide to take this approach despite these drawbacks, below are instructions to fix as many of these issues as possible:

  1. Add all of the text contents of the image below the image so that the email includes a text version of the information.
  2. If you include a calendar invitation, make sure it also includes all of the content.

In general, using text with a few supplemental images and styling the content to look the way you want is a much better approach because it speeds up load time, works well on mobile, is searchable, and reaches more people. Below I’ve listed two approaches to creating a look similar to the image above using Outlook and Gmail. The approaches apply to all email content.

The Styling Solution (Outlook)

Outlook allows you to style the emails using the toolbar to create an attractive email design while still using text. This is the easiest approach for someone who does not have much experience with HTML and CSS.

Step 1: Add the text and images to the email.

Step 2: Change the wrapping on the image to tight to allow you to place the text next to the content

Step 3: Go to the Options tab and select Page Color. You can select an existing color go to More Colors… and select a color using the color picker or custom color option.

Step 4: Go back to the Options tab and select Fill Effects. Be very careful to ensure the text color keeps sufficient contrast. Also, avoid adding a texture that will make text difficult to read.

Step 5: If you have a lot of text or sections of text, add headings using Styles under the Format Text tab. The highest heading level should be H1. Below that sections headings should be marked H2. Subsection headings should be marked H3 and so on.

Step 6: Adjust the font color, size, and alignment using the controls on the Message Tab.

Step 7: Add alternative text to images by opening the context menu (right click on the image) and selecting Format Picture from the bottom of the drop down menu. Then click the Layout and Properties Icon and enter alternative text into the Description field under Alt Text.

The HTML Solution (Gmail)

If you are comfortable with HTML and CSS, you can create your email in an editor, display it using your browser, and then copy and paste that content from the browser display directly into your email. If you are not very comfortable with HTML, you can use the following steps.

Step 1: Create an email and place your cursor in the message body.

Step 2: Open the context menu (most often done by right clicking on the message body) and select Inspect. This will open the html editor in your browser.

Step 3: Locate the div that has aria-label=”Message Body” in it. Typically, if you opened the context menu from the message body, the correct div will be highlighted. If it is not, you can open Inspect again without closing the html editor and it will move the focus to the correct div.

Step 4: Open the context menu for the div (right click on the div) and select Edit as HTML. You should see the div expand and below it you will see some content. In this image, the content is a style tag.

Replace all the content below the div with html that displays what you want. If you are able to the following text:

< table width=”100%” height=”100%” role=”presentation”>
<tr>
<td width=”100%” height=”100%” bgcolor=”#17444E” padding=”3px”>
<table>
<td>Image Goes here </td>
<td>Content Goes here </td>
</table>
</td>
</tr>
</table>

Step 5: Close the html editor in your browser. Your email should look something like this. The text may be black but you can change it to white using the Text Color button at the bottom of the email.

Step 6: Highlight the text “Image Goes Here” and replace it with the desired image using the Insert Photo button.

Step 7: Highlight the Content Goes Here and replace it with the desired content. Use the size, text color, align and other buttons to create the look you want.

%d bloggers like this: