May
18
2017

Website Support Clinic update – Homepage text colours

At a recent Website Support Clinic, I worked with a web publisher who was wondering about what determines the colour of the text on EdWeb homepage panes. In short, the text colour is determined by the site colour, pane priority level and whether the text is a link or not.

Site colour

EdWeb sites can have one of 11 site-wide colour themes. When using a low priority homepage pane (that is, the ones with a small band of colour at the top), link text for the pane’s title will be the colour of the theme.

Site-wide colour theme guidance

Pane priority

Link text becomes different colours when you start introducing different pane priorities.

The three priorities are:

  • low: small band of site colour at the top
  • medium: background of title it site colour
  • high: entire pane is site colour

Since medium and high priority panes have the colour theme as the background for the pane title, link text needs to be a different colour for the title.

The colour for each title link text is different for each theme and dependent on accessible colour contrasts.

See pane priority types on homepage wiki guidance

Titles that aren’t links

In cases where titles in homepage panes aren’t made links, they will either be black (in low priority panes) or white (in medium and high priority panes).

Links in Content field

Outside of the title region, if you add links in the Content field, they will either be blue (in low and medium priority panes) or the same colour as the title link text (in high priority panes).

See it for yourself

The following images show you the differences in text colour depending on site colour, pane priority and whether the title is a link.

Image Left Middle Right
Pane priority Medium High Low
Title text a link? No Yes Yes
University red

University red

University blue

University blue

Bright blue

Bright blue

Bright pink

Bright pink

Purple

Burgundy

Burgundy

Dark green

Dark green

Jade

Jade

Muted blue

Muted blue

Muted brown

Muted brown

Spruce grey

Spruce grey

Get in touch

If you’d like assistance or advice with any website task, drop us an email to book a support session.

Email Website Support

Website Support Clinics information

Add comment: