1. Design System
  2. Base
  3. Colours

Colours In Progress

Colours used on the Oxford Brookes University website

These are the colour names used on the website.

Note: For colours used in external communication materials, view our colours used in digital and print page.



To use a background or text colour use the .has-background- or .has-text- and one of the colour names above. For example, .has-background-primary.

The obbs-blue background colour name should only be used by Oxford Brookes Business School. Note, there is no obbs-blue text colour name.


It is important that our web pages meet web accessibility standards, including the minimum contrast ratios that the WCAG 2.1 specifies for text and background colour combinations. This helps users who are colour blind or have low vision, but it also improves usability and readability for all users.

We aim to for text and background colour combinations to comply to WCAG 2.1 Level AA. To meet this, we should make sure that the colour contrast on body text is 4.5:1 and 3:1 on large text (24px). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).

Some users have difficulty reading text when there is not enough contrast between foreground and background colours. In order to meet the W3C Web Content Accessibility Guidelines 2.1 Level AA, colours should be tested before publishing content.

We have used the following tools and information to achieve compliance: