Colour

Research and rationale

How we developed our colour matrix

When adopting the Digital Transformation Agency's (DTA) Design System as our base we investigated how they implemented their colour palette and if it would meet our requirements. In general, it was a great foundation but there was room for improvement.

What the issues were

The DTA system was limited to incorporating one or two brand colours at most.

It had classes and different background colours, but they were implemented as shades of only 2 primary background colours and these colours were generated automatically limiting the ability for customisation.

The existing colour classes weren't robust enough and didn't cover items such as icon colours, headings colours, hover colours, decorative elements and underlines.

Our solution

We solved these issues by doing the following:

• creating a colour matrix (visual guide) so we could see what colour interactions occurred and how things would need to be made accessible. This allowed us to provide designers a way of customising all colours at once
• we chose to remove the automation of colours and instead create a dedicated set of colours variables that could be customised with more control
• adding a secondary action class which let us incorporate an additional primary brand colour, this also gave us a colour that could be used for interactive iconography
• adding an accent colour class to allow a safe space for decorative brand colour (with no impact on usability)
• adding hover classes so we could improve interactive elements including accessibility and usability
• adding heading classes so that titles could use colour to stand out slightly from text
• adding underline colours to further improve the usability of our hyperlink styles.

We used many of our early website designs to test, refine and iterate on this approach and continue to build and refine this system adding functionality and features.

In recent updates we have also meticulously reviewed and updated all colour variable names and values. And introduced a new colour theme for many components, aiming to offer more versatility and customisation options whilst future proofing our colour system. You can explore the details for the most recent updates via our release notes.

Why was this important

Our solution enables us to have a colour palette that could easily accommodate any brand but still be accessible. It's a system that allows you to set and forget. Because every component is based on the colour matrix and the rules that underpin it you know that once you get it right, every element on current and future designs is going to be accessible. Improving the customisation and flexibility of colours also enables designers to create sites that appear more visually distinct and that can more easily align with existing branding which has assisted with the uptake of the Design System from stakeholders.

Why we needed a default colour palette

The 2 main reasons were to give us something to build and test with and also to give us a framework of colours that would support our brand architecture model.

What was evident from the brand audits was that we needed default colours that would create consistency across our key channels and products. Setting even a few default web colours would greatly reduce the variety of colours used and mean we could help ensure accessibility.

Where do our default colours come from

Overall, we chose the colours that have been used online for the longest time. Our goal wasn’t to create a new brand for Qld but to create consistency and move forward in a way that could be seen as an evolution of what already existed.

As a result, we looked at existing colours that were used in key places to determine what the default web colours should be.

These included

• the current Qld.gov.au franchise page
• the state flag
• the state crest
• key prominent Qld colours.

We looked at the qld.gov.au franchise site as a starting point, they utilise light blue, dark blue and light green as their base colours.
We tweaked these to be more web accessible and used them as our core to build from.

As we set up the colours, we noticed we needed a harmonious darker blue to act as an additional primary brand colour, so looked to other resources such as our state crest and the state gem of sapphire to select a blue. Additionally, we also sifted through old brand guidelines for inspiration to build from that would help to justify these choices.

This process eventually gave us 4 primary colours to build from where each colour had a strong rationalisation and wouldn't be a large deviation from what was already online.

Two more secondary action colours were required for scenarios where the primary and secondary colours couldn’t be used.

For these we again looked at the state crest and found the colours of dark green and golden yellow. These were tweaked to be more web accessible and work harmoniously with the other colours.

For more detailed information on our colour research see our figma documentation.

Brand colours

Brand colours are those that can be customised to match the brand requirements of a site.

Components and core styles inherit these colours to create a consistent yet flexible theme to optimise your user's experience. The default colour palette below reflects masterbrand corporate colour used as default in the Design System.

How to customise colours

On our platform,  you can modify the colours by using the CSS variables (detailed below).

By leveraging CSS variables, any updates to branding or themes will seamlessly apply to your project. You can discover more about CSS variables below, or explore the developer documentation.

There are 46 colour variables that users can customise. These variables are divided into 2 light and dark themes with variables grouped under categories related to the colours purpose within the site.

Backgrounds

Therere 5 primary background colours form the base that all other components sit on top of. The white background and white background shade colours are system defaults and are not customisable.

Background shades work best as a darker tint of the primary background colour.

Borders

There are 4 border colours, they're used for dividers and borders for containers. The alternative border must have a contrast ratio of 3:1 because it's used for form borders, the standard foreground border is more decorative and isn't required to have as high a contrast.

Actions

Colours for buttons and interactive elements.

Accent

There are 2 accent colours, used for decorative elements. Accent colours are purely decorative and thus don't require an accessibility check, they're best used for implementing brand colours that are difficult to make accessible.

Focus

The focus state is the state of an element in a web page that has been selected by the user or is currently in focus. When an element is in focus, it's the active element that is ready to receive user input, such as typing into a form field or clicking a button. In web design, the focus state is important for accessibility and usability, especially for users who navigate the web using a keyboard or other input device.

The focus colour is used for the outline that indicates this state. Focus colours should be as consistent as possible and ideally not the same as any action colour. Focus colours must meet a contrast ratio of 3:1.

Text links

Colours for secondary button text, in text links, menu links and calls to actions text.

Text

Colours for headings, body text and muted or disabled type.

Underlines

Underline colours for interactive elements. They work best a slightly lighter version of the text link colour. On hover the default is that the underline colour changes to the text link colour.

Site title

This determines the colour of the site title text in the header.

Accessible colour requirements

Our default colours have already been designed to meet accessibility requirements however keep these considerations in mind if you're modifying the Design System or creating a custom component.

You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).

WCAG Guideline 1.4.3 Contrast (Minimum)

Text and images should have sufficient contrast with their background colour to ensure that they can be easily read by people with visual impairments.

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text

Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.

Incidental

Text or images of text that are part of an inactive user interface component, that are pure decoration, that aren't visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes

Text that is part of a logo or brand name has no contrast requirement.

WCAG Guideline 1.4.1 Use of Colour

Colour shouldn't be the only means of conveying important information or indicating an action. For example, if the only way to know if a button is clickable is by its colour, this would not meet this guideline. Text or other visual cues should also be provided to ensure that people with colour blindness or low vision can understand the content.

WCAG Guideline 1.4.11 Non-text Contrast

Recommends providing sufficient contrast for non-text elements like icons or charts. For example, using light grey icons on a white background wouldn't meet this guideline.

Colour Consistency

Consistent use of colour throughout a website or application can help users with visual impairments to navigate and understand the content more easily. Colour consistency isn't a specific WCAG guideline however, consistency is an important principle in creating accessible designs. Consistent use of colour, typography, layout, and other design elements throughout a website or application can help users with visual impairments to navigate and understand the content more easily.

This principle is emphasised in WCAG's success criterion 1.3.5 Identify Input Purpose, which requires consistency in the presentation of input fields and instructions throughout a website or application. Additionally, success criterion 3.2.3 Consistent Navigation requires that navigational mechanisms be consistent throughout the website or application. While consistency isn't a specific guideline, it's an important aspect of accessible design and can be applied to multiple WCAG guidelines.