Colour
Justin Spencer
Colour plays an important role in our lives. Our minds are programmed to respond to colour. We stop our cars for red lights and go on green. We see colour before we see form. This article explains why we have a colour system and how to apply it to your designs.
Colour in brand
There’s no disputing the significance of colour in branding. Many of the world’s most recognisable brands rely on colour for instant recognition. Colour increases brand recognition by up to 80% (Source: University of Loyola, Maryland study)
Each brand in the Westpac Group uses a unique colour palette as part of its identity. These colours permeate across every touchpoint in the customer journey. The correct use of these colours plays a crucial role in brand recognition and customer experience. When the colour palette is not applied correctly the integrity of the brand is diluted and the customer journey fragmented.
Colour in the user interface
Applying each of the brand colour palettes in the the digital space comes with its own set of design challenges and opportunities.
Challenges include:
Opportunities include:
The Design System provides a flexible, multi-brand colour system which enables us to map each brand palette to a set of core contextual colours. Each of the core colours has a defined purpose and function.
Using the colour system (as part of the Design System) allows us to automate the rollout of multi-brand applications. Being an automated system, design and development time is significantly reduced, as is the margin for error.
Further more, in the event of a re-brand or brand refresh the colour system allows us to quickly and accurately update and deploy new colour palettes. The same would apply when adding new brands to the system. However, for any of this to work effectively it’s important that brand agencies collaborate with the Digital Design Quality team.
The practical application of the colour system encourages consistency across all user interfaces which strengthens brand recognition, creates a consistent user journey and provides a positive customer experience.
How it works
The Colour system is a collection of carefully considered variables (or tokens) designed to work in unison. In consultation with each brand we developed a unique set of corresponding colour values all rigorously tested to ensure brand alignment and guarantee the user interface remained accessible in every possible scenario.
When we reference these colours in our applications we don’t specify the explicit colour value, instead we reference the colours variable (or token). For example the Primary colour in Westpac is #DA1710 (fig 1) however in Rams it’s #047DBC. Our application only needs to know that the Primary colour is being used, the value of that colour is irrelevant.
Secondary palette
Some of the brands also use a secondary palette however the colour system does not currently map the secondary palette. These colours are bespoke and can be used in many different ways depending on the brand guidelines. Typically the secondary palette is used for things like data visualisation, graphs, charts, illustration etc. The guidelines around the correct use of the secondary palette are brand specific.
Reserved Colours
The Westpac group has a set of reserved, contextual colours used only for messaging (success, information, warning and danger). These colours are used across all our brands. They’re purely functional and have no relevance to the brand. They should never be used for anything other than messaging.
Tints
Each brand has a neutral colour with a set of 11 tints for subtle colouring. Several of these tints are already used in the primary palette for borders and backgrounds etc. The remaining tints can be used for additional colouring if required.
Accessibility
The Westpac group have committed to comply with WCAG 2.1 AA standards. This is both a social responsibility and a legal requirement. As a result, key colours and colour combinations have been rigorously tested to ensure contrast ratios comply with WCAG standards. The Design System’s colour section contains a basic guide to accessibility for each brand, however, we still encourage designers to always check colour contrast ratios during the design phase. The Colour Contrast Analyser is a useful tool for this purpose.
The Accessibility Matters article provides more in-depth information on accessibility.