Skip to main content

Colour

The design system uses colour sparingly. As the site aims to meet a WCAG 2.0 Triple A standard, colour contrast is paramount. However, this can limit options to provide contrast between colours, for example between text and links. Choices are made in typography to help mitigate these issues.

A dark mode has been implemented.

Light modeDark modeBootstrap/CSS var
Background
 
White
#ffffff
 
Bg dark
#222529
--bs-body-bg-color
Text
 
Dark grey
#333333
 
Text dark
#dfe2e6
--bs-body-color
Link
 
RMIT blue
#000054
Mid blue
#6FB7FF
--bs-link-color-rgb
Link hover
 
Blue hover
#0051A8
Mid blue hover
#98c3fa
--bs-link-hover-color-rgb
Headings
 
RMIT blue
#000054
 
Text dark
#dfe2e6
--bs-link-hover-color-rgb
Underlay
 
Underlay grey
#F5F5F5
 
Underlay dark
#1c1f21
--bs-primary-bg-subtle
Underlay selected
 
Underlay selected
#E6E6E6
 
Underlay selected dark
#15171a
$underlay-selected
$underlay-selected-dark
Interface
 
Interface grey
#BFBFBF
 
Interface grey
#BFBFBF
$interface-grey
Common across both modes
Accent
 
RMIT red
#E61E2A
 
Accent dark
#E6636A
$accent-color
$accent-color-dark
Correct icons
 
Correct green
#009969
 
Correct green
#009969
$green
Common across both modes.

Contrast ratio - light mode

Colour combinationContrast ratio
    Dark Grey on White12.56
    Dark Grey on Underlay Grey11.58
    Dark Grey on Underlay Selected10.12
    RMIT Blue on White18.61
    RMIT Blue on Underlay Grey17.07

Contrast ratio - dark mode

Colour combinationContrast ratio
    Text dark on bg dark11.84
    Text dark on underlay dark12.75
    Text dark on underlay selected dark13.81
    Mid blue on bg dark7.24
    Mid blue on underlay dark7.8

Highlighted text

It may be neccesary to mark text to highlight certain words or phrases. It's important to remember to never use colour alone to convey information, due to visual impairments such as colour blindness.

If you want a sequence of colours more distinguishable to people with colour blindness, use the highlights sequentially:

yellow, cyan, teal, pink, orange, purple

Consider breaking your content up further if you find you have more than nine highlights.

Class nameText colourBg colourResult
highlight-1#000000#fac800Highlighted text
highlight-2#000000#70cfffHighlighted text
highlight-3#000000#81e996Highlighted text
highlight-4#000000#eb7ab6Highlighted text
highlight-5#000000#f5904dHighlighted text
highlight-6#000000#e66cefHighlighted text
highlight-7#000000#00F2B6Highlighted text
highlight-8#000000#99AFFFHighlighted text
highlight-9#000000#CEF218Highlighted text

#000000 is used as the text colour to maximise contrast