Accessibility is a vitally important part of designing modern web content and it’s something we’re passionate about on the Digital team. Colour contrast is perhaps one of the first things that comes to mind when talking about accessible web design even if you’re not a web designer. There’s for good reason for this – illegible text or shapes that are hard to distinguish against their backgrounds are problems that people encounter every day, whether using digital products or physical ones like magazines or signage.
Making sure web content has sufficient colour contrast means that visitors can easily read text and identify the interactive elements on your pages (though good contrast is far from the only thing that makes interactive elements effective).
Measuring colour contrast
Saying that elements must have sufficient contrast is all well and good, but how do you know if an element has sufficient contrast? How do we measure it?
The University of Bath website aims to comply with version 2.2 of the Web Content Accessibility Guidelines (WCAG) which contains specific rules for ensuring that content has sufficient contrast. There are various criteria in these guidelines governing colour contrast, but all of them boil down to a rule that content of two different colours must have a colour contrast ratio of at least 4.5:1 for body text, or 3:1 for large text such as headings, or interactive elements like buttons. In simple terms, if two elements have a contrast ratio of say 3:1 then one of them has 3 times more contrast than the other. There are higher minimum contrast ratios for websites that aim to meet higher accessibility standards such as Level AAA, but the vast majority of web content that claims compliance with WCAG will be aiming at Level AA and thus these two ratios.
What’s the problem?
We’re not experts on this, so we won’t go into too much detail, but in simple terms, the mathematics behind calculating the contrast ratio used in WCAG is outdated and doesn’t accurately model how humans perceive the contrast between two colours. It comes from a time when relatively low brightness CRT monitors were the norm and, according to some experts, the mathematics has some fundamental flaws.
Arguably the most important aspect of determining the readability of content is luminance and WCAG’s contrast ratio doesn’t do a good job of taking luminance into account. Because of this, it tends to overstate the contrast of darker colours that have little to no luminance. This can result in some colour combinations that pass the 4.5:1 ratio but are functionally unreadable. It’s particularly bad if you’re designing a product that supports dark mode. We’ll see some examples of this later.
There is also the problem of a binary pass/fail result. Designers have long had a problem with WCAG’s approach here. Humans are very different from one another and contrast, like anything that we see, is perceptual. A combination of two colours may look different between two different people for all sorts of reasons, including the ability of their eyes to resolve detail, how their brains process the image, whether or not one of them has any colour vision deficiencies, and more. Therefore a simple binary PASS or FAIL isn’t that helpful and could actually be letting people with colour vision deficiencies down.
APCA as the solution
The Accessible Perceptual Contrast Algorithm, or APCA, is a new way of calculating colour contrast. In contrast (pardon the pun) to WCAG, APCA is designed with self-illuminated RGB displays in mind and also accounts for different colour spaces, including high dynamic range RGB.
ACPA generates a value for lightness contrast (Lc) for a pair of colours. This value is ‘perceptually uniform’. This means that unlike WCAG’s contrast ratios, it works equally well for dark and light colours and doesn’t overstate one over the other.
By focusing on luminance, which is the most important characteristic of readability, APCA is also able to do a better job of accounting for text of different weights, or in the case of interactive elements like buttons, lines of different thicknesses. Text which is smaller and thinner effectively has less luminance than bigger or thicker text of the same colour. This is shown in the image below where the luminance of varying text size is plotted on a logarithmic scale chart with contrast sensitivity on the y-axis and spatial frequency on the x-axis. The curve of the plot takes on an inverse J shape with high luminance large text high up in the top left of the curve. As text size and weight decreases, their luminance values also decrease and they end up further along the curve.
The APCA guidelines also recognise that not all use cases are the same in terms of luminance and readability. To address this, it implements a range-based scoring system for the Lc value with milestones along that range indicating some discreet values to aim for. Lc 90 represents a high lightness contrast and is the preferred value for normal or small body text with regular weights and a size of no smaller than 14px. Lc 45 represents the minimum level for heavier text like headings. Lc 15 is considered the absolute minimum level as it’s considered invisible for some users and should only be used for non-text and non-interactive elements that are of low importance. There are many other levels between these three but we won’t go into detail on those here.
Examples of WCAG vs APCA
After all this theory, you’re probably wondering what any of this actually looks like. Let’s look at some examples to illustrate areas where WCAG falls short and APCA provides a better solution.
First. we have a medium orange background with white (#FFF) text on top. At a size of 24px or greater, it’s quite readable. However, this colour combination actually fails WCAG’s blanket ratio of 3:1 for text at this size. In contrast, the APCA Lc value shows that it has enough luminance to be considered readable at this size.
Let’s look at another example, this time one where WCAG incorrectly results in a pass. This is a good example of the ‘dark mode’ problem inherent in WCAG’s colour contrast approach. We have a dark background with light grey text on top. Each of the four lines of text illustrates compliance with a different level and varies the text colour to meet the minimum contrast ratio or Lc.
The image above shows that while all of the colours meet their respective requirements, the WCAG text is less readable across the board, with the small text in particular being almost unreadable. Yet this would be considered a pass under WCAG.
Where do we go from here?
It’s clear that the APCA offers many benefits over WCAG’s simplistic colour contrast model. In fact, even The World Wide Web Consortium (W3C) - the custodians of WCAG if you will – agree. They’re planning on using APCA as their colour contrast model in the upcoming WCAG 3.0 standard. However, WCAG 3.0 is a long way off and is not expected to replace WCAG 2.2 for some time, probably years.
Despite the unknown release date of WCAG 3.0 , the benefits of using APCA are clear, so we may well begin to use it in favour of WCAG’s colour contrast model in the near future, phasing it in gradually. For the time being, we still have to comply with WCAG 2.2 so in instances where there is disagreement between the two approaches, WCAG’s colour contrast model will have to take priority.
Further reading
In writing this blog post, we fell down a bit of a research rabbit hole and made heavy use of several articles, including a few written by Andrew Somers, Director of Research at Myndex Technologies. He was even invited by W3C to consult on WCAG 3.0 as an expert in this field. His ‘easy intro to the APCA contrast method’ and his article in Smashing magazine on ‘the realities and myths of contrast and color’ are particularly good reads if you want to find out more about APCA.
Respond
