Styles
-
Colour
Our colours, and how to apply them.
Using colour
Our brand colours help people recognise and trust that our services come from the NHS.
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
- red for urgent care cards in the pattern to help users decide when and where to get care
Colour contrast
Our text and background colours are designed to meet accessibility needs. We meet at least level AA for contrast and aim for level AAA as far as possible. Read more about accessibility and colour on this page.
Main colours
If you are using NHS.UK frontend or the NHS.UK prototype kit, use the Sass variables provided rather than copying the hexadecimal (hex) colour values. For example, use $nhsuk-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_nhsuk-red rather than $nhsuk-error-color.
Text |
||
$nhsuk-text-color
|
#212b32 | |
|---|---|---|
$nhsuk-secondary-text-color
|
#4c6272 | |
Links |
||
$nhsuk-link-color
|
#005eb8 | |
$nhsuk-link-hover-color
|
#7C2855 | |
$nhsuk-link-visited-color
|
#330072 | |
$nhsuk-link-active-color
|
#002f5c | |
Focus state |
||
$nhsuk-focus-color
|
#ffeb3b | |
$nhsuk-focus-text-color
|
#212b32 | |
Border |
||
$nhsuk-border-color
|
#d8dde0 | |
$nhsuk-form-border-color
|
#4c6272 | |
Error state |
||
$nhsuk-error-color
|
#d5281b | |
Button |
||
$nhsuk-button-color
|
#007f3b | |
$nhsuk-secondary-button-color
|
#4c6272 | |
Page background colour
We use $color_nhsuk-grey-5 as a background tint. This is because:
- it reduces overall page glare
- the British Dyslexia Association recommends dark text on a light, but not white, background
- components with important information, like callouts, stand out
$color_nhsuk-white is used to make important information stand out and for alternating backgrounds, for example on the NHS website home page.
Colour palette
Avoid using the palette colours if there is a Sass variable that is designed for your context. For example, if you are styling the error state of a component you should use the $nhsuk-error-color Sass variable rather than $color_nhsuk-red.
$color_nhsuk-blue
|
#005eb8 |
|---|---|
$color_nhsuk-green
|
#007f3b |
$color_nhsuk-yellow
|
#ffeb3b |
$color_nhsuk-warm-yellow
|
#ffb81C |
$color_nhsuk-red
|
#d5281b |
$color_nhsuk-dark-pink
|
#7C2855 |
$color_nhsuk-purple
|
#330072 |
$color_nhsuk-grey-1
|
#4c6272 |
$color_nhsuk-grey-2
|
#768692 |
$color_nhsuk-grey-3
|
#aeb7bd |
$color_nhsuk-grey-4
|
#d8dde0 |
$color_nhsuk-grey-5
|
#f0f4f5 |
$color_nhsuk-white
|
#ffffff |
$color_nhsuk-pale-yellow
|
#fff9c4 |
Extended colours
The NHS Identity Guidelines have an extended colour palette. We haven't tested these colours yet for digital use.
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 and components, like buttons, must have contrast ratios that meet the contrast minimum for AA of the Web Content Accessibility Guidelines (WCAG 2.1). We aim for AAA as far as possible.
This helps people with colour vision deficiency (colour blindness) who find it difficult to distinguish between certain colours, often shades of red, yellow and green.
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.
AA
The contrast ratio should be at least:
- 4.5:1 for small text (smaller than 24px, or 19px if bold)
- 3:1 for large text (larger than 24px, or 19px if bold) and components (like a text input field or button) and graphic elements (like an icon)
AAA
The contrast ratio should be at least:
- 7:1 for small text (smaller than 24px, or 19px if bold)
- 4.5:1 for large text (larger than 24px, or 19px 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.
Help us improve this guidance
Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: January 2022