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 mode | Dark mode | Bootstrap/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 combination | Contrast ratio |
|---|---|
| Dark Grey on White | 12.56 |
| Dark Grey on Underlay Grey | 11.58 |
| Dark Grey on Underlay Selected | 10.12 |
| RMIT Blue on White | 18.61 |
| RMIT Blue on Underlay Grey | 17.07 |
Contrast ratio - dark mode
| Colour combination | Contrast ratio |
|---|---|
| Text dark on bg dark | 11.84 |
| Text dark on underlay dark | 12.75 |
| Text dark on underlay selected dark | 13.81 |
| Mid blue on bg dark | 7.24 |
| Mid blue on underlay dark | 7.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 name | Text colour | Bg colour | Result |
|---|---|---|---|
highlight-1 | #000000 | #fac800 | Highlighted text |
highlight-2 | #000000 | #70cfff | Highlighted text |
highlight-3 | #000000 | #81e996 | Highlighted text |
highlight-4 | #000000 | #eb7ab6 | Highlighted text |
highlight-5 | #000000 | #f5904d | Highlighted text |
highlight-6 | #000000 | #e66cef | Highlighted text |
highlight-7 | #000000 | #00F2B6 | Highlighted text |
highlight-8 | #000000 | #99AFFF | Highlighted text |
highlight-9 | #000000 | #CEF218 | Highlighted text |
#000000 is used as the text colour to maximise contrast
