Basics

Colours

Accessibility

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, the colours Aqua, Gold, Lime and Yellow should not be used.

This includes the following CSS classes:

Foregrounds
fg-aqua, fg-gold, fg-lime and fg-yellow
Backgrounds
bg-aqua, bg-gold, bg-lime and bg-yellow
Buttons
btn-aqua, btn-gold, btn-lime and btn-yellow

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

Primary colour palette

Oxford Brookes Lime
#9eab05
rgb(158, 171, 5)

Oxford Brookes Charcoal
#424a52
rgb(66, 74, 82)

Oxford Brookes Pink
#d10373
rgb(209, 3, 115)

Top of page

Secondary colour palette

Oxford Brookes Purple
#6a2150
rgb(106,33,80)

Oxford Brookes Red
#c70540
rgb(199,5,64)

Oxford Brookes Yellow
#e3ba12
rgb(227,186,18)

Oxford Brookes Gold
#db7c12
rgb(219,124,18)

Oxford Brookes Aqua
#0085a1
rgb(0,133,161)

Oxford Brookes Blue
#003896
rgb(0,56,150)

Oxford Brookes Green
#006338
rgb(0,99,56)

Top of page

Neutral colour palette

Mid grey
#adafaf
rgb(173,175,175)

Light grey
#f3f3f3
rgb(243,243,243)

Top of page

Background colours

.bg-black
#000
rgb(0, 0, 0)

.bg-blue
#003896
rgb(0, 56, 150)

.bg-charcoal
#424a52
rgb(66, 74, 82)

.bg-darkgrey
#333
rgb(51, 51, 51)

.bg-green
#006338
rgb(0, 99, 56)

.bg-lightgrey
#f3f3f3
rgb(243, 243, 243)

.bg-midgrey
#adafaf
rgb(173, 175, 175)

.bg-pink
#d10373
rgb(209, 3, 115)

.bg-purple
#6a2150
rgb(106, 33, 80)

.bg-red
#c70540
rgb(199, 5, 64)

.bg-white
#fff
rgb(255, 255, 255)

Top of page

60% tint background colours

These colours should be used in combination with 100% colours.

.bg-aqua-60
#66b6c7
rgb(102,182,199)

.bg-blue-60
#6688c0
rgb(102,136,192)

.bg-gold-60
#f8bd68
rgb(248,189,104)

.bg-green-60
#66a188
rgb(102,161,136)

.bg-lime-60
#c5cd69
rgb(197,205,105)

.bg-pink-60
#e368ab
rgb(227,104,171)

.bg-purple-60
#a67a96
rgb(166,122,150)

.bg-red-60
#dd698c
rgb(221,105,140)

.bg-yellow-60
#eed671
rgb(238,214,113)

Top of page

20% tint background colours

These colours should be used in combination with 100% colours.

.bg-aqua-20
#cce7ec
rgb(204,231,236)

.bg-blue-20
#ccd7ea
rgb(204,215,234)

.bg-gold-20
#fde9cd
rgb(253,233,205)

.bg-green-20
#cce0d7
rgb(204,224,215)

.bg-lime-20
#eceecd
rgb(236,238,205)

.bg-pink-20
#f6cde3
rgb(246,205,227)

.bg-purple-20
#e1d3dc
rgb(225,211,220)

.bg-red-20
#f4cdd9
rgb(244,205,217)

.bg-yellow-20
#f9f1d0
rgb(249,241,208)

Top of page

Foreground colours

.fg-aqua
#0085a1
rgb(0, 133, 161)

.fg-black
#000
rgb(0, 0, 0)

.fg-blue
#003896
rgb(0, 56, 150)

.fg-charcoal
#424a52
rgb(66, 74, 82)

.fg-darkgrey
#333
rgb(51, 51, 51)

.fg-gold
#db7c12
rgb(219, 124, 18)

.fg-green
#006338
rgb(0, 99, 56)

.fg-lightgrey
#f3f3f3
rgb(243, 243, 243)

.fg-lime
#9eab05
rgb(158, 171, 5)

.fg-midgrey
#adafaf
rgb(173, 175, 175)

.fg-pink
#d10373
rgb(209, 3, 115)

.fg-purple
#6a2150
rgb(106, 33, 80)

.fg-red
#c70540
rgb(199, 5, 64)

.fg-yellow
#e3ba12
rgb(227, 186, 18)

.fg-white
#fff
rgb(255, 255, 255)

Top of page