Colour combinations (to ensure accessibility)

Our website content editor allows you to give blocks background and text colours.

However, low contrast colour combinations make it harder to use and engage with our website. Read more at https://www.nngroup.com/articles/low-contrast/ 

Navy/black on white is preferred. Consider before choosing if you really need to differentiate the content by colour.

If you do need to use a coloured background, consider the "faded" version with navy text.

A common combination content creators try to use is white text on full teal background - this is entirely inaccessible, so use white on navy, or navy on faded teal instead.

If you want to use a full-strength brand colour, these are acceptable combinations:

• Navy on white / white on navy
• Navy on yellow / yellow on navy
• Purple on white / white on purple

These combinations should never be used:

• White on teal / teal on white (see contrast checker)
• White on yellow / yellow on white (see contrast checker)
• White on coral / coral on white (see contrast checker)
• Navy on purple / purple on navy (see contrast checker)

These combinations should be avoided in nearly all cases, as they do not meet all contrast standards at all sizes (noting that size may also be device-specific i.e. mobiles):

• Navy on teal / teal on navy (see contrast checker)
• Navy on coral / coral on navy (see contrast checker)