|
Type E:
From Beyond the Envelope™
|
|
|
Brands really care about colour. They dedicate pages and pages of their brand guidelines to it. It’s an essential part of their identity.
When Nationwide Building Society launched its recent rebrand, its agency, New Commercial Arts, took up a third of their interview with Design Week, talking about colour, including how accessible and WCAG conformant their new red and dark blue colours are!
The fact is, colour is really important. Colour, when used well, can make your email. Conversely, colour, when not used well, can break your email.
So, in this issue, I’ll look at a few ways in which you can use colour well. And I’ll do it using Type E: as a case study.
Using colour
In design of any discipline, designers use colour purposefully, and we, as designers of emails, are no exception. We use colour within a visual language to help our recipients consume our email’s content.
The colours available to us are usually limited to those within a brand’s colour palette and consist of primary, secondary and tertiary colours. That limitation is no bad thing, as it prevents us from overusing colour in our designs.
|
The Beyond the Envelope™ Colour Palette
The Beyond the Envelope™ Colour Palette, which I use within Type E:, is simple, and currently consists of two Primary Colours, four Secondary Colours and one Dark Mode colour.
Primary Colours
Secondary Colours
Dark Mode Colour
|
|
Once you’re familiar with your colour palette, you can decide which of your colours you’ll style your email’s elements with, which will depend on their purpose within your email.
|
The purpose of your email’s elements
Headings
Your email’s headings have an important purpose. They quickly convey your email’s main message and your email’s sub-messages to your recipients as they scan them, when they scroll down your email.
To help your recipients scan your headings, you need to style their size, weight and colour according to where they sit within your heading hierarchy.
Your heading hierarchy enables you to order your headings in order of importance. Your most important heading may be a headline (a heading level 1), and your least important heading may be a subheading (heading level 2-6).
While there are six heading levels, you don’t need to include all of them in your email. Your highest heading level could be a heading level 2, and your lowest heading level could be a heading level 4. If you do include a heading level 1 in your email, that should be the only one.
- Heading Level 1 – h1 (Headline)
- Heading Level 2 – h2 (Subheading)
- Heading Level 3 – h3 (Subheading)
- Heading Level 4 – h4 (Subheading)
- Heading Level 5 – h5 (Subheading)
- Heading Level 6 – h6 (Subheading)
The higher your heading is in the hierarchy, the more ‘scannable’ it should be. This is where size, weight, and, of course, colour come in.
|
Headings in Type E:
In this issue of Type E: there are four heading levels. There’s a heading level 1, a heading level 2, and several heading level 3s and heading level 4s.
To ensure those headings higher up the hierarchy are scannable, I’ve styled them in Dark Red (#cc0033), the strongest colour in the Beyond the Envelope™ colour palette.
This includes the nameplate, ‘Type E:’, which is a heading level 1, and all the heading level 3s, the first being ‘Using colour’.
The exception is ‘The colour issue’, a heading level 2, which I styled in Dark Grey (#333333) to prevent it from clashing with the heading level 1. I’ve used white space to allow recipients to see it easily.
I’ve styled all heading level 4s in Dark Grey.
|
Paragraphs
Your email’s paragraphs also have an important purpose. They are there to communicate your email’s content. Unlike headings, they don’t need to be scannable, but they do need to be easy to read.
Therefore, you should consider carefully the colour of your text and the colour of your text’s background. The colours should contrast. How much they should contrast depends on the size and weight of your text.
Conforming to the Web Content Accessibility Guidelines ensures that your colour contrast is sufficient, and you can use several tools to test this, including WebAIMs Contrast Checker.
|
Paragraphs in Type E:
In Type E: I style paragraphs in Dark Grey (#333333) against a white (#fffffff) background – a colour contrast of 12.63:1. The Web Content Accessibility Guidelines require ‘normal text’ to have a colour contrast of 4.5:1.
|
Links
Links should be easily identifiable, as you want to make it easy for your recipients to see them and engage with them.
You can use colour to achieve this by styling the link text, the link underline, or both, in a colour that contrasts against the paragraph it sits within and its background colour.
One thing you need to be aware of with links is that you must ensure you are differentiating them from other text, preferably with underlines, as they help recipients recognise them as links.
|
What the Web Content Accessibility Guidelines say about the use of colour.
The Web Content Accessibility Guidelines are quite clear about the use of colour.
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.
|
|
|
Links in Type E:
In Type E: I style links in bold to differentiate them from the text that surrounds them and their underlines in Light Red to make them more scannable.
Link
|
Buttons
Like links, buttons should also be easily identifiable, as you use them for primary and secondary calls to action in emails. They should also be consistent in colour with those on your email’s respective landing pages.
|
Buttons in Type E:
In Type E: I style buttons differently, depending on whether they’re primary or secondary buttons and where I position them within the email.
Primary buttons
If they’re within the main message, I style primary buttons in Dark Red with White text. If they’re within the footer, I style primary buttons in White with Dark Grey text.
Secondary buttons
If they’re within the main message, I style secondary buttons with a Dark Grey border and Dark Grey text. If they’re within the footer, I style secondary buttons with a White border and White text.
|
Cards
Cards contain content that stands alone within the main message of your email. Styling their background with a colour contrasting your email’s background makes them more salient.
|
Cards in Type E:
In Type E: I style cards (like this one) in Light Grey, which helps recipients distinguish between the email’s main message and sections that provide additional information.
|
|
Specify colour using hexadecimal colour code values, which comprise six letters, six numbers, or a combination of the two. Type E:’s two Primary Colours, as you’ve seen, are specified with #cc0033 and #333333.
Abbreviating colour code values
It’s possible, when the hexadecimal colour code values are made up of three sets of pairs (as is the case here), to abbreviate them. For example, you can specify:
- #cc0033 as #c03
- #333333 as #333
|
|
|
Conclusion
- Familiarise yourself with your colour palette.
- Use that colour palette purposefully.
- Work through your heading hierarchy, styling your highest headings with your strongest colours.
- Use colour to differentiate your links from the other text on your email, and ensure you underline them.
- Specify your colours using six-character or three-character hexadecimal.
|
|
Made with Envelope Developer™
Powered with 
|
|
|