Text Too Light on Coloured Backgrounds in Emails

Light on colour

A newsletter template is usually designed once, in the brand colour: white text on a teal band, pale yellow headings on navy, light grey details on a soft blue.

On a large monitor, indoors, it looks polished.

The people who receive it read it on a phone in daylight, or with eyes that are not what they were. The dates and times fade into the background.

The website may have been checked for this. The email template, designed once and sent every month for years, rarely is.

Where email contrast goes wrong

• White text on a mid-tone or bright brand colour.
• Pale grey details, such as dates and times in small type.
• Buttons with white labels on a light colour.
• Text over photographs, readable in one corner and not the next.
• Footers in tiny light grey on a coloured band.

The fifth matters beyond comfort. The footer holds your address and the unsubscribe link, which the law on commercial email expects to be set out clearly.

Why phones make it worse

Most newsletters are opened on phones, often on the move: at a bus stop, in a queue, on a walk at lunch. A screen outdoors competes with the sun, and every pair of colours loses contrast in the glare.

Many people also keep their brightness low to save the battery, which flattens light colours further.

A combination that only just works indoors stops working at the bus stop. Dark text on a light background holds up far better than light text on colour.

The website standard applies

The check used for website text carries over unchanged. WCAG 2.0 sets 4.5 to 1 as the floor for normal text against its background, and 3 to 1 for large text.

What differs is how email fails. Websites tend to fade through pale grey on white; newsletters fail through light text on a strong colour, which can fall much further short.

White on many brand blues, greens, oranges and teals misses the mark. White on yellow barely registers at all.

The colour codes are in the template's settings, or the designer has them, and any free contrast checker will give the ratio for each pair.

What email adds

Email has quirks the website does not. Some versions of desktop Outlook ignore background images, so white text designed to sit on a photograph can land on plain white.

Many email programs also block images until the reader allows them. A coloured band made from an image disappears, and the light text on it goes too.

The cure for both is a solid background colour set in the template itself, with any image as an extra, so the text is readable whether or not the image arrives.

A worked example

A seniors' centre sends a monthly email with its program calendar: exercise classes, card afternoons, outings and the occasional talk.

The template, made when the centre's logo was refreshed, set white text on the logo's soft teal, with dates and times in pale yellow.

When the fall program went out, several members turned up at the wrong time for a new class. Others had printed the email and gone over the times in pen.

The cause was plain once checked. White on that teal fell well short of the standard, the yellow was worse, and many members read the email on tablets beside a window or with low vision.

The fix kept the teal as a band across the top and a rule between sections. The calendar moved to black text on white, with the dates in bold and the type a size larger.

The same email now reads clearly at arm's length on a phone outdoors, which is the test it had been failing.

Brand colour without the cost

None of this means abandoning the brand. Colour works well wherever nobody has to read through it: a band at the top, a rule between sections, an icon, a border around a box.

For headings, a darker shade of the brand colour on white often passes where the original does not.

Buttons can use the brand colour with dark text, or a deeper shade with white text, as long as the pair passes the check.

Fonts that never arrive

Email has a font problem the website does not. Many email programs ignore the web fonts a template asks for and use a standard font instead.

A heading designed in a sturdy custom font can arrive in a thinner, smaller substitute, and some versions of desktop Outlook switch to a serif font altogether.

Light text on colour fades further in a thin substitute. Judge the colours in the fonts readers will actually get, and end the template's font list with a common font of similar weight.

Never leave important details to colour alone, such as red for cancelled. Add the word as well.

Test the email, not the design

Send a real test to your own phone and read it outdoors, as you would check the website.

Then open it with images turned off, and in desktop Outlook if your readers use it at work.

Look hard at the first screen. On a phone, the top band of brand colour is often all that shows before someone decides whether to scroll, so its text needs to be the most legible on the page.

Finally, ask a regular reader, not the designer, to read the dates aloud from arm's length.

The counter-case

Some light-on-dark combinations pass comfortably. White on deep navy, dark green or black can be perfectly readable, and a template built that way may need no change.

Large headings also have a lower threshold, so a bold title in white on a mid colour may pass where body text would not.

A single bold line over a photograph can pass as well, provided the photograph is dark where the text sits.

But anything people must read, such as dates, times, prices and the unsubscribe link, belongs in dark text on a light background.

Checking the contrast

1. List every colour pair in the template.
2. Check each pair with a contrast checker.
3. Move body text to dark on light.
4. Keep brand colour for bands, rules and borders.
5. Set solid background colours behind any image.
6. Put dates and times in bold.
7. Read a test on a phone outdoors.

Step seven is the one that convinces people, because a template that looked fine at the desk often fails within half a minute in the sun.

The same problem on the website itself is covered in grey text on white backgrounds.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.