Colours

Updated in October 2026

Use accessible colour palettes and standards to maintain consistency across digital products and clinical services.

When to use colours

Use approved colour palettes consistently to create a clear visual hierarchy, guide user attention and distinguish interactive elements from non-interactive content.

Follow colour guidance for:

• text, including headings, body content and supporting text
• interactive elements, including primary, secondary and destructive actions
• containers, surfaces, backgrounds and borders
• focus states and system notifications
• data visualisations, status indicators and tags

When not to use colours

Do not rely on colour alone to communicate important information, status or actions. Always pair colour with text, icons, patterns or other visual cues so that information remains accessible to everyone.

How to use colours

Apply colours consistently across components and interfaces to create a clear, predictable experience. Make sure colour choices support readability, accessibility and user understanding.

Text

Links

Focus state

Buttons

Use this button only on interrupt or interstitial pages with a blue background. Do not use it as a standard secondary button.

Page background

Use grey and white backgrounds to highlight important information and separate content into distinct sections.

Use the blue background only on interrupt pages that inform users they are moving from the NHS Wales App to a third-party service. This helps users understand when they are leaving the app and entering a different system.

When using this background, always use $nhswales-exceptional-text-colour and $nhswales-exceptional-button-light.

Borders and shadows

Accessibility

Make sure all colour combinations meet accessibility requirements and can be used by people with visual impairments or colour vision deficiencies.

• Text and interactive elements must have a contrast ratio of at least 4.5:1 against their background. This supports WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum), level AA.
• Non-text interface elements, such as input borders, focus indicators and button containers, must have a contrast ratio of at least 3:1 against adjacent colours. This supports WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast, level AA.
• Do not rely on colour alone to communicate information, indicate an action or highlight a difference. Always provide additional cues, such as text, icons or patterns. This supports WCAG 2.2 Success Criterion 1.4.1 Use of Colour, level A.

Source

Learn more about Colour in the NHS Digital Service Manual and Colour in the GOV.UK Design System.

Follow discussions about Colour on NHS Digital Service Manual GitHub to see the latest updates and resolved issues.