|
Type E:
From Beyond the Envelope™
|
|
|
Colour is really important. When used well, colour can make your email. When not used well, colour can break your email. In the last issue, I looked at what it means to use it well. In this issue, I’ll look at what it means to not use it well – and how to avoid doing so.
Introducing too many colours – into your colour palette
Introducing too many colours into your colour palette and into your email can cause confusion and cognitive overload, making it difficult for your recipients to make sense of your content.
Less is more. Use two to three primary colours for typography, links, and buttons and three to four secondary colours for other elements like cards and backgrounds. In the Type E: colour palette, I have two primary colours, four secondary colours, and one dark mode colour.
Relying on colour to convey information – on links and buttons
Sometimes, you can be too reliant on colour to convey information. As some recipients have difficulty distinguishing one colour from another, it’s unwise to do so.
You can, for example, exclude underlines from text links and expect recipients to know that a piece of text is a link by relying on its colour alone.
You can also, for example, exclude distinctive shapes from buttons, like rounded corners (Outlook support notwithstanding), making it difficult for recipients to distinguish between buttons and similar-shaped elements:
|
|
As such, it’s wise to include additional visual cues, such as underlines on text links (it’s their native state, after all) and distinctive shapes on buttons to help recipients distinguish one element from another.
Indeed, to conform with the Web Content Accessibility Guidelines (WCAG), text links must display additional visual cues when in the hover state.
|
What the Web Content Accessibility Guidelines say about additional visual cues on text links.
Success Criterion 1.4.1 Use of Color
(Level A)
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
|
We looked at this Success Criterion in the last issue, but this time, I’d like to drill down deeper into one of the techniques for meeting it – Technique G183:
Technique G183:
Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them.
|
So, where you use colour alone to distinguish a text link from its surrounding text, it should have a contrast ratio of 3:1, and the text link should display an additional visual cue, such as an underline, when in the hover state.
|
|
Neglecting colour contrast – on gradients and images
Sometimes, you can neglect colour contrast. It’s easy to implement when you have backgrounds that are solid. It’s not so easy to implement when you have backgrounds that aren’t solid – on gradients and images, for example.
|
What the Web Content Accessibility Guidelines say about colour contrast.
Success Criterion 1.4.3 Contrast (Minimum)
(Level AA)
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
|
If you want your email to conform to WCAG 2.2 Level AAA, you also need to meet Success Criterion 1.4.6. Contrast (Enhanced).
Success Criterion 1.4.6 Contrast (Enhanced)
(Level AAA)
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
|
|
|
|
If you place your text on gradients and images, it becomes easy to neglect colour contrast and ignore the Web Content Accessibility Guidelines (WCAG). In short, to not use colour well.
However, the following five steps can help you to avoid this:
- Identify the hexadecimal value of the colour of your text (Colour A).
- Identify the hexadecimal value of the colour that contrasts the colour of your text in your gradient or image the most (Colour B). (This may be a light colour if you have dark text or a dark colour if you have light text).
- If it helps, use the Colour Picker tool in your favourite photo editing software (e.g. Adobe Photoshop or Affinity Photo) to identify the hexadecimal value of your Colour B.
- Check the colour contrast of your Colour A against your Colour B using a contrast checking tool like WebAIM’s Contrast Checker. Enter the hexadecimal value of your Colour A as the foreground colour and the hexadecimal value of your Colour B as the background colour.
- If your colours pass your desired WCAG Level (A, AA, or AAA), you can use the gradient or image. If they don’t pass, you must adjust your colours until they do, or remove your text altogether.
|
Tips for Colour Contrast
- The size of your font needs to be large enough to read, whether it’s on a white, black, or coloured background. The relationship between size and colour is the basis on which the Web Content Accessibility Guidelines (WCAG) define what meets Success Criteria 1.4.3 and 1.4.6, as we saw earlier. Given that it defines Large Text as 18pt Regular, we can surmise the following:
Approximate
|
pt
|
px
|
|
Normal Size
|
12-17
|
16-23
|
|
Large Size
|
18+
|
24+
|
- The weight of your font needs to be heavy enough to be readable. Fonts that are too light are difficult to read, as they don’t carry enough colour to make them distinguishable.
- The colour of your font and the colour of your background need to have sufficient contrast. You can check this using one of the many tools available, such as the WebAIM Contrast Checker.
|
Forgetting image alternative text – on dark backgrounds and Dark Mode
As you write image alternative text into your code, it’s easy to forget. If you have images placed on dark backgrounds or your recipients view your email in Dark Mode, your alternative text can simply disappear, especially if your Colour A and your Colour B are similar.
Therefore, it’s essential to test your email without images and in Dark Mode (which I’ll look at in more detail in the next issue) to ensure that your alternative text is clear and contrasting. If it isn’t, you can style your alternative text with inline CSS (or internal CSS for Dark Mode) so that your Colour A contrasts your Colour B:
|
Alternative text styling
alt="Your alternative text." style="color:#ffffff;"
|
Creating colour in a silo – without thinking about your website
It’s easy to create colour in a silo without thinking about the colour on your website. However, using the same colours on your email and your website on elements like headings and links, is essential.
‘Continuity of colour’ enables a recipient to navigate seamlessly from email to web without having to think about what they’re doing. Colour should help, not hinder their journey.
|
|
Conclusion
In summary, this is what it means to not use colour well:
- Introduce too much colour – on your colour palette, causing cognitive overload, and making it difficult for recipients to make sense of your email – less is more.
- Rely on colour – as recipients may not be able to distinguish between colours – introduce additional visual cues.
- Neglect colour contrast – on gradients and images, as recipients need to be able to read all text clearly – ensure colour contrast passes WCAG 2.2 Level AA or WCAG 2.2 Level AAA.
- Forget alternative text – as recipients may not be able to see it if its background colour is the same or similar – test to ensure it’s legible.
- Create colour in a silo, as recipients need colour continuity to help them on their online journey – align email and web.
|
|
Made with Envelope Developer™
Powered with 
|
|
|