Skip to main content

GOV.UK elements
Colour

GOV.UK Elements has now been replaced by the GOV.UK Design System

GOV.UK Elements:

is no longer maintained
will only be updated for major bug fixes and security patches
does not meet the Web Content Accessibility Guidelines (WCAG 2.1 level AA) accessibility standard

This framework will remain available in case you’re currently using it. To help your service meet accessibility requirements, you should use the GOV.UK Design System. You can migrate to the Design System from GOV.UK Elements.

GOV.UK elements Colour

Always use the GOV.UK colour palette.

Contents:

Colour contrast
Sass variables
Status colours
Greyscale palette
Extended palette
Examples

Colour contrast

The colour contrast ratio for text and interactive elements should be at least 4.5:1 as recommended by the W3C. Test your service to meet this standard.

Sass variables

Use Sass variables in case colour values need to be updated – find these in the GOV.UK frontend toolkit colours.scss file.

Status colours

Greyscale palette

Extended palette

used for graphs and supporting material
for tints of the extended palette use 50% or 25%
for departmental colours – find these in the GOV.UK frontend toolkit organisation.scss file

Examples

Confirmation page

When using the white text on a turquoise background — ensure the minimum text size is 24px normal weight, or 19px bold. This is to meet colour contrast ratio requirements.

Application complete

Your reference number is
HDJ2123F

We have sent you a confirmation email.

What happens next?

We’ve sent your application to Hackney Electoral Register Office.

They will contact you either to confirm your registration, or to ask for more information.