Primary palette

We're a primarily black and white brand that uses red in our paint brush assets – for impact and to add meaning – as well as in infographics.

Never use red as a solid background or for decoration. You must always use it to communicate a message.

We use black and white backgrounds to create space for our elements. These colours allow our red brush to really pop.

Name

Colour codes

Black

PMS Black 6
C0 M0 Y0 K100
R0 G0 B0
Hex #000000

White

C0 M0 Y0 K0
R255 G255 B255
Hex #FFFFFF

Shelter Red

PMS 1788
C0 M100 Y95 K0
R255 G0 B34
Hex #FF0022

Rich Black

Can be used to give graphics more depth in colour, e.g. large text set in Barlow Bold Condensed.

C50 M50 Y50 K100

Please note, if you’re using Rich Black as a background where small text is in the foreground, you might need to add a 0.5pt Black stroke to the text.

Do NOT use Rich Black for small text.


Infographic palette

We ONLY use this palette for infographics: graphs, tables, charts. Before using these colours, consider using our primary palette first, above.

When creating infographics, we recommend the following approach to using colour:

  1. Focus on using the primary colour palette first

  2. If you need more colours than Black, White and Shelter Red, try introducing the Black and Red tints from our infographic palette

  3. Use the Pink and Blue swatches for complicated infographics, or when you want to add a flash of colour

Primary palette
Our primary palette should be enough for most infographics. Make sure you try using it first.

Infographic palette
Use Black and Red tints, along with Blue and Pink swatches to support the primary palette.

The infographic colours - There are no set rules here, but try to keep things simple.

Name

Colour codes

Black Tint 5

PMS Black 6 (80%)
C0 M0 Y0 K80
R51 G51 B51
Hex #333333

Black Tint 4

PMS Black 6 (60%)
C0 M0 Y0 K60
R102 G102 B102
Hex #666666

Black Tint 3

PMS Black 6 (40%)
C0 M0 Y0 K40
R148 G148 B148
Hex #949494

Black Tint 2

PMS Black 6 (20%)
C0 M0 Y0 K20
R204 G204 B204
Hex #CCCCCC

Black Tint 1

PMS Black 6 (7%)
C0 M0 Y0 K7
R242 G242 B242
Hex #F2F2F2 

Blue

PMS 299
C85 M15 Y0 K0
R17 G143 B239
Hex #118FEF

Pink

PMS 211
C0 M70 Y0 K0
R246 G50 B150
Hex #F63C96

Red Tint 5

PMS 1788 (80%)
C0 M80 Y76 K0
R255 G51 B78
Hex #FF334E 

Red Tint 4

PMS 1788 (60%)
C0 M60 Y57 K0
R255 G91 B113
Hex #FF5B71

Red Tint 3

PMS 1788 (40%)
C0 M40 Y38 K0
R255 G153 B167
Hex #FF99A7

Red Tint 2

PMS 1788 (20%)
C0 M20 Y19 K0
R255 G204 B211
HEX #FFCCD3

Red Tint 1

PMS 1788 (7%)
C0 M7 Y7 K0
R255 G237 B240
Hex #FFEDF0


Digital palette

These extra colours comply with Web Content Accessiblity Guidelines (WCAG) AA accessibility standards. Use them for our digital communications – on Shelter websites or for social media.

Our websites uses more colours than you’ll see on this page. This is to improve usability. For more digital-only colours, take a look at our Digital UI Kit.

Name + application

Hex

Accessible red (used for primary link and buttons)  

#EB001F

Dark backgrounds: 85% tint black

#262626

Standard text: 80% tint black

#333333 

Text links: Blue  

#336DF5 

Dark borders: 60% tint black (used when the contrast needs to be high e.g. on the border around a search box) 

#666  

Light borders: 20% tint black

#CCCCCC

Light backgrounds: 5% tint black

#f2f2f2 

Hover state (for primary buttons only, otherwise use accessible red)

#C8001A  


Online accessibility

This is all about making sure there are no barriers that stop people with disabilities from accessing
digital spaces.

Around 14.1 million people with disabilities live in the UK today. A range of auditory, cognitive, neurological, physical, speech and visual impairments might stop them from accessing information online.

When sites are designed, developed and edited in the right way, most users have equal access to information and functionality.

It’s all about keeping things inclusive.

All of Shelter’s digital communications must meet WCAG AA level accessibility. Below is guidance for accessible infographics, and here are Shelter’s full accessibility guides and best practice - for writing, producing social media content and more.

Infographics in print
An infographic in print doesn’t have the same accessibility needs as one online.

Infographics online
When the same infographic moves online, you might need to change colours and text size
to meet with WCAG AA level accessibility.

Accessible infographics online

These are the important things you need to think about to meet WCAG AA level accessibility:

  1. If you can clearly say it using text alone, then you should

  2. Some people are colour-blind, so don’t use colour alone to show meaning. Always use connecting lines between the graphic and the label

  3. Make sure your font sizes are big enough. On Shelter websites we generally use 18pt+

  4. Make sure screen-readers aren’t excluded. Write a short description of the infographic in the alt text. Write a detailed description in the body text

  5. Try to publish images as a scalable vector graphic (SVG), instead of a JPEG

Using colour behind text

To meet WCAG AA level accessibility, make sure the foreground and background colours have a good contrast ratio.

The minimum contrast ratio must be 4:5:1. If in doubt, use the WebAIM contrast checker.

Try to avoid uploading images of text online – the text should be rendered in HTML. If you have to use images of text, including alt text with each image. The only exception to this rule is social media. If you're unsure, please ask our UX team.

Black text

White text

Shelter Red text
NB You must use Shelter Activist online at 18pt or above.

Avoiding inadequate contrast ratios

Don’t use black text on backgrounds that
don’t have a good contrast ratio.

Don’t use white text on backgrounds that
don’t have a good contrast ratio.

Don’t use red text on backgrounds that don’t have a good contrast ratio. For example, the Red tints or Blue.


Using colour for infographics

To meet WCAG AA level accessibility, the foreground and background colour must have a good contrast ratio. The minimum contrast ratio must be 3:1. If in doubt, use the WebAIM contrast checker.

We mainly use black and white background colours, but sometimes, we might use a brush graphic background in Shelter Red.

You can also use Black Tint 1 and Red Tint 1 from our infographic palette as a background colour, but only within an infographic and NOT as background colours for full pages.

Black background
All colours in our palette are accessible on a black background, EXCEPT Black Tint 5, so avoid using it in this context.

White background
Most colours in our palette are accessible on a white background,
but just make sure you avoid the lighter tints.

Shelter Red background
Only a limited number of colours in our palette are accessible on a Shelter Red background. Stick to Black, White, and only the lightest tints.

Black Tint 1 background
When using a Black Tint 1 background, avoid using the lighter tints in the foreground.

Red Tint 1 background
When using a Red Tint 1 background, avoid using the lighter tints in the foreground.

Avoid inadequate contrast ratios
Don’t combine colours that don’t have a good contrast ratio.


Colour in action


Questions about our colours?

Contact the Shelter marketing team

Read our house style or other content guides