Style Colours

Use the ONS colour palettes for all services so that pages and elements are consistent and familiar to users.

We have designed text and background colours that are accessible to WCAG 2.1 AA level of compliance for contrast  . The Colour contrast section has more detail about accessibility and colour.

Each colour has a colour variable that can be assigned to a element. The main colours can also be expanded by creating the three allowed tint variations.

Primary brand palette

Supporting palette

Census 2021 theme palette

Greyscale

Tints

Only tints of 70%, 40% or 10% of the primary, supporting and census colour palettes can be used.

To apply a tint, you can use the tint() function by passing in the colour variable and the percentage of white you want to mix with it. For example:

#4d7789 tint($color-night-blue, 30);
70% tint of Night blue
#99b1bc tint($color-night-blue, 60);
40% tint of Night blue
#e6ecee tint($color-night-blue, 90);
10% tint of Night blue

Colour assignment

The colour variables are assigned to elements by using variables to provide context. For example, $color-black is assigned to $color-text to be used to style all heading elements.

Text

#222222 $color-text
Black is the primary colour for headings and body content.
#707071 $color-text-light
A secondary text colour for a title subheading.

#206095 $color-text-link
Blue is the colour for all link text elements in the body of the page. Link text should also be underlined.
#003c57 $color-text-link-hover
Hover state colour for link text.

Buttons

A
#0f8243 $color-button
Primary action buttons use a green background colour and white text.
A
#e2e2e3 $color-button-secondary
Secondary buttons use a light grey background colour and black text. This prevents interference with the primary action.

Focus

A
#fbc900 $color-focus
Black text on a yellow background is used to show that an element has focus. Any focused text color is changed to black, and yellow is applied as a background-color with an additional 4px black offset box-shadow. The change to both foreground and background colours makes sure there is a consistent accessible colour contrast ratio, regardless of the element’s initial background colour.

Highlight

A
#f0f762 $color-highlight
Bright yellow is used to highlight important information in headings.

Borders

#707071 $color-borders
The grey is used for all borders that are applied on a white background.

Status

Different colours can be used to represent a status. Each status has a primary border colour and a background tint for use in a status panel, and a vibrant hue for use in a status indicator dot.

Information

#206095 $color-info
A
#e9eff4 $color-info-tint
A 10% tint of the primary colour.
#1f84d8 $color-info-vibrant
An increase in lightness (20%) and saturation (30%) of the primary colour.

Success

#0f8243 $color-success
A
#e7f3ec $color-success-tint
A 10% tint of the primary colour
#10ca64 $color-success-vibrant
An increase in lightness (20%) and saturation (30%) of the primary colour

Errors

#d0021b $color-errors
A
#fae6e8 $color-errors-tint
A 10% tint of the primary colour
#fd112d $color-errors-vibrant
An increase in lightness (20%) and saturation (30%) of the primary colour

Pending

#ff803b $color-pending-vibrant

Colour contrast

We have tested the contrast between foreground and background colours to make sure they meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1)  .

To meet the WCAG 2.1 level AA guideline “1.4.3 Contrast (Minimum)”, all text and background colour combinations must have a minimum contrast ratio of: 

    </p><ul class="ons-list"><li class="ons-list__item">

                

                

                
                Normal text, 4.5:1</li><li class="ons-list__item">

                

                

                
                Large text (minimum 18.66px and bold, or 24px), 3:1</li></ul>

Accessible text and background colour combinations

A
Foreground: #222222 Background: #ffffff Contrast ratio: 15.91
A
Foreground: #ffffff Background: #222222 Contrast ratio: 15.91
A
Foreground: #222222 Background: #e2e2e3 Contrast ratio: 12.29
A
Foreground: #206095 Background: #f5f5f6 Contrast ratio: 6.08
A
Foreground: #ffffff Background: #206095 Contrast ratio: 6.63
A
Foreground: #ffffff Background: #0f8243 Contrast ratio: 4.89
A
Foreground: #ffffff Background: #003c57 Contrast ratio: 11.77
A
Foreground: #ffffff Background: #d0021b Contrast ratio: 5.67
A
Foreground: #222222 Background: #fa6401 Contrast ratio: 5.22
A
Foreground: #222222 Background: #fbc900 Contrast ratio: 10.19
A
Foreground: #222222 Background: #f0f762 Contrast ratio: 13.78

How to check colour contrast

Make sure you test colour contrast with a range of people with different colour vision deficiencies.

We also recommend the following tools to check colour contrast: 

    </p><ul class="ons-list"><li class="ons-list__item">

                

                

                
                
                        
<a href="http://webaim.org/resources/contrastchecker/" class="ons-external-link" target="_blank" rel="noopener">Web Aim's colour contrast checker<span class="ons-external-link__icon">&nbsp;<svg id="external-link" class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
    <path d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z" transform="translate(-2 -1.99)"></path>
    <path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)"></path>
</svg></span></a>

  • <a href="http://colororacle.org/" class="ons-external-link" target="_blank" rel="noopener">Color Oracle (free colour blindness simulator)<span class="ons-external-link__icon">&nbsp;<svg id="external-link" class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
    <path d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z" transform="translate(-2 -1.99)"></path>
    <path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)"></path>
</svg></span></a>

    • Help improve this style

    Let us know how we could improve this style or share your user research findings. 

    <a href="https://github.com/ONSdigital/design-system/discussions/1394" class="ons-external-link" target="_blank" rel="noopener">Discuss the ‘Colours’ style on Github<span class="ons-external-link__icon">&nbsp;<svg id="external-link" class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
    <path d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z" transform="translate(-2 -1.99)"></path>
    <path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)"></path>
</svg></span></a>