When using colour, we always make sure we’re complying with accessibility guidelines.
Colour contrasts
We follow the Web Content Accessibility Guidelines (WCAG) produced by the World Wide Web Consortium.
This handy colour contrast grid will help you check you're meeting accessibility standards when combining colours from our palettes.
Please click here to enlarge the colour contrast grid or click on the image of the grid on the right.
Colour and text
We also use the WCAG when combining colour and text to ensure that everyone can read our content clearly. We prefer AAA compliance, but will accept AA.
-
AAA compliance requires a contrast ratio of 7:1 for small text (12-17px) and 4.5:1 for larger text (18px and over)
-
AA compliance requires a contrast ratio of 4.5:1 for small text (12-17px) and 3:1 for large text (18px and over)
Our colour accessibility chart shows the different colour combinations that work and the ones to avoid.