How to manage accessibility requirements for email in Constant Contact

All communications to faculty, staff, and students need to be accessible to a diverse audience. Accessibility in Constant Contact means designing emails and websites so everyone, including people with disabilities using assistive technology (like screen readers), can understand them.

Five required practices that will make your content accessible for everyone:

Use good color contrast
Describe images
Use meaningful link text
Label headings well
Use readable fonts with appropriate line spacing

By following these guidelines, you make your content inclusive, improve user experience for all recipients, and fulfill the WCAG AA 2.1 accessibility requirements.

1. Color Contrast

When changing font color or adding any sort of visuals to your email, it is important to make sure font color contrasts well with the background. It is fashionable to use a light gray font on white, and there have even been examples of people using a black font with a dark blue background. But if you want people to really read your content, don’t make it hard to see. Using black font on a white background is a great option.

Example of high contrast light text on dark background

ACCESSIBLE: Example of high contrast — light text on a dark background

NOT ACCESSIBLE: Example of low contrast — dark text on a dark background

In Constant Contact, a preset Brandkit has been established for easy compliance.

Outer Background - Fredonia Blue #0033a0
Inner background - light blue #e3f0fd
Feature layout background - light grey #fdfefd
Dividers - dark blue #001f5f
Button color - teal #2b8ca1
Button text color - light grey #fdfefd
Font color - dark blue #001f5f
Link color - black #1d1b19

Accessible color palette Brandkit in Constant Contact

In Constant Contact, the user can edit the template or text colors by highlighting any portion of text and selecting the Edit font color button. We recommend adhering to Fredonia’s brand colors listed above, to avoid color contrast issues.

If you do chose to modify the colors, you can check to see if the chosen colors meet contrast standards. We recommend using a free accessibility checker tool like WAVE or the Color Contrast Analyzer. Both of these tools allow you to quickly check the contrast of any color and adjust it until it meets standards.

Web accessibility guidelines state that the contrast ratio between any text and the background color should be at least 4.5:1. This is also true for adjacent colors in graphics.

2. Image Descriptions

Adding text descriptions to all graphics included in your email is important not only for people who can’t see or have low vision, but also as a backup in case the image breaks or does not load properly for some users. When uploading an image into Constant Contact, the alt text is by default the filename, which is not ideal. If the image is purely decorative, such as a background color or a line, you can leave the alt text blank. However, in most cases you will want to change the alt text to a concise description of the image.

Image Upload window

Alt text window example

3. Meaningful Link Text

When possible, you should replace all URLs with descriptive link text. For example, when you link to an article, the link should be the name of the article and not the website address or a vague term like “click here” or “read more.” In Constant Contact, you can easily add the link text alongside the URL when you select the Insert Link button.

Example of meaningful link text

4. Good Headings

Break up content with meaningful headings.

Use simple, responsive templates, preferably one or two columns.
Create logical reading order (top-to-bottom, left-to-right).
Use nested headers (H1, H2, etc.) for sections to help screen readers navigate.
Avoid using tables for layout; use text and columns, or add role="presentation" to layout tables.

How to select “nested headers” in Constant Contact

5. Readable Fonts and Line Spacing

On the web, it is easier to read a sans serif font such as Arial or Franklin Gothic or Roboto. Another readability consideration is to include adequate spacing between letters (avoid condensed fonts) and lines. Left-justified text is easier to read then center-aligned because the jagged left edge creates problems for people with dyslexia and other print disabilities.

For example, Figures 1 and 2 below, show the same content. The first one has poor color contrast and inadequate spacing between letters and lines. The second example has a good heading, good color contrast, and good spacing between letters and lines. Which would you rather read?

Figure 1: Not Readable

Figure 1: Non readable text example

Figure 2: Readable

Figure 2: readable text example