The Missing Bit

In HTML emails, always set text and background colors in pair
June 7, 2020

design rant

My system has a dark theme, which means my thunderbird has a dark theme too.

The problem is very simple, when an HTML email sets text color only, without setting background color, the email becomes unreadable.

With my dark theme, the default background color of an email is very dark gray, and default text color is near white.

Now if an HTML email sets the text color to dark gray (to change it slightly from black), it will be dark gray on dark gray as the email CSS do not override the background color.

Here is an example of a Zendesk support email I got today:

Text is unreadable

The fix is very simple, just stick to the following rule: Always change text color and background color in duo.

So if you design an email template or an email client that send HTML emails (which is often bad, I don’t want to receive your text email as 9pt times new roman HTML), PLEASE, stick to this rule.

The fix is simple, this is the source of that email:

 <div style="padding: 10px ; line-height: 18px;
             font-family: 'Lucida Grande',Verdana,Arial,sans-serif;
             font-size: 12px; color:#444444;">

just add background-color: #ffffff and I’m happy:

 <div style="padding: 10px ; line-height: 18px;
             font-family: 'Lucida Grande',Verdana,Arial,sans-serif;
             font-size: 12px; color:#444444;
             background-color: #ffffff">

I could switch thunderbird to plain text, but I sometime receive really nicely formatted HTML emails and I’m happy to see those.

If you wish to comment or discuss this post, just mention me on Mastodon or Twitter.

Related posts