Accent Colours*
- $grey#3B3B3B
- $background-grey #E2E2E2
- $ui-silver #F1F1F1
Usage
- Body text
- Backgrounds
- Secondary buttons
- Headings
- Dividing lines
- Small background areas
- Large background areas
- Links
- Primary buttons
* The range of available greys has been limited to avoid:
- the saturation of neutral colours
- accessibility issues caused by mid-range grey tones
Accessibility
White
- Contrast ratio 11.2:1
- WCAG 2 AA Compliant Passed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Passed
- WCAG 2 AAA Compliant(18pt+) Passed
Use grey on white
Use white on Grey
Grey
N/A
- Contrast ratio
- WCAG 2 AA Compliant
- WCAG 2 AA Compliant(18pt+)
- WCAG 2 AAA Compliant
- WCAG 2 AAA Compliant(18pt+)
Background blue
- Contrast ratio 8.47:1
- WCAG 2 AA Compliant Passed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Passed
- WCAG 2 AAA Compliant(18pt+) Passed
Use grey on background blue
Avoid using background colours on blue
Background grey
- Contrast ratio 8.65:1
- WCAG 2 AA Compliant Passed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Passed
- WCAG 2 AAA Compliant(18pt+) Passed
Use grey on background grey
Avoid using background colours on grey
Background red
- Contrast ratio 7.71:1
- WCAG 2 AA Compliant Passed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Passed
- WCAG 2 AAA Compliant(18pt+) Passed
Use grey on background red
Avoid using background colours on grey
Background green
- Contrast ratio 8.61:1
- WCAG 2 AA Compliant Passed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Passed
- WCAG 2 AAA Compliant(18pt+) Passed
Use grey on background green
Avoid using background colours on grey
Background yellow
- Contrast ratio 9.7:1
- WCAG 2 AA Compliant Passed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Passed
- WCAG 2 AAA Compliant(18pt+) Passed
Use grey on background yellow
Avoid using background colours on grey
Background cream
- Contrast ratio 10.87:1
- WCAG 2 AA Compliant Passed
- WCAG 2 AA Compliant(18pt+) Passed
- WCAG 2 AAA Compliant Passed
- WCAG 2 AAA Compliant(18pt+) Passed
Use grey on background cream
Avoid using background colours on grey
