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 Arts & Social Sciences (CASS)
| Text | 100% | 75% | 50% | 25% | 10% | |
|---|---|---|---|---|---|---|
| Colour code | #003866 RGB (000,056,102) |
#005DAA RGB (000,093,170) |
#4086BF RGB (064,134,191) |
#80AED5 RGB (127,174,213) |
#BFD6EA RGB (191,214,206) |
#E6EFF7 RGB (230,239,247) |
| Class name | text-college | bg-college | bg-college75 | bg-college50 | bg-college25 | bg-college10 |
Please note: Default black text on 100 per cent colour background (bg-college or bg-uni) does not pass accessibility contrast checks for ANU College of Arts & Social Sciences. Text will be set to white text by default.
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 Arts & Social Sciences 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 |
