Styles - Colour
You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
Using colour
Our brand colours help people recognise and trust that our services come from HS2.
We also use colour to help users prioritise and differentiate information – for example we use:
- yellow for our focus state styles and for warning callouts
Our text and background colours are designed to meet accessibility needs. Read more about accessibility and colour on this page.
Main colours
If you are using the HS2 frontend or the HS2 prototype kit, use the Sass variables provided rather than copying the hexadecimal (hex) colour values. For example, use $hs2-text-color rather than #212b32. This means that your service will always use the most recent colour palette whenever you update.
Only use the variables in the context they're designed for. In all other cases, you should reference the colour palette directly. For example, if you wanted to use red to represent some data in a graph you should use $color_hs2-red rather than $hs2-error-color.
Brand colours
Use these colours for headings, icons, or in custom components where appropriate.
$color_hs2-blue |
#1E3773 |
|---|---|
$color_hs2-cyan |
#2079C6 |
$color_hs2-pink |
#A8518A |
$color_hs2-green |
#268716 |
$color_hs2-amber |
#B36100 |
$color_hs2-red |
#B9192D |
Secondary
Use these colours for supporting materials like illustrations, or in custom components where appropriate.
$color_hs2-purple |
#4C2C92 |
|---|---|
$color_hs2-dark-blue |
#051B5C |
$color_hs2-yellow |
#FFDD00 |
$color_hs2-pale-yellow |
#FFF9C4 |
$color_hs2-aqua |
#00A499 |
Text
$color_hs2-text
|
#212B32 |
|---|---|
$color_hs2-text-light
|
#4C6272 |
Links
$color_hs2-link
|
#2079C6 |
|---|---|
$color_hs2-visited
|
#330072 |
$color_hs2-hover
|
#7C2855 |
$color_hs2-active
|
#002F5C |
Border
$color_hs2-border
|
#D8DDE0 |
|---|---|
$color_hs2-border-input
|
#4C6272 |
Focus state
$color_hs2-focus-yellow
|
#FFDD00 |
|---|---|
$color_hs2-focus-text
|
#0B0C0C |
Error state
$color_hs2-error
|
#D4351C |
|---|---|
Success state
$color_hs2-success
|
#00703C |
|---|
Neutrals
$color_hs2-black
|
#222222 |
|---|---|
$color_hs2-grey-1
|
#4C6272 |
$color_hs2-grey-2
|
#768692 |
$color_hs2-grey-3
|
#AEB7BD |
$color_hs2-grey-4
|
#D8DDE0 |
$color_hs2-grey-5 |
#F0F4F5 |
$color_hs2-white |
#FFFFFF |
Accessibility
Make sure that what the colour is "saying" is available in other ways. Read "Do not rely on colour or position alone" in our accessibility guidance.
Colour contrast
Text, interface components (like buttons) and graphic elements must have contrast ratios that meet the contrast minimum for AA of the Web Content Accessibility Guidelines (WCAG 2.2). We aim for AAA as far as possible.
This helps people with low vision and colour vision deficiency (colour blindness) who find it difficult to distinguish between certain colours, often shades of red, yellow and green.
Not all combinations from our colour palette meet the minimum contrast. For example, $hs2-border-color has low contrast on our page background.
More about contrast in components and graphic elements
Use a tool to calculate the ratio between the element and the adjacent colour. For example, the white arrow (foreground) and the green circle (background) in an action link.
If you rely on users understanding a graphic (like an icon) without text, it must meet the minimum contrast ratio. If it also has text, it does not have to meet the requirement but we recommend you try to meet it anyway.
Components that are visible but not currently active (like a submit button that is not active until the user has filled in the form) do not have to meet the requirement. But if you can meet the minimum contrast without it being confusing, it will help people with low vision.
WCAG 2.2 AA
The contrast ratio should be at least:
- 4.5:1 for small text (smaller than 24px, or smaller than 19px if bold)
- 3:1 for large text (24px or over, or 19px or over if bold) and components (like a text input field or button) and graphic elements (like an icon)
WCAG 2.2 AAA
The contrast ratio should be at least:
- 7:1 for small text (smaller than 24px, or smaller than 19px if bold)
- 4.5:1 for large text (24px or over, or 19px or over if bold) and components (like a text input field or button) and graphic elements (like an icon)
Testing tools
Use tools like these to check contrast:
Also test colour contrast with people of all abilities.
