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{:target="_blank"} to help form the base of our digital palette.

Text

<ul class="colour-grid">
    {% include colour.html title="Primary text" var="colour-text" %}
    {% include colour.html title="Inverse text" var="colour-text-inverse" %}
</ul>

For use on a light background

<ul class="colour-grid">
    {% include colour.html title="Link" var="colour-link" %}
    {% include colour.html title="Link hover state" var="colour-link-hover" %}
    {% include colour.html title="Link visited state" var="colour-link-visited" %}
    {% include colour.html title="Link active state" var="colour-link-active" %}
    {% include colour.html title="Link focus" var="colour-focus" %}
    {% include colour.html title="Link focus text" var="colour-link-focus-text" %}
</ul>

For use on a dark background

<ul class="colour-grid">
    {% include colour.html title="Inverse link" var="colour-link-inverse" %}
    {% include colour.html title="Inverse link hover state" var="colour-link-inverse-hover" %}
    {% include colour.html title="Inverse link visited state" var="colour-link-inverse-visited" %}
    {% include colour.html title="Inverse link active state" var="colour-link-inverse-active" %}
    {% include colour.html title="Inverse link focus" var="colour-focus" %}
    {% include colour.html title="Inverse link focus text" var="colour-link-inverse-focus-text" %}
</ul>

Buttons

Call-to-action

<ul class="colour-grid">
    {% include colour.html title="CTA button" var="colour-btn-cta" %}
    {% include colour.html title="CTA button hover state" var="colour-btn-cta-hover" %}
    {% include colour.html title="CTA button text" var="colour-btn-cta-text" %}
</ul>

Primary

<ul class="colour-grid">
    {% include colour.html title="Primary button" var="colour-btn-primary" %}
    {% include colour.html title="Primary button hover state" var="colour-btn-primary-hover" %}
    {% include colour.html title="Primary button text" var="colour-btn-primary-text" %}
</ul>

Secondary

<ul class="colour-grid">
    {% include colour.html title="Secondary button" var="colour-btn-secondary" %}
    {% include colour.html title="Secondary button hover state" var="colour-btn-secondary-hover" %}
    {% include colour.html title="Secondary button text" var="colour-btn-secondary-text" %}
</ul>

Light

<ul class="colour-grid">
    {% include colour.html title="Light button" var="colour-btn-light" %}
    {% include colour.html title="Light button hover state" var="colour-btn-light-hover" %}
    {% include colour.html title="Light button text" var="colour-btn-light-text" %}
</ul>

Focus state (all buttons)

<ul class="colour-grid">
    {% include colour.html title="Focus state" var="colour-focus" %}
</ul>

Icons

<ul class="colour-grid">
    {% include colour.html title="Icons" var="colour-icons" %}
</ul>

Backgrounds and border

<ul class="colour-grid">
    {% include colour.html title="Body background" var="colour-body" %}
    {% include colour.html title="Default (light) panel background" var="colour-panel-default" %}
    {% include colour.html title="Inverse (dark) panel background" var="colour-panel-inverse" %}
    {% include colour.html title="Borders" var="colour-border" %}
</ul>

Notifications and banners

<ul class="colour-grid">
    {% include colour.html title="Alpha & beta banner" var="colour-agile-phase" %}

    {% include colour.html title="Error text & border" var="colour-error" %}
    {% include colour.html title="Error background" var="colour-error-background" %}

    {% include colour.html title="Caution text & border" var="colour-caution" %}
    {% include colour.html title="Caution background" var="colour-caution-background" %}

    {% include colour.html title="Info text & border" var="colour-info" %}
    {% include colour.html title="Info background" var="colour-info-background" %}

    {% include colour.html title="Success text & border" var="colour-success" %}
    {% include colour.html title="Success background" var="colour-success-background" %}
</ul>

Guidance colours

<ul class="colour-grid">
    {% include colour.html title="New guidance" var="colour-guidance-new" %}
    {% include colour.html title="Updated guidance" var="colour-guidance-updated" %}
    {% include colour.html title="In consultation guidance" var="colour-guidance-consultation" %}
</ul>

Colours in SASS

In our SASS, we have colour variables for both <a href="{{ site.baseurl }}{% link technical/sass/documentation/colours.md %}">the corporate palette and 'semantic' colours</a>. 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.

<a href="{{ site.baseurl }}{% link technical/sass/documentation/colours.md %}" class="btn btn--secondary">SASS colour documentation</a>

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{:target="_blank"}.

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{:target="_blank"}. This may be people with partial sight, colourblindness etc. The W3C describes how to meet 1.4.1{:target="_blank"} 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){:target="_blank"} and 1.4.6 Contrast (Enhanced) (AAA){:target="_blank"} 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: