Colour

This guideline explains how to use the ACU colour palette.

Our primary colour palette is based on the combined use of two signature colours – red (impact) and purple (empathy) – a mirror reflection of our brand ‘Impact through Empathy’. They are supported with a smaller palette of neutral/secondary colours.

Colour is used to add structure to a page in a visually meaningful way. Text colour contrast is also an important accessibility consideration. Colour is a foundational element in our user interface (UI) components.

Primary colours

ACU's two primary colours are the colours most associated with our brand. 'Red-100' is emotively associated with impact and 'purple-100' with empathy. In combination, side by side, they form our signature colour pattern.

Usage

Red--100 and purple--100 should be used before any of their variations. The later are used in supportive roles to these two base colours: red--100 and purple--100.

Our primary colour palette is split up into percentages. 120% of the primary colour is used as a hover colour or on any area we need to add contrast. Any tint lighter than the primary colour may be used to modify contrast in areas where particular content needs to be highlighted.

#ed0c00

$red--100

#d00a00

$red--120

#f15047

$red--80

#f57c75

$red--60

#f8a7a3

$red--40

#fcd3d1

$red--20

#3c1053

$purple--100

#2d0c3e

$purple--115

#260B34

$purple--120

#643075

$purple--80

#8a7098

$purple--60

#b19fba

$purple--40

#d8cfdd

$purple--20

Secondary colours

Usage

Charcoal and mid-grays, stone and sand colours are used as neutral supporting colours in text heavy applications. Sand is also used in association with ACU research content.

Charcoal--100 and our neutral colours should be used in a supportive role to our primary colours.

However charcoal--120 is our default text or copy colour on white background. This is for accessibility reasons: charcoal--100 does not provide enough contrast against red--100, our default link colour in blocks of text like paragraphs. See examples below.

Charcoals and blacks

#3d3935

$charcoal--100

#252320

$charcoal--120

#747474

$black--80

#cccccc

$black--40

#eeeeee

$black--20

#fafafa

$black--10

Neutrals

#8c857b

$stone

Warning: Stone provides poor contrast with white or dark coloured small text.

#e8e3db

$sand

#ffffff

$white

Bootstrap alert colours

The Bootstrap alert colour patterns are mainly used in alert or feedback messages in form interactions. These colours have become standard in many websites throughout the world and therefore users are familiar with their use and meaning.

Success! Indicates a successful or positive action.

Info! Indicates a neutral informative change or action.

Warning! Indicates a warning that might need attention.

Danger! Indicates a dangerous or potentially negative action, e.g. error messages.

Example in action

The email subscription form on ACU's Impact content website (menu drop-down and footer)
https://www.impact.acu.edu.au/.

Resources

https://getbootstrap.com/docs/4.1/components/alerts/

Accessibility and colours

ACU is committed to following WCAG 2.1 (Web Content Accessibility Guidelines) as a minimum standard on our digital experience applications. In terms of colour, this mainly means presenting a text colour contrast ratio of at least 4.5:1 for AA level compliance. This helps ensure that users who cannot see the full colour spectrum are still able to read text and see links.

Using our standard colour combinations which are presented below will ensure you meet this standard. However, tools are also available to check contrast.

Resources (tools)

Small text

These tools define contrast levels for both small text and large text, the later being more forgiving.

Small text is defined as being 1.5em approximately or less and 1.2em approximately if bold.

See https://developer.paciellogroup.com/blog/2012/05/whats-large-text-in-wcag-2-0-parlance/ for more information.

Text and background colour combinations

Text colours on white backgrounds

Usage: demonstrates the different types and hierarchy of text usage.

Default body copy (text) colour on white as the default body background colour.
$charcoal--120 on $white

Secondary copy (text) colour on white background. Use sparingly, e.g. blockquotes.
$purple--100 on $white

Default link text colour on white background.
$red-100 on $white

Default link text colour contrasted against our default text colour on white background e.g. links within a default parargraph. This combination passes the WCAG 2 AA minimum contrast of 3.0.1 with surround text (accessibility standard).
$red--100 (link colour) and $charcoal--120 (text colour) on $white

Default link hover text colour contrasted against our default text colour on white background.
$red--100 (link colour) and $charcoal--100 (text colour) on $white

Body copy (text) colour on white background.
$black--80 on $white

Body copy (text) colour on white background.
$purple--120 on $white

Text on coloured backgrounds

Text on purple backgrounds

Usage: to separate content or create emphasis in coloured panels. Also used for different states on buttons (call-to-actions) - see Buttons and links.

White copy (text) colour on purple-100: often used on the header, footer and highlight panels that separate content and / or create emphasis.
$white on $purple--100

White copy purple-120 background: often used for contrast over a purple-100 background or as a hover state.
$white on $purple--120

White copy on purple-80 background: used on highlight panels that separate content and / or create emphasis.
$white on $purple-80

Supportive copy (text), purple-40 on purple-100 background. Presents soft copy for a secondary or supportive component which is easy on the eyes. However, contrast is at the minimum level.
$purple--40 on $purple--100

Supportive copy (text), purple-40 on purple-100 background. Presents soft copy for a secondary or supportive component which is easy on the eyes. However, contrast is at the minimum level.
$purple--100 on $purple--20

Text on red background

Highlight copy (text), white on a red-100 background. Used for panel components that separate content and / or create emphasis. Also used on button call-to-actions (e.g. primary button).
$white on $red--100

Text on sand backgrounds

Default copy (text) colour on sand background. Highlight panels that separate content and / or create emphasis
$charcoal--100 on $sand

Purple-100 copy (text) colour on sand background.
$purple--100 on $sand

Secondary copy (text), black-80 on a sand background. Presents soft copy for a secondary or supportive component, such as panels. It is easy on the eyes. Used on panels with sand backgrounds.
$black--80 on $sand

Text on gray background

Secondary copy (text), white on a black-80 background. Presents soft copy for a secondary or supportive component, such as panels. It is easy on the eyes.
$white on $black--80