Style Colours
Overview
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 (opens in a new tab) . The Colour contrast section has more detail about accessibility and colour.
Each colour has a css variable that can be assigned to an element.
Palettes
Primary brand palette
Night blue
- CSS variable
- --ons-color-night-blue
Spring green
- CSS variable
- --ons-color-spring-green
Aqua teal
- CSS variable
- --ons-color-aqua-teal
Ocean blue
- CSS variable
- --ons-color-ocean-blue
Sky blue
- CSS variable
- --ons-color-sky-blue
Supporting palette
Leaf green
- CSS variable
- --ons-color-leaf-green
Ruby red
- CSS variable
- --ons-color-ruby-red
Jaffa orange
- CSS variable
- --ons-color-jaffa-orange
Sun yellow
- CSS variable
- --ons-color-sun-yellow
Neon yellow
- CSS variable
- --ons-color-neon-yellow
Greyscale
Black
- CSS variable
- --ons-color-black
Grey 100
- CSS variable
- --ons-color-grey-100
Grey 75
- CSS variable
- --ons-color-grey-75
Grey 35
- CSS variable
- --ons-color-grey-35
Grey 15
- CSS variable
- --ons-color-grey-15
Grey 5
- CSS variable
- --ons-color-grey-5
White
- CSS variable
- --ons-color-white
Colour usage
The colour variables are assigned to elements by using variables to provide context. For example, --ons-color-black is assigned to --ons-color-text to be used to style all heading elements.
Text
Body text
- CSS variable
- --ons-color-text
Black is used as the primary colour for headings and body content
Subheading text
- CSS variable
- --ons-color-text-light
Grey 75 is used as a secondary text colour for a subheading
Highlighted heading text
- Background
- --ons-color-highlight
- Foreground
- --ons-color-text
- Contrast ratio
- 13.78 : 1
Neon yellow is used with a 4px Black offset box-shadow to highlight important information in headings
Links
Link text
- CSS variable
- --ons-color-text-link
Ocean blue is used for all links in the body of the page
Link text hover state
- CSS variable
- --ons-color-text-link-hover
Night blue is used for the hover state for all links in the body of the page
Link text focus state
- Background
- --ons-color-focus
- Foreground
- --ons-color-text-link-focus
- Contrast ratio
- 10.19 : 1
To show that a link has focus, Black is used for the link text and Sun yellow is used for the background with an additional 4px Black offset box-shadow
Buttons
Primary button (default)
- Background
- --ons-color-button
- Foreground
- --ons-color-text-inverse
- Contrast ratio
- 4.89 : 1
The primary button uses White for the label text and Leaf green for the background
Secondary button
- Background
- --ons-color-button-secondary
- Foreground
- --ons-color-text
- Contrast ratio
- 12.29 : 1
The secondary button uses Black for the label text and Grey 15 for the background
Borders
Default borders
- CSS variable
- --ons-color-borders
Grey 75 is used for all borders on a white background
Status
Different colours are used to represent a status using the panel and status indicator components. Each status panel has a primary border colour and a 10% tint for the body background. A more vibrant tone is used for the status indicator dot.
Information
Information – panel border
- CSS variable
- --ons-color-info
Information – panel body
- Background
- --ons-colour-info-tint
- Foreground
- --ons-color-text
- Contrast ratio
- 13.73 : 1
Information – status indicator
- CSS variable
- --color-info-vibrant
Success
Success – panel border
- CSS variable
- --color-success
Success – panel body
- Background
- --ons-color-success-tint
- Foreground
- --ons-color-text
- Contrast ratio
- 13.96 : 1
Success – status indicator
- CSS variable
- --color-success-vibrant
Error
Error – primary border
- CSS variable
- --color-errors
Error – background tinte
- CSS variable
- --ons-color-errors-tint
Error – status indicator
- CSS variable
- --ons-color-errors-vibrant
Pending
Pending – panel border
- CSS variable
- --ons-color-pending
Pending – panel body
- Background
- --ons-color-pending-tint
- Foreground
- --ons-color-text
- Contrast ratio
- 14.29 : 1
Pending – status indicator
- CSS variable
- --color-pending-vibrant
Accessible 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) (opens in a new tab)
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:
- 4.5:1 – for normal text
- 3:1 – for large text (minimum 24px or 18.66px and bold)
Accessible text and background colour combinations
Black on White
- Background
- --ons-color-white
- Foreground
- --ons-color-black
- Contrast ratio
- 15.91 : 1
White on Black
- Background
- --ons-color-black
- Foreground
- --ons-color-white
- Contrast ratio
- 15.91 : 1
Black on Grey 15
- Background
- --ons-color-grey-15
- Foreground
- --ons-color-black
- Contrast ratio
- 12.29 : 1
Ocean blue on White
- Background
- --ons-color-white
- Foreground
- --ons-color-ocean-blue
- Contrast ratio
- 6.63 : 1
White on Ocean blue
- Background
- --ons-color-ocean-blue
- Foreground
- --ons-color-white
- Contrast ratio
- 6.63 : 1
Ocean blue on Grey 5
- Background
- --ons-color-grey-5
- Foreground
- --ons-color-ocean-blue
- Contrast ratio
- 6.08 : 1
Black on Neon yellow
- Background
- --ons-color-neon-yellow
- Foreground
- --ons-color-black
- Contrast ratio
- 13.78 : 1
Black on Sun yellow
- Background
- --ons-color-sun-yellow
- Foreground
- --ons-color-black
- Contrast ratio
- 10.19 : 1
White on Night blue
- Background
- --ons-color-night-blue
- Foreground
- --ons-color-white
- Contrast ratio
- 11.77 : 1
White on Leaf green
- Background
- --ons-color-leaf-green
- Foreground
- --ons-color-white
- Contrast ratio
- 4.89 : 1
Black on Jaffa orange
- Background
- --ons-color-jaffa-orange
- Foreground
- --ons-color-black
- Contrast ratio
- 5.22 : 1
White on Ruby red
- Background
- --ons-color-ruby-red
- Foreground
- --ons-color-white
- Contrast ratio
- 5.67 : 1
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 and extensions to check colour contrast:
- Web Aim's colour contrast checker (opens in a new tab)
- Eightshape’s Contrast Grid (opens in a new tab)
- Color Oracle (free colour blindness simulator) (opens in a new tab)
- WCAG Color contrast checker (Chrome extension) (opens in a new tab)
- High Contrast (Chrome extension) (opens in a new tab)
Help improve this page
Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)