Skip to main content

Design Colour

Colour

By 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.

Colour in brand

There’s no disputing the significance of colour in branding. Many of the world’s most recognizable 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 UIs

Applying each of the brand colour palettes in the the digital space comes with its own set of design challenges and opportunities.

Challenges include:

  • Accessibility requirements.
  • Multi-brand - shared code base requirements.

Opportunities include:

  • Contextualising colour, giving it meaning, purpose and function.
  • Controlling colour dynamically using code and automated tasks.

The GUI 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 GUI framework) 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 works by assigning a palette of 10 core colours. Each colour in the palette has a purpose or function. For example the primary colour is intended for text links and primary buttons as a result, it has to be accessible and legible. The border colour (as the name suggests) is used on elements that require a border for example form input fields. It’s not necessary for this colour to be accessible.

When we reference these colours in our applications we don’t specify the explicit colour value. Instead we reference the colours variable name. For example the Hero colour in Westpac is purple however in St.George it’s green. Using the name Hero rather than the explicit colour value enables us to dynamically replace every instance of the colour in one central location. This is the basis for the colour system.

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. Traditionally 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.

Accessibility

The Westpac group have committed to comply with WCAG2 AA standards. Certain colours used in palette have to be accessible. It’s both a social responsibility and a legal requirement. All the elements in the GUI have been rigorously tested for accessibility. The GUI’s colour section contains a basic guide to accessibility for each brand, however, we still encourage designers to check colour accessibility during the design phase. The Colour Contrast Analyser is a useful tool for this purpose.

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 the brands. They are purely functional and have no relevance to the brand. They should never be used for anything other than messaging.

Tints

Each brand (with the exception of Westpac) 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.