Colours
These are the approved colours for use on web sites and applications at the University of St Andrews.
Primary colours are the colours most widely used but when contrast is needed between two UI elements a tint or shade variant of a primary colour should be used. This can also be used to help show a change of state on an interactive element such as a button.
Available palettes
Main colours
BluePrimary
Blue25% tint
Blue50% tint
Blue25% shade
Light bluePrimary
Use for main links and buttons.
Light blue25% tint
Light blue50% tint
Light blue25% shade
RedPrimary
Red25% tint
Red50% tint
Red25% shade
Dark greyPrimary
Use for main text.
Grey
Mid grey
Use for visible interactive graphical UI elements.
Mid grey 2
Light grey
Light grey 2
Dark grey 2
OrangePrimary
Use only to signify focus on an element.
Dark orange
Additional colours
GreenPrimary
Green25% tint
Green50% tint
Green25% shade
PurplePrimary
Purple25% tint
Purple50% tint
Purple25% shade
BurgundyPrimary
Burgundy25% tint
Burgundy50% tint
Burgundy25% shade
Contextual colours
Colour should never be solely used to provide meaning as this is not accessible to all users. These colours should only be used for buttons, alerts, and text banners where colour is used to assist meaning.
Success
Information
Warning
Danger
Accessible colours
You must make sure that the contrast ratio of text and interactive elements in your web site or application meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
The following table shows how the palette colours contrast as a background against the common text colours (dark grey #202020 and white #ffffff). It also shows the palette colours contrast when used as a graphical UI element against a white background. This is indicated with a tick for success and a cross for failure. You can use this colour contrast checking tool by WebAIM to test other combinations.