The WSIB brand guidelines: our colours

The WSIB brand colours

While we have an extensive colour palette to work with, we don’t use all colours in the same way and to the same extent. Tips on where these colours are used can be found below. Also check out the colour usage and accessibility sections below for more specific colour information.

Primary colours

Our primary colours are the ones that should be used most often across our communications. These include the core background colours that our logo may appear on (Midnight, Trillium and Frost), as well as Bluejay.

Bluejay and Midnight may also be used for subheads in documents to help create a visual hierarchy and make content in documents more scannable.

Midnight

Hex

003359

RGB

0 / 51 / 89

CMYK

100 / 57 / 12 / 61

PMS

540

Trillium

Hex

FFFFFF

RGB

255 / 255 / 255

CMYK

0 / 0 / 0 / 0

Frost

Hex

E5F5FB

RGB

229 / 245 / 251

CMYK

8 / 0 / 0 / 0

Bluejay

Hex

0D73B8

RGB

13 / 115 / 184

CMYK

86 / 50 / 0 / 2

PMS

3005

 

 

Primary accent colours

The blues and greens of our primary accent colours symbolize stability, reliability, renewal and well-being. They can be used in different combinations for text and small touches of colour.

Check out the accessibility section below for specific combinations that you can use to make sure you meet accessibility requirements. As a rule of thumb, if these colours are used to highlight words in a headline, they must be used over Midnight, not Trillium.

Sky

Hex

009BDB

RGB

0 / 155 / 219

CMYK

76 / 24 / 0 / 0

PMS

2925

Lake

Hex

56B8E3

RGB

86 / 184 / 227

CMYK

59 / 9 / 2 / 0

Robin’s egg

Hex

3FCFD5

RGB

63 / 207 / 213

CMYK

61 / 0 / 22 / 0

PMS

319

Willow

Hex

B1E852

RGB

177 / 232 / 82

CMYK

34 / 0 / 84 / 0

Field

Hex

7DC242

RGB

125 / 194 / 66

CMYK

56 / 0 / 100 / 0

PMS

376

 

Secondary colours

Our secondary colours shift away from the cool blues and greens of our primary and primary accent colours to allow us to selectively include pops of vibrant “warm” tones. To help maintain our distinctive brand, we should minimize using these colours to two scenarios:

• Complimenting the colours above in charts and data visualization
• Spot and select use for enterprise-wide programs

Pear

Hex

EEFD55

RGB

238 / 253 / 85

CMYK

11 / 0 / 79 / 0

Apricot

Hex

FFCC3F

RGB

255 / 204 / 63

CMYK

0 / 20 / 85 / 0

Monarch

Hex

FF7900

RGB

255 / 121 / 0

CMYK

0 / 65 / 100 / 0

Neutral

The majority of our body copy in both print-based and online materials will appear in Carbon. Shield is a secondary colour that may be used for certain text elements and in our digital design system.

Carbon

Hex

333333

RGB

51 / 51 / 51

CMYK

0 / 0 / 0 / 90

PMS

447

Shield

Hex

5E6A71

RGB

94 / 106 / 113

CMYK

66 / 50 / 45 / 16

PMS

431

 

Tips on how we use our colours

To help build awareness and recognition of our brand's visual identity, and make sure our materials are always accessible, it's important to use our colours consistently. So, try to think about the overall colour impression that our communications make, from presentations to social media and beyond.

Relative proportion of colour use

A visual guideline has been created to help us maintain brand consistency and remain accessible for everyone. The primary colours play a very important role in all brand communications while primary accents should be used selectively to draw attention and add hits of vibrance to certain elements like important words or key subjects in photography. Our Frost tint is intended for backgrounds and neutral colours are used for text, graphic dividers and borders.

Colour combinations in layout

Some colour combinations are more successful than others. Our primary and primary accent colours have been designed to blend and compliment each other. Keep accessibility in mind when you plan text and background colour combinations. Secondary colour use should be very selective, and always in very small proportion.

Here are a few examples of how the colours are used.

Colour contrast for accessibility

Having "accessible" designs means that our products, services and environments can be used by people with disabilities. In order for digital products to meet WCAG 2.0, normal text (18 pt. and below) must maintain a minimum contrast ratio of at least 4.5:1. Large text (18 pt. and above) requires a minimum contrast ratio of 3:1. Please refer to the recommendations in each colour swatch below. If a text colour doesn't appear on a background colour below, it's because it may not meet accessibility requirements, so the combination should not be used.

Accessible combinations

Working with two-colour headings

Bringing emphasis to key words in our headings should be done with colour rather than changing font weight. When using two-colour headings, make sure the colour combinations you use are all accessible based on the guidelines above. If you’re working with a background colour that’s not accessible with multiple colours, please use a one-colour heading.

For more information on digital accessibility, visit www.w3.org/TR/WCAG/.