Colour contrast matters

Contrast is the difference in the perceived brightness between two colours. In the context of digital content, this is the difference between the text colour (also the colour of buttons, links, form fields) and the background colour.

A contrast ratio is how the difference in brightness is measured. The ratios range from 1:1 (both colours are the same) to 21:1 (black text on a white background or vice versa). A higher ratio means there is more difference between the colours. If the ratio is too low, the colours are too similar and may blend together for some people.

Here are some examples:

People who benefit from higher contrast include:

• those with low vision, colour blindness, or age-related vision decline
• those in bright sunlight, low-light conditions, or using lower-quality screens

Guidelines for contrast

The Web Content Accessibility Guidelines (WCAG) specify the following when it comes to contrast:

• Normal text (smaller than 18pt regular or 14pt bold) must have a contrast ratio of at least 4.5:1 against its background.
• Large Text (18pt regular or 14pt bold or larger) must have a contrast ratio of at least 3:1.
• Non-text elements (buttons, input fields) must have a contrast ratio of 3:1 against adjacent colours.
• Logos or brand-name text has no contrast requirement.

I may be oversimplifying it, but if the contrast ratios were on a spectrum, the above guidelines are on the low end:

Surely then, at least meeting the above requirements should be easy as it is down the low end of the scale. However, since 2019, the number 1 issue on websites in the WebAIM million has been low contrast text.

How to check contrast

There are several tools for checking contrast:

• I use the WebAIM Contrast Checker.
• If you are using Microsoft products, contrast issues can be picked up by the built-in Accessibility checker in Outlook, PowerPoint, Word, and Excel.
• Figma, Adobe XD, and Sketch have built-in or plugin-based contrast checkers.
• Browser Extensions – WAVE (Web Accessibility Evaluation Tool), axe DevTools – A Chrome/Firefox extension that audits accessibility, including contrast.

You can also try the built-in “Emulate vision deficiencies” feature within Chrome DevTools:

1. Right-click on any webpage and select “Inspect”.
2. Select the three-dot menu (More tools) and then select “Rendering”.
3. Locate the “Emulate vision deficiencies” option and use the dropdown menu to select the desired colour vision deficiency.
4. The webpage will now be displayed as it would appear to someone with the selected colour vision deficiency.