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:
tint($color-night-blue, 30);
tint($color-night-blue, 60);
tint($color-night-blue, 90);
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
$color-text
$color-text-light
Links
$color-text-link
$color-text-link-hover
Buttons
$color-button
$color-button-secondary
Focus
$color-focus
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
Borders
$color-borders
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
$color-info
$color-info-tint
$color-info-vibrant
Success
$color-success
$color-success-tint
$color-success-vibrant
Errors
$color-errors
$color-errors-tint
$color-errors-vibrant
Pending
$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
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"> <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"> <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"> <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>