When creating content, you may want to make use of colour to enhance it.
It is important when doing so to consider the needs of the user. For example, those who:
- are visually impaired/colour blind
- are using limited colour displays
- are of an older age
- have general issues with differentiating colour
There should also be a cognitive consideration as not all users will see colour in the same way. Use of too much colour and/or that which is too bright with unsuitable contrast can be overwhelming, including for those who are neurodivergent.
This is why you shouldn’t rely on colour as a sole way to communicate information. There should additionally be text descriptions, icons or other visual cues alongside to aid users’ understanding.
Luckily there are many tools available to inform your decision making when it comes to colour.
Contrast ratio
Contrast is a measure of the difference in brightness between two colours. This difference is a ratio ranging from 1:1 (white on white) to 21:1 (black on white).
People with low vision often struggle to read text that doesn’t contrast with its background. This can be made worse if the person has a colour vision deficiency that lowers the contrast more. The WebAIM colour contrast checker highlights whether your use of colour contrast would pass or fail.
The contrast ratio for WCAG 2.2 AAA regulations is 7:1. For larger text (18 point and above, or 14 point for bold), this should be 4.5:1. At North Ayrshire Council we follow AAA standard to ensure no one is excluded from accessing content.
Contrast ratios cannot be rounded up to 4.5:1. For example, 4.47:1 would still not meet the requirement. This is where the tool comes in handy as you will see the Pass or Fail marker change accordingly as you adjust the toggle.
Who Can Use is another interactive visualisation tool which shows how your colour contrast affects those with a wide range of impairments and situational events. See screenshot below.
Colour picker tools
There are colour sampling tools and browser plugins available that identify colour:
- Snap Colour Picker for Microsoft Edge – a browser add-on allowing you to select colours from any website/digital document in HEX, RGB, HSV or CSS formats
- Pick colour online – a free tool to help select your colour for a WebAim check
Making use of these tools will ensure your content is easily understood by those consuming it. As you do so, keep in mind WCAG’s three briefs for this area of the regulations:
1. Goal – colour is not the only way of distinguishing information
2. What to do – use information in addition to colour, such as shape or text, to convey meaning
3. Why it’s important – not everyone sees colours or sees them in the same way