Good colour contrast: make sure you see everything clearly

Colour is a powerful way to communicate. With colour, you convey information, activate people or make things clear. Colour can also create a certain feeling in the readers of your website, app or document. But it is important that everyone sees everything clearly. Sufficient colour contrast is therefore important. What about this in WCAG 2.2? And what will change in WCAG 3?

The readability of text is an important part of digital accessibility. The difference between the colours of the text and the background largely determines how well the text can be read. WCAG 2.2 has been using a method to determine the colour contrast of text for several years. But this method has some limitations. WCAG 3 should improve on this in a few years with a new contrast method: APCA.

Colour contrast: the difference between two colours

Colour contrast refers to the difference between two colours. This difference is the contrast ratio. It usually refers to the difference between the colour of the text and the background colour. But colour contrast is also important for images, buttons, icons and fields in forms, for example.

Adequate colour contrast is important for all users. But especially for users with visual impairments, high contrast is sometimes necessary to read the text. Good colour contrast also helps if the sun shines on your screen or if you turn down the brightness of your screen at night.

The problem is that colour contrast is not something that works the same for all people. It is a perception of colour. It has to do with how our brains deal with two different colours. Font size and thickness also affects how we perceive colours. And so does the distance between words, letters and lines. Therein lies also the limitations of the method used for WCAG 2.2 to measure colour contrast: it does not take into account how we experience colours. The assessment is very black and white.

Visual comparison between too little colour contrast and sufficient colour contrast.

Colour contrast according to WCAG 2.2

In the Web Content Accessibility Guidelines (WCAG 2.2), there are a few web guidelines (success criteria) that say something about the colour contrast of text and other important parts of your website, app or document.

Measuring colour contrast for WCAG 2.2

Colour contrast can be measured in different ways. Consequently, there are many different colour contrast checkers. They all answer one question: "What colour should the text be to be readable on a background colour?". Almost all of them show the answer with a red cross or a green tick. Sometimes a number is also given. 4.5:1 is good, 3:1 is "ok" for larger text, 2:1 is insufficient. The higher the first number, the more readable the text is.

Want to check this yourself for your corporate identity? We are fans of the Colour Contrast Analyser from TPGi. You can also often measure colour contrast in Chrome's Developer Tools.

Contrast of text

Success criterion 1.4.3 and success criterion 1.4.6 deal with the contrast between text and background. For websites, apps and documents that want to comply with digital accessibility standards, a minimum contrast of 4.5:1 is perfect for most texts (success criterion 1.4.3). But an extra high colour contrast of 7.0:1 (success criterion 1.4.6) can be very helpful in some cases. Texts are then even more readable, which is of course a good thing.

Contrast of non-textual elements

Colour contrast is also important for other important non-text elements. For example, for important images, icons and fields in forms, a minimum colour contrast of 3.0:1 is required. But again, the higher the colour contrast, the better the visibility.

Advanced Perceptual Contrast Algorithm (APCA) in WCAG 3

WCAG 3 is most likely going to use a new method to measure colour contrast. This is the Advanced Perceptual Contrast Algorithm, or APCA. It is a big improvement over the current method. Go APCA!

So APCA does take into account the size of letters and how bold they are. The distance between letters, words and sentences also matters. How we perceive colour depends on:

• The size of the coloured element.
  Are you using a small and thin font or large and thick letters?

• The brightness of the background.
  Do you use a dark colour on a light background or the other way around?

• Other factors such as the space around the text and much more.

The APCA score is a number between 0 and 100. The higher the score, the better:

• 15:Minimum for non-textual elements

• 30: The absolute minimum for text, regardless of size, thickness, etc

• 45: Minimum for large text (similar to the old 3:1)

• 60: Minimum for normal text (the old 4.5:1)

• 75: The desired level for normal text

• 90: The minimum for very thin 'normal' text (the old 7:1)

Colour contrast comparison for WCAG 2.2 and APCA

In all cases, we assume text of 20px and font-weight:500

Colour contrast comparison for WCAG 2.2 and APCA.

Colour contrast comparison for WCAG 2.2 and APCA.

Measuring APCA score for WCAG 3

You can measure your own colour contrasts with the APCA Contrast Calculator. If you enter two colours there, you will immediately see for which font size and thickness the colour combination we or does not satisfy.

In Chrome's Developer Tools, you can already measure APCA scoring. You do this as follows:

1. Go to Chrome Developer Tools

2. Click the cog icon at the top right, which is Settings

3. Click the "Experiments"

4. Look for APCA in that list and check the box

5. .

You can now use APCA in Chrome Developer tools.

Designers are made happy by APC

UX designers and other designers now often struggle with the colour contrast requirements of WCAG 2.2. We can understand that! After all, a good colour contrast can have quite an impact on your house style. You sometimes have to make choices.

With the advent of APCA, designers get more opportunities to use colours that still have good colour contrast. Suddenly, it does become possible to put white text on an orange button! So, in our training for UX designers, we already briefly discuss this, even though APCA is not yet an approved standard. We will have to wait for WCAG 3 before we can actually use it.