Contrast between foreground and background colours are tested to ensure WCAG AA compliance. Where colour is used to draw attention to an item and insufficient contrast exists between a background colour and element colour, additional techniques may be required to provide support for users unable to perceive the colour.
University of Leeds Brand colours
These are the online brand colours for The University of Leeds
Reds
- SCSS var
- $color-brand--dark
- Hexadecimal
- #910000
- Acccessible use
-
Normal light text
Ratio: 9.52:1 WCAG 2.1: AAA
-
Large light text
Ratio: 9.52:1 WCAG 2.1: AAA
- SCSS var
- $color-brand
- Hexadecimal
- #c70000
- Acccessible use
-
Normal light text
Ratio: 6.12:1 WCAG 2.1: AA
-
Large light text
Ratio: 6.12:1 WCAG 2.1: AAA
- SCSS var
- $color-brand--bright
- Hexadecimal
- #ff4e36
- Acccessible use
-
Large dark text
Ratio: 4.69:1 WCAG 2.1: AA
-
Large light text
Ratio: 3.28:1 WCAG 2.1: AA
- SCSS var
- $color-brand--pastel
- Hexadecimal
- #ff8a7a
- Acccessible use
-
Normal dark text
Ratio: 6.73:1 WCAG 2.1: AA
-
Large dark text
Ratio: 6.73:1 WCAG 2.1: AAA
- SCSS var
- $color-brand--faded
- Hexadecimal
- #ffeded
- Acccessible use
-
Normal dark text
Ratio: 13.65:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 13.65:1 WCAG 2.1: AAA
Black
"Neutrals" for page architecture, site masthead and footer
- SCSS var
- $color-black--dark
- Hexadecimal
- #0a0202
- Acccessible use
-
Normal light text
Ratio: 20.53:1 WCAG 2.1: AAA
-
Large light text
Ratio: 20.53:1 WCAG 2.1: AAA
- SCSS var
- $color-black
- Hexadecimal
- #212121
- Acccessible use
-
Normal light text
Ratio: 16.1:1 WCAG 2.1: AAA
-
Large light text
Ratio: 16.1:1 WCAG 2.1: AAA
- SCSS var
- $color-black--light
- Hexadecimal
- #6e6b6b
- Acccessible use
-
Normal light text
Ratio: 5.27:1 WCAG 2.1: AA
-
Large light text
Ratio: 5.27:1 WCAG 2.1: AAA
- SCSS var
- $color-black--faded
- Hexadecimal
- #dedede
- Acccessible use
-
Normal dark text
Ratio: 11.46:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 11.46:1 WCAG 2.1: AAA
Greens
- SCSS var
- $color-brand-2--dark
- Hexadecimal
- #156265
- Acccessible use
-
Normal light text
Ratio: 7.08:1 WCAG 2.1: AAA
-
Large light text
Ratio: 7.08:1 WCAG 2.1: AAA
- SCSS var
- $color-brand-2--bright
- Hexadecimal
- #026E7A
- Acccessible use
-
Normal light text
Ratio: 5.97:1 WCAG 2.1: AA
-
Large light text
Ratio: 5.97:1 WCAG 2.1: AAA
- SCSS var
- $color-brand-2--light
- Hexadecimal
- #ABC6C7
- Acccessible use
-
Normal dark text
Ratio: 8.54:1 WCAG 2.1: AA
-
Large dark text
Ratio: 8.54:1 WCAG 2.1: AAA
Cool Greys
"Neutrals" for page architecture
- SCSS var
- $color-grey--dark
- Hexadecimal
- #6a645d
- Acccessible use
-
Normal light text
Ratio: 5.84:1 WCAG 2.1: AAA
-
Large light text
Ratio: 5.84:1 WCAG 2.1: AAA
- SCSS var
- $color-grey--medium
- Hexadecimal
- #bcb8b3
- Acccessible use
-
Normal dark text
Ratio: 7.81:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 7.81:1 WCAG 2.1: AAA
- SCSS var
- $color-grey
- Hexadecimal
- #ddd9d5
- Acccessible use
-
Normal dark text
Ratio: 10.98:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 10.98:1 WCAG 2.1: AAA
- SCSS var
- $color-grey--light
- Hexadecimal
- #eae8e6
- Acccessible use
-
Normal dark text
Ratio: 12.62:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 12.62:1 WCAG 2.1: AAA
- SCSS var
- $color-grey--faded
- Hexadecimal
- #f3f2f1
- Acccessible use
-
Normal dark text
Ratio: 13.79:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 13.79:1 WCAG 2.1: AAA
Warm Greys
"Neutrals" for page architecture
- SCSS var
- $color-warmgrey--dark
- Hexadecimal
- #5f5754
- Acccessible use
-
Normal light text
Ratio: 7.05:1 WCAG 2.1: AAA
-
Large light text
Ratio: 7.05:1 WCAG 2.1: AAA
- SCSS var
- $color-warmgrey--medium
- Hexadecimal
- #81746e
- Acccessible use
-
Normal light text
Ratio: 4.5:1 WCAG 2.1: AA
-
Large light text
Ratio: 4.5:1 WCAG 2.1: AAA
- SCSS var
- $color-warmgrey
- Hexadecimal
- #b7aaa4
- Acccessible use
-
Normal dark text
Ratio: 6.83:1 WCAG 2.1: AA
-
Large dark text
Ratio: 6.83:1 WCAG 2.1: AAA
- SCSS var
- $color-warmgrey--light
- Hexadecimal
- #cac2ba
- Acccessible use
-
Normal dark text
Ratio: 8.76:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 8.76:1 WCAG 2.1: AAA
- SCSS var
- $color-warmgrey--faded
- Hexadecimal
- #efeae6
- Acccessible use
-
Normal dark text
Ratio: 12.91:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 12.91:1 WCAG 2.1: AAA
Creams
"Neutrals" for page architecture
- SCSS var
- $color-cream--dark
- Hexadecimal
- #ddcfc0
- Acccessible use
-
Normal dark text
Ratio: 10.1:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 10.1:1 WCAG 2.1: AAA
- SCSS var
- $color-cream--medium
- Hexadecimal
- #e9e1d8
- Acccessible use
-
Normal dark text
Ratio: 11.91:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 11.91:1 WCAG 2.1: AAA
- SCSS var
- $color-cream
- Hexadecimal
- #f6eee5
- Acccessible use
-
Normal dark text
Ratio: 13.42:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 13.42:1 WCAG 2.1: AAA
- SCSS var
- $color-cream--light
- Hexadecimal
- #faf6f1
- Acccessible use
-
Normal dark text
Ratio: 14.33:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 14.33:1 WCAG 2.1: AAA
Whites
"Neutrals" for page architecture
- SCSS var
- $color-white--dark
- Hexadecimal
- #fffbf5
- Acccessible use
-
Normal dark text
Ratio: 14.96:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 14.96:1 WCAG 2.1: AAA
- SCSS var
- $color-white
- Hexadecimal
- #ffffff
- Acccessible use
-
Normal dark text
Ratio: 15.42:1 WCAG 2.1: AAA
-
Large dark text
Ratio: 15.42:1 WCAG 2.1: AAA
Tertiary colours
Used sparingly, to provide contrast for highlighting and messaging.
- SCSS var
- $color-blue--dark
- Hexadecimal
- #00323d
- Acccessible use
-
Normal light text
Ratio: 13.78:1 WCAG 2.1: AAA
-
Large light text
Ratio: 13.78:1 WCAG 2.1: AAA
- SCSS var
- $color-blue
- Hexadecimal
- #003a52
- Acccessible use
-
Normal light text
Ratio: 12.15:1 WCAG 2.1: AAA
-
Large light text
Ratio: 12.15:1 WCAG 2.1: AAA
- SCSS var
- $color-blue--bright
- Hexadecimal
- #1a84c7
- Acccessible use
-
Large dark text
Ratio: 3.79:1 WCAG 2.1: AA
-
Large light text
Ratio: 4.06:1 WCAG 2.1: AA
Text
- SCSS var
- $color-font--dark
- Hexadecimal
- #0e0c0c
- Acccessible use
-
Normal light text
Ratio: 19.5:1 WCAG 2.1: AAA
-
Large light text
Ratio: 19.5:1 WCAG 2.1: AAA
- SCSS var
- $color-font
- Hexadecimal
- #212529
- Acccessible use
-
Normal light text
Ratio: 15.42:1 WCAG 2.1: AAA
-
Large light text
Ratio: 15.42:1 WCAG 2.1: AAA
- SCSS var
- $color-font--light
- Hexadecimal
- #3B3B3B
- Acccessible use
-
Normal light text
Ratio: 11.2:1 WCAG 2.1: AAA
-
Large light text
Ratio: 11.2:1 WCAG 2.1: AAA
- SCSS var
- $color-font--x-light
- Hexadecimal
- #636363
- Acccessible use
-
Normal light text
Ratio: 6:1 WCAG 2.1: AA
-
Large light text
Ratio: 6:1 WCAG 2.1: AAA
Links
Links in documents and articles should always use this colour where the background is white. If a non-white background colour is used the link should be black or white.
- SCSS var
- $color-link
- Hexadecimal
- #910000
- SCSS var
- $color-link--hover
- Hexadecimal
- #0e0c0c
- SCSS var
- $color-link--visited
- Hexadecimal
- #570000
- SCSS var
- $color-link--active
- Hexadecimal
- #570000
Borders
- SCSS var
- $color-border--light
- Hexadecimal
- #c9c8c5
- SCSS var
- $color-border
- Hexadecimal
- #51504c
Alerts
- SCSS var
- $color-alert--error
- Hexadecimal
- #d4351c
- SCSS var
- $color-alert--warning
- Hexadecimal
- #e76f16
- SCSS var
- $color-alert--success
- Hexadecimal
- #3a9018
- SCSS var
- $color-alert--info
- Hexadecimal
- #1993bd
New brand colours
- SCSS var
- $color-teal
- Hexadecimal
- #00D0A0
- SCSS var
- $color-teal--dark
- Hexadecimal
- #00A881
- SCSS var
- $color-cream
- Hexadecimal
- #FFF0E2