Colours
Colours help to distinguish our brand, create an engaging experience for users, and add consistency and visual aids to interactions. Each brand has its own colour palette, and guidelines on when to use different colours.
How to use colours
As a content editor in the CMS
If you’re building pages in the CMS, the right brand colours will have been set in the CMS theme, so you don’t need to worry about choosing the right colours. However, in some cases you’ll still be responsible for choosing the most appropriate option out of the selected brand colours for the content you’re creating.
For example, when creating a new panel there are a number of background colours you can choose from – including primary, primary-variant, secondary, gradient, background, success, error and more. Although these colours are pre-defined, you still need to make sure you choose the appropriate one.
In design or build
If you’re designing or building something new – for example a new component, an icon, a digital tool, an infographic or a customer-facing PDF – you'll need to make sure you use the right brand colours for the brand you’re working on.
Remember to use sufficient colour contrast between different elements – for example between text and buttons or backgrounds, or between the different bars in a chart.
Accessibility
Colours and contrast are an important part of building a website. We’ve built our design system so that:
- Large text has a contrast of at least 3:1.
- All other text has a contrast of at least 4.5:1
- Non-text elements (such as buttons, active states and borders) have a contrast of at least 3:1
- We don’t rely on colour alone to convey meaning. For example, links are underlined and error messages use a left hand highlight bar
These colours will be preset when you’re working in the CMS so you shouldn’t need to worry about them.
However, if you’re creating other assets for the website like icons, infographics or PDFs, you’ll need to consider these accessibility requirements.
If you’re designing or building something new like an icon or infographic, don’t rely on colour alone to convey meaning. Bars in a chart should have labels as well as colours, and use tick or cross icons to indicate a user should or shouldn’t do something.