Color contrast checker

Why Email Colors Matter


When designing an email or an email template, how often do you consider the colors you’re using?

If it’s a special email – like a holiday send – maybe you’ll switch it up from the norm. But, more often than not, you probably stick to a brand color palate to keep your messages consistent.

Although it may be routine for many of your emails, color is an important part of the email design and development process, especially if you’re striving for accessible emails. Certain colors or color combinations can be difficult to read if a subscriber has a vision impairment or color deficiency (color blindness).

Let’s dive into the details around email accessibility and color, and how you can design your emails in a way that every subscriber can read and understand.

What Is a Contrast Ratio?

The contrast ratio is the variation between the background color and the foreground color. In an email, the foreground color is often the color of text you’re working with, but it can also apply to graphics, diagrams or logos.

The Web Content Accessibility Guidelines (WCAG) 2.0 set standards for web accessibility, including contrast ratio minimums. WCAG has a calculator that assigns a number between 1 and 21 that indicates how much contrast your background and foreground colors have. A 1:1 ratio is very little contrast (white text on a white background) while a 21:1 ratio is high contrast (black text on white background).

Why Do I Need Contrasting Colors?

Worldwide, the World Health Organization estimates 1.3 billion people live with some form of vision impairment. Roughly 217 million of those have moderate to severe vision impairment. How many of those people are interacting with your emails?

Colors that have a lower contrast ratio can be difficult for certain subscribers to read; people with vision impairments may have trouble discerning text that is too close to the background color.

Check out the diagram below for examples of good and bad contrast examples. Try squinting your eyes a bit and see how difficult it is to read the bad contrast examples:

color contrast ratio examples

WCAG Color Contrast Guidelines

WCAG’s Level AA standards specify that your email colors should have a contrast of at least 4.5:1 for standard sized text. For text larger than 23px or bold text larger than 18px, the contrast ratio can be 3:1.

If your team needs to meet level AAA guidelines, you must use a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

If you’re curious how your email design measures up to these standards, run it through Campaign Precheck’s accessibility feature. The feature includes a step that checks the contrast ratio and flags anything below the level AA standard. If there is anything that doesn’t meet the standard, Campaign Precheck will adjust the email code so the colors meet the minimum requirements.

Don’t Rely on Colors

If a subscriber cannot see blue, will he or she be able to figure out where the links are in your email?

For people with certain color vision deficiencies, it can be difficult to tell what text is clickable if it does not have a different typeface or an underline. And if your subscribers can’t see a link, they can’t click and engage with your email.

When designing and developing your email, remember that color shouldn’t be the only defining characteristic for a link. Try to use underlines, bold typeface, symbols (>), or buttons to indicate a clickable section of the email.

Link accessibility example

Campaign Precheck’s accessibility checklist will scan all the links in the email for you to make sure they include an underline. If there’s a link missing one, the tool will add it in for you – no need to adjust the code or start the design from scratch. The tool will also show you what your email looks like with different color deficiencies.

Color deficiency tool

This principle should apply to all text in your email. If you’re using color to differentiate some text from others, remember that not every subscriber may be able to see those colors.

Other Accessible Email Best Practices

Considering color in your email is only one part of an accessible email; there are many other design and coding practices you can implement to make your messages readable for every subscriber. Check out these posts to learn more about creating accessible emails:

Author: Melanie Graham

Leave a Reply

Your email address will not be published. Required fields are marked *

Free Email Goodies