Use of colours

Primary colours

Tiles

Use light slate or transparent tile backgrounds. Use University blue sparingly. This will maximise the readability of text.

Call-to-action buttons

Use University blue.

Accordions

Use University blue.

University blue

light slate

transparent

Secondary colours

Use only one secondary colour per page.  And use it sparingly on the occasional tile, call-to-action button or accordion.

burgundy

lavender

leaf

moss

pillarbox

rust

sandstone

sky blue

slate

thistle

Example

Rationale

Our aim is to help you maximise the usability and readability of your web site.

3 colour rule

The '70-20-10' 3 colour rule [dominant colour (70%), secondary colour for depth (20%), accent colour (10%)] provides a simplicity and clarity to:

  • create a visually appealing balance to your design
  • prevent a page from appearing busy or clashing  
  • guide the user's eye through the content
  • increase the contrast to make your images and call-to-action buttons stand out

Readability 

Given that almost all your choice of colours will be as a background to text,  then our 70-20-10 should be:

  • 70% light grey/transparent 
  • 20% university blue
  • 10% secondary colour

By using off-white as a background colour, you will maximise the readability of text.  Most people find a dark text on a light background the easiest to read.