Colours for web

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. Please note, there is no obbs-blue text colour name.

It is important that our webpages meet web accessibility standards, including the minimum contrast ratios that the WCAG 2.2 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 for text and background colour combinations to comply to WCAG 2.2 Level AA as part of meeting government accessibility requirements. To meet this, we must 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.2 Level AA, colours should be tested before publishing content.

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

• Web Aim's Colour Contrast Checker
• Are My Colors Accessible?
• Information on the use of colour from the WCAG 2.2 specification

If you have any questions or suggestions for improvements, please contact the Web Team.