Colour

Follow these guidelines to determine the best way to apply the NICE colour palette. We use colour to aid in communication, and help our users navigate. We also use our brand guidelines to help form the base of our digital palette.

Text

• Primary text

  SASS:

  $colour-text

  HEX:

  #0e0e0e

  RGB:

  rgb(14, 14, 14)

• Inverse text

  SASS:

  $colour-text-inverse

  HEX:

  #fff

  RGB:

  rgb(255, 255, 255)

Links

Default links

For use on a light background

• Link

  SASS:

  $colour-link

  HEX:

  #005ea5

  RGB:

  rgb(0, 94, 165)

• Link hover state

  SASS:

  $colour-link-hover

  HEX:

  #2e8aca

  RGB:

  rgb(46, 138, 202)

• Link visited state

  SASS:

  $colour-link-visited

  HEX:

  #4c2c92

  RGB:

  rgb(76, 44, 146)

• Link active state

  SASS:

  $colour-link-active

  HEX:

  #0e0e0e

  RGB:

  rgb(14, 14, 14)

• Link focus

  SASS:

  $colour-focus

  HEX:

  #0092a6

  RGB:

  rgb(0, 146, 166)

• Link focus text

  SASS:

  $colour-link-focus-text

  HEX:

  #005ea5

  RGB:

  rgb(0, 94, 165)

Inverse links

For use on a dark background

• Inverse link

  SASS:

  $colour-link-inverse

  HEX:

  #fff

  RGB:

  rgb(255, 255, 255)

• Inverse link hover state

  SASS:

  $colour-link-inverse-hover

  HEX:

  #d6d6d6

  RGB:

  rgb(214, 214, 214)

• Inverse link visited state

  SASS:

  $colour-link-inverse-visited

  HEX:

  #fff

  RGB:

  rgb(255, 255, 255)

• Inverse link active state

  SASS:

  $colour-link-inverse-active

  HEX:

  #d6d6d6

  RGB:

  rgb(214, 214, 214)

• Inverse link focus

  SASS:

  $colour-focus

  HEX:

  #0092a6

  RGB:

  rgb(0, 146, 166)

• Inverse link focus text

  SASS:

  $colour-link-inverse-focus-text

  HEX:

  #fff

  RGB:

  rgb(255, 255, 255)

Buttons

Call-to-action

• CTA button

  SASS:

  $colour-btn-cta

  HEX:

  #451551

  RGB:

  rgb(69, 21, 81)

• CTA button hover state

  SASS:

  $colour-btn-cta-hover

  HEX:

  #260b2d

  RGB:

  rgb(38, 11, 45)

• CTA button text

  SASS:

  $colour-btn-cta-text

  HEX:

  #fff

  RGB:

  rgb(255, 255, 255)

Primary

• Primary button

  SASS:

  $colour-btn-primary

  HEX:

  #393939

  RGB:

  rgb(57, 57, 57)

• Primary button hover state

  SASS:

  $colour-btn-primary-hover

  HEX:

  #0e0e0e

  RGB:

  rgb(14, 14, 14)

• Primary button text

  SASS:

  $colour-btn-primary-text

  HEX:

  #fff

  RGB:

  rgb(255, 255, 255)

Secondary

• Secondary button

  SASS:

  $colour-btn-secondary

  HEX:

  #666

  RGB:

  rgb(102, 102, 102)

• Secondary button hover state

  SASS:

  $colour-btn-secondary-hover

  HEX:

  #333

  RGB:

  rgb(51, 51, 51)

• Secondary button text

  SASS:

  $colour-btn-secondary-text

  HEX:

  #fff

  RGB:

  rgb(255, 255, 255)

Light

• Light button

  SASS:

  $colour-btn-light

  HEX:

  RGB:

  rgb(0, 0, 0)

• Light button hover state

  SASS:

  $colour-btn-light-hover

  HEX:

  RGB:

  rgb(0, 0, 0)

• Light button text

  SASS:

  $colour-btn-light-text

  HEX:

  RGB:

  rgb(0, 0, 0)

Focus state (all buttons)

• Focus state

  SASS:

  $colour-focus

  HEX:

  #0092a6

  RGB:

  rgb(0, 146, 166)

Icons

• Icons

  SASS:

  $colour-icons

  HEX:

  #004650

  RGB:

  rgb(0, 70, 80)

Backgrounds and border

• Body background

  SASS:

  $colour-body

  HEX:

  #fafafa

  RGB:

  rgb(250, 250, 250)

• Default (light) panel background

  SASS:

  $colour-panel-default

  HEX:

  #e9e9e9

  RGB:

  rgb(233, 233, 233)

• Inverse (dark) panel background

  SASS:

  $colour-panel-inverse

  HEX:

  #393939

  RGB:

  rgb(57, 57, 57)

• Borders

  SASS:

  $colour-border

  HEX:

  #adadad

  RGB:

  rgb(173, 173, 173)

Notifications and banners

• Alpha & beta banner

  SASS:

  $colour-agile-phase

  HEX:

  #009ae9

  RGB:

  rgb(0, 154, 233)

• Error text & border

  SASS:

  $colour-error

  HEX:

  #b10e1e

  RGB:

  rgb(177, 14, 30)

• Error background

  SASS:

  $colour-error-background

  HEX:

  #eac3c3

  RGB:

  rgb(234, 195, 195)

• Caution text & border

  SASS:

  $colour-caution

  HEX:

  #9b722f

  RGB:

  rgb(155, 114, 47)

• Caution background

  SASS:

  $colour-caution-background

  HEX:

  #ffdfa4

  RGB:

  rgb(255, 223, 164)

• Info text & border

  SASS:

  $colour-info

  HEX:

  #4a7f99

  RGB:

  rgb(74, 127, 153)

• Info background

  SASS:

  $colour-info-background

  HEX:

  #e6faff

  RGB:

  rgb(230, 250, 255)

• Success text & border

  SASS:

  $colour-success

  HEX:

  #3f8c5e

  RGB:

  rgb(63, 140, 94)

• Success background

  SASS:

  $colour-success-background

  HEX:

  #eff7eb

  RGB:

  rgb(239, 247, 235)

Guidance colours

• New guidance

  SASS:

  $colour-guidance-new

  HEX:

  #451551

  RGB:

  rgb(69, 21, 81)

• Updated guidance

  SASS:

  $colour-guidance-updated

  HEX:

  #517489

  RGB:

  rgb(81, 116, 137)

• In consultation guidance

  SASS:

  $colour-guidance-consultation

  HEX:

  #557021

  RGB:

  rgb(85, 112, 33)

Colours in SASS

In our SASS, we have colour variables for both the corporate palette and ‘semantic’ colours. Wherever possible, the semantic variables should be used rather than the corporate palette directly. For example, text should use color: $colour-text rather than color: $colour-rich-black, panels should use background: $colour-panel-light rather than background: $colour-nice-grey-3; and so on.

SASS colour documentation

SASS example

body {
    background: $colour-page;
    colour: $colour-text;
}

Accessibility

We follow the guidelines for UK government websites and aim to support W3C’s WCAG 2.0 Guidelines Level AA level.

Specifically, this means meeting guideline 1.4. Distinguishable: Make it easier for users to see and hear content including separating foreground from background. These are the most relevant guidelines for colour:

1.4.1 Use of Color

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)

This guideline is designed for users who have difficulty perceiving colour. This may be people with partial sight, colourblindness etc. The W3C describes how to meet 1.4.1 in detail.

Use other visual cues aside from colour to convey information, states etc. Use elements such as strokes, indicators, patterns, texture, or text to describe actions and content.

1.4.3 Contrast

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 … (Level AA)

The W3C guidlines 1.4.3 Contrast (Minimum) (AA) and 1.4.6 Contrast (Enhanced) (AAA) describe the minimum levels of colour contrast for different sizes of text.

Contrast tools

The NICE colour palette has been designed to meet WCAG 2.0 AA with respect to colour contrast. However, because applications can use colours in their own way, the following tools can be used to test colour contrast:

• Lea Verou’s Contrast Ratio - useful for a quick test of 2 colours
• WAVE WebAIM - general accessibility testing tool that highlights colour contrast issues
• HTML_CodeSniffer - general accessibility testing tool that highlights colour contrast issues
• Accessibility Developer Tools extension for Chrome - extension for Chrome developer tools to check contrast of any inspected element

Edit on GitHub