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:

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.

Have you tested these styles?

If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.

Before you start, you will need a GitHub account. It's an open forum where we collect feedback.

If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.

Updated: January 2022