menu
» Web style guide » Colours Colours
These colours are for use on ANU websites only. Colours for printed publications may differ. Please check with the Marketing Office.
Accessibility
Colour combinations must pass minimal contrast checks to be considered accessible.
While all default ANU classes (such as box-solid) are accessible, it may still be possible to create inaccessible combinations. This is especially important when combining classes to use coloured text on a background colour, such as text-college on bg-college.
Each college colour is different, so what is an accessible combination for one college may not be acceptable for another. Please check the accessibility of your combination before using it (via something like Snook contrast checker or the WCAG contrast checker Firefox add-on).
Colour should also not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
University colours
All websites can use University colours:
| Colour name | Text | 100% | 75% | 50% | 25% | 10% |
|---|---|---|---|---|---|---|
| ANU Platinum | #55707D RGB (085,112,125) text-uni |
#8EBBD0 RGB (142,187,208) bg-uni |
#AACCDC RGB (170,204,220) bg-uni75 |
#C7DDE8 RGB (199,221,232) bg-uni50 |
#E3EEF3 RGB (227,238,243) bg-uni25 |
#F4F8FA RGB (244,248,250) bg-uni10 |
| Charcoal Grey | #666666 RGB (102,102,102) text-grey |
#333333 RGB (051,051,051) bg-grey |
#666666 RGB (102,102,102) bg-grey75 |
#999999 RGB (153,153,153) bg-grey50 |
#CCCCCC RGB (204,204,204) bg-grey25 |
#EBEBEB RGB (235,235,235) bg-grey10 |
| Black | #000000 RGB (000,000,000) text-black |
#000000 RGB (000,000,000) bg-black |
||||
| White | #FFFFFF * RGB (255,255,255) text-white |
#FFFFFF RGB (255,255,255) bg-white |
* Please note that white text on 100 per cent University colour is not accessible and should not be used.
Using colour styles
In the table above, the class names that you can use are indicated underneath the hex code ("bg" means background). For example:
This paragraph is <p class="bg-uni">.
This paragraph is <p class="text-uni"><strong>.
Colour styles are also available for tables, boxes, borders and divider lines.
College colours
For use by college sites
Colleges and areas within them can use accent colours for their own college from the relevant table below.
ANU College of Asia & the Pacific (CAP)
| Text | 100% | 75% | 50% | 25% | 10% | |
|---|---|---|---|---|---|---|
| Colour code | #934D16 RGB (147,077,022) |
#F58025 RGB (245,128,037) |
#F8A05C RGB (248,160,092) |
#FAC092 RGB (250,192,146) |
#FCDFC8 RGB (252,223,200) |
#FEF3EA RGB (254,243,234) |
| Class name | text-college | bg-college | bg-college75 | bg-college50 | bg-college25 | bg-college10 |
Please note: White text (text-white) on 100 per cent colour background (bg-college) does not pass accessibility contrast checks for ANU College of Asia & the Pacific. Please use default (or black) text instead.
Using college colour styles
College accents can be implemented with the class names bg-college and text-college. The relevant colour will be drawn automatically from your stylesheet.
For example, on ANU College of Asia & the Pacific websites:
The shading of this entire box is how <div class="box-college bg-college10"> would appear
This paragraph is how <p class="bg-college"> would appear
This paragraph is how <p class="text-college"> would appear
Colour styles are also available for tables, boxes, borders and divider lines.
For use by central sites
Sites for central divisions and areas use University colours and do not have access to the college classes in the tables above. However, there might be cases when central sites need to use college colours when presenting information about colleges. For example, a central site might be listing courses from several colleges and might want to use the college colours as a visual cue to make the material easier to scan.
The following classes are available to central division and area (ie platinum styled) sites:
| College | Text | Border 100% | Background 100% | Bg 75% | Bg 50% | Bg 25% | Bg 10% |
|---|---|---|---|---|---|---|---|
| CASS | text-cass | bdr-cass | bg-cass | bg-cass75 | bg-cass50 | bg-cass25 | bg-cass10 |
| CAP | text-cap | bdr-cap | bg-cap | bg-cap75 | bg-cap50 | bg-cap25 | bg-cap10 |
| CBE | text-cbe | bdr-cbe | bg-cbe | bg-cbe75 | bg-cbe50 | bg-cbe25 | bg-cbe10 |
| CECS | text-cecs | bdr-cecs | bg-cecs | bg-cecs75 | bg-cecs50 | bg-cecs25 | bg-cecs10 |
| CHM | text-chm | bdr-chm | bg-chm | bg-chm75 | bg-chm50 | bg-chm25 | bg-chm10 |
| COL | text-col | bdr-col | bg-col | bg-col75 | bg-col50 | bg-col25 | bg-col10 |
| COS | text-cos | bdr-cos | bg-cos | bg-cos75 | bg-cos50 | bg-cos25 | bg-cos10 |
