Checking colour contrast

Consider the links, headings and other text content on your website. Do you think the colours you’ve chosen contrast well against their background? More to the point, how can you tell? When people talk about colour contrast on the web, they’re usually thinking in terms of text and information rich images. Most people won’t care what colours you’ve used for your decorative swooshes. If they can’t read the information you’ve put on your website though, they’re likely to be quite unhappy about it.

So, what is good colour contrast?

For most people it’s just a reasonable difference between the foreground and background colours. Partially sighted people often find a high level of contrast more comfortable though, whilst people with certain reading difficulties may prefer a more subtle colour difference. Add various forms of colour blindness into the mix, and it starts to feel like a positive rainbow of requirements.

So, how do I check colour contrast?

The W3C has an algorithm for calculating colour contrast. It’s used to define two success criteria from the Web Content Accessibility Guidelines 2.0:

  • 1.4.3 Contrast (minimum);
  • 1.4.6 Contrast (enhanced).

These success criteria focus on achieving a minimum level of contrast. This means they’re helpful for choosing colours that partially sighted people are likely to find easier to read. The only difference is the level of contrast needed to meet each success criterion.

1.4.3 Contrast (minimum)

To meet this Level AA success criterion, the colours you use to display text should achieve a contrast ratio of at least 4.5:1. If your text is larger than 18pt, or larger than 14pt and bold, the ratio relaxes slightly to 3:1 instead.

1.4.6 Contrast (enhanced)

This Level AAA success criterion builds on 1.4.3, and raises the minimum contrast ratio for text to 7:1. Again, the ratio relaxes slightly for text over 18pt, or over 14pt and bold, to become 4.5:1 instead. In other words, if you’re aiming to meet Level AA your standard text needs to have a ratio of at least 4.5:1 and your large/bold text a ratio of 3:1. If you want to go a step further and meet Level AAA, your standard text must have a colour contrast ratio of 7:1, and your large/bold text a contrast ratio of 4.5:1. There are some exceptions to the rule. Logo text is exempt from both success criteria. So is incidental text, although this is a little harder to define. It’s effectively text that has no purpose, conveys no information, or is purely decorative. Several tools are available to help you check colour contrast ratios. Just enter the hex (colour) codes you'd like to compare and they'll tell you what contrast ratio they achieve. Try the Juicy Studio Luminosity colour contrast ratio analyser for an online tool.

Ok, so what about low colour contrast?

Guidance on low colour contrast is more difficult to find. The Web Content Accessibility Guidelines don’t include a maximum colour contrast ratio at any rate. The British Dyslexia Association advises against using a white background. It can cause an uncomfortable glare that makes reading difficult, something that is also experienced by some partially sighted people. Information on visual stress suggests that colour plays an important role in readability, but that the choice of colour varies from person to person. Which leads us neatly onto the idea of personalisation. It’s clear that colours, both in terms of taste and requirements, are a personal matter. Giving people a choice of colours may be the only sane way to make sure everyone can read your online information easily.

Ok, so how do I do that?

One way is to introduce a style switcher. It’s a simple page widget that lets people choose a colour scheme that works for them. You can define two or more colour schemes, which can help the design stay on brand as well as offer people an element of personal choice. Here’s a basic approach to get you started:

  1. Create a primary colour scheme that meets the 4.5:1 contrast ratio of SC1.4.3;
  2. Create an alternate high contrast colour scheme that meets (or exceeds) the 7:1 contrast ratio of SC1.4.6;
  3. Create an alternate low contrast colour scheme that does not have a white background and that uses muted colours.

Example style switchers can be found on the British Computer Association of the Blind and Sky TV Accessibility websites. A style switcher won’t capture every colour permutation, but it’s an effective way of making your online information easier to read for more people.