Colours

Ready

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

The Design System follows the colour palette and combos highlighted by Brand.

Main colours

SCSS var: $brand-black
Hexadecimal: #000000

Acccessible use: Normal light text Ratio: 21:1 WCAG 2.1: AAA; Large light text Ratio: 21:1 WCAG 2.1: AAA

SCSS var: $brand-white
Hexadecimal: #ffffff

Acccessible use: Normal dark text Ratio: 21:1 WCAG 2.1: AAA; Large dark text Ratio: 21:1 WCAG 2.1: AAA

Black text scale

SCSS var: $brand-black-80
Hexadecimal: #333333

Acccessible use: Normal light text Ratio: 12.63:1 WCAG 2.1: AAA; Large light text Ratio: 12.63:1 WCAG 2.1: AAA

SCSS var: $brand-black-60
Hexadecimal: #808080

Acccessible use: Normal dark text Ratio: 5.32:1 WCAG 2.1: AA; Large dark text Ratio: 5.32:1 WCAG 2.1: AAA; Large light text Ratio: 3.95:1 WCAG 2.1: AA

SCSS var: $brand-black-30
Hexadecimal: #b3b3b3

Acccessible use: Normal dark text Ratio: 9.04:1 WCAG 2.1: AAA; Large dark text Ratio: 9.04:1 WCAG 2.1: AAA

SCSS var: $brand-black-10
Hexadecimal: #e6e6e6

Acccessible use: Normal dark text Ratio: 16.83:1 WCAG 2.1: AAA; Large dark text Ratio: 16.83:1 WCAG 2.1: AAA

SCSS var: $brand-black-5
Hexadecimal: #f7f7f7

Acccessible use: Normal dark text Ratio: 19.12:1 WCAG 2.1: AAA; Large dark text Ratio: 19.12:1 WCAG 2.1: AAA

Stone scale

SCSS var: $brand-stone
Hexadecimal: #D1CABA

Acccessible use: Normal dark text Ratio: 13.1:1 WCAG 2.1: AAA; Large dark text Ratio: 13.1:1 WCAG 2.1: AAA

SCSS var: $brand-stone-80
Hexadecimal: #DAD4CE

Acccessible use: Normal dark text Ratio: 14.1:1 WCAG 2.1: AAA; Large dark text Ratio: 14.1:1 WCAG 2.1: AAA

SCSS var: $brand-stone-60
Hexadecimal: #E4DFD6

Acccessible use: Normal dark text Ratio: 15.1:1 WCAG 2.1: AAA; Large dark text Ratio: 15.1:1 WCAG 2.1: AAA

SCSS var: $brand-stone-30
Hexadecimal: #F1EFEA

Acccessible use: Normal dark text Ratio: 17.5:1 WCAG 2.1: AAA; Large dark text Ratio: 17.5:1 WCAG 2.1: AAA

SCSS var: $brand-stone-20
Hexadecimal: #FEFCF9

Acccessible use: Normal dark text Ratio: 20.2:1 WCAG 2.1: AAA; Large dark text Ratio: 20.2:1 WCAG 2.1: AAA

SCSS var: $brand-stone-10
Hexadecimal: #FBFAF8

Acccessible use: Normal dark text Ratio: 19.8:1 WCAG 2.1: AAA; Large dark text Ratio: 19.8:1 WCAG 2.1: AAA

Brand reds

SCSS var: $brand-red
Hexadecimal: #af1b00

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: $brand-brick
Hexadecimal: #923619

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: $brand-orange
Hexadecimal: #ff620a

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: $brand-coral
Hexadecimal: #ff4e36

Acccessible use: Normal dark text Ratio: 6.73:1 WCAG 2.1: AA; Large dark text Ratio: 6.73:1 WCAG 2.1: AAA

Brand browns

SCSS var: $brand-pale-brown
Hexadecimal: #eec3b5

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: $brand-light-brown
Hexadecimal: #da9873

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: $brand-brown
Hexadecimal: #75503e

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: $brand-dark-brown
Hexadecimal: #4c322f

Acccessible use: Normal dark text Ratio: 6.73:1 WCAG 2.1: AA; Large dark text Ratio: 6.73:1 WCAG 2.1: AAA

Brand greys

SCSS var: $brand-stone
Hexadecimal: #d3cab9

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: $brand-cream
Hexadecimal: #fff0e2

Acccessible use: Normal light text Ratio: 6.12:1 WCAG 2.1: AA; Large light text Ratio: 6.12:1 WCAG 2.1: AAA

Brand greens

SCSS var: $brand-vid-yellow
Hexadecimal: #d9ff2e

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: $brand-pale-green
Hexadecimal: #88ffb8

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: $brand-vivid-green
Hexadecimal: #6dff66

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: $brand-teal
Hexadecimal: #00d0a0

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: $brand-green
Hexadecimal: #27af5d

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: $brand-dark-green
Hexadecimal: #00502f

Acccessible use: Normal dark text Ratio: 6.73:1 WCAG 2.1: AA; Large dark text Ratio: 6.73:1 WCAG 2.1: AAA

Brand blues

SCSS var: $brand-pale-blue
Hexadecimal: #9cedff

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: $brand-light-blue
Hexadecimal: #00d3ff

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: $vivid-blue
Hexadecimal: #0037fb

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: $brand-dark-blue
Hexadecimal: #0037fb

Acccessible use: Normal dark text Ratio: 6.73:1 WCAG 2.1: AA; Large dark text Ratio: 6.73:1 WCAG 2.1: AAA

Brand pinks

SCSS var: $brand-pink
Hexadecimal: #ffa8ff

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: $brand-lilac
Hexadecimal: #b7a6ff

Acccessible use: Normal light text Ratio: 6.12:1 WCAG 2.1: AA; Large light text Ratio: 6.12:1 WCAG 2.1: AAA

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