Lesson 13How to evaluate the accessibility of your web content?

Notion 91

Tools for evaluating colour choices and contrast

Target skills

Understand the usage of automated tools for evaluating your use of color for your web content.

The importance of automated testing for picking the right colours

Colours are an essential part of creating a better visual experience for users. Inaccessible colour combinations can present problems for users with learning, visual and even situational disabilities. The users affected by this might be:

working under circumstances of poor screen brightness,
colourblind (around 5% of web users today),
dyslexic, since they struggle with processing content if colours are both too similar or too contrasted (such as white on black),

and many others.

The differing profiles of these users should not discourage you. Your best bet is to follow WCAG success criteria. They state that standard text must meet a minimum contrast ratio of at least 4.5:1, and larger text (18 points or more) at least 3:1.

External links to test the accessibility of your chosen colours

Several tools are available that can automatically test these requirements for sufficient colour combinations. These tools are either downloadable or available for online use.

They allow you to determine:

which colour combinations can ensure better legibility of text
the colour contrast ratio of two colours
how colour combinations look to colourblind users

Many of them also offer suggestions for more suitable colour choices. They all use the WCAG success criteria for colours as a benchmark.

Colour blindness simulators

Colour oracle: http://colororacle.org/
Visolve: https://www.ryobi.co.jp/products/visolve/en/

Check out how the tool Visolve displays the difference between an original image (on the left) and how it appears to a user with colourblindness (on the right):