Colour Accessibility

Colours need to have sufficient contrast between the text colour and its background for them to be readable by anyone. This includes text on backgrounds, icons, and buttons, as well as the colours used to convey other graphical information such as diagrams and maps.

In colour theory, contrasting colours, also known as complementary colours, are colours from opposing segments of the colour wheel. Colours that are directly across from one another on a basic colour wheel provide maximum contrast.

On the web, the use of complementary colours is about finding shades that provide enough contrast between content and the background for anyone with low vision impairments and colour deficiencies.

How do I check my colours' contrast?

Colours used within Social Pinpoint will always need to checked with white (#ffffff).

There are many tools available online to check colour contrast. These can provide some guidance:

• WebAIM’s Colour Contrast Checker
• WebAIM’s Link Colour Contrast Checker
• WhoCanUse - Visual impairment examples

You must meet WCAG AA criteria for colour contrast. AAA is not (yet) required.

How do I provide theme colours?

Colours should be provided in the theme guide checklist as HEX values eg. #133357

Please avoid specifying Pantone colours or CMYK values, as these are used for print.

What if I only have one or two brand colours?

If your brand only has one or two colours, we are able to apply these to all or multiple instances.

What if my colours don't meet contrast requirements?

If only one of your provided colours doesn't meet contrast, for example the accent colour, we could either:

• replace this colour with another colour that does meet contrast such as the main (and use the same colour as both main and accent)
• Increase the tint and/or saturation, or decrease the lightness of the colour, until it is dark enough
• find another colour within your style guide or main website to use instead

If none of your colours meet contrast, we would need to reevaluate your colour palette. The easiest option is to provide your brand's style guide or main website, where we could pick out colours that would be appropriate. Alternatively we could work to create a new palette specific to your engagement site.

What if I still want to use my colours even if they don't meet contrast requirements?

We strongly recommend to use colours that will meet required contrast levels, but are able to include an inaccessible colour if you confirm you are aware that it won't meet WCAG AA compliance levels and are ok with this.

Depending on your subscription level and colours wanted, we could look into including a lighter "tertiary" colour, where we would manually insert this colour in specific elements where we would also change the contrasting colour. Some examples of where a tertiary colour could be added are:

• Image banner background for side panel, angled and split designs
• Supplementary footer background colours
• Card hover colour
• Navigation background on Style 4 - Split

When a tertiary colour is added, it is hard coded into the theme, which means that changing this colour in the future will require extra time. So it is important to finalise this colour before a site is launched.