At the end of 2021, the Accessibility Guidelines Working Group (AGWG) announced that they are introducing a new colour contrast guide for web creators as part of their Web Content Accessibility Guidelines (WCAG) update, called Advanced Perceptual Contrast Algorithm (APCA). WCAG 3, the latest update, will replace the older WCAG 2 method and 1.4.3 contrast and provide a range of recommendations for making web content more accessible to users with special needs.
Accessibility in web design
Everybody is online. More importantly, everybody is different. That’s why it’s now more important than ever to ensure that your website is accessible in every way possible.
If you have excellent vision, it’s easy to forget that others might not. For example, those with visual or speech impairments, such as blindness, deafness or limited movement and agility, might perceive colours and text legibility differently.
When building websites, web designers and developers must consider these factors to ensure that the information on their website is easy to understand, regardless of individual capabilities.
This blog discusses the need for a new accessibility system and explores the updates in the new WCAG 3, but not before giving a brief overview of colour and contrast.
Introduction to colour and contrast
Before we delve into the details of the update, let’s explain how colour and contrast work.
To create colour on screen, we mix three primary colours: red, green and blue. This process is called additive colour. Then, from these colours, we can create over 16 million different colour combinations.
Contrast refers to the difference in relative luminance of two colours, namely, how bright a colour is relative to white. We calculate this by finding the luminance values of colours, a value between 0% (black) and 100% (white), and dividing the two values.
Therefore, contrast is a perception, not a simple measure of the distance between two colours. That’s why it’s vital to remember that not everybody’s perception is the same.
The need for a new accessibility system
Before the smartphone era, monitor displays were mostly CRT-type, and websites used only core web fonts. But, as technology has rapidly advanced, so has the demand for accessibility.
These days, contrast guidelines must account for changes in computer display technology, web content, CSS functionality and much more. Hence the need for WCAG 3.
While the WCAG 2 guidelines have been – and are still – largely beneficial, they are not always right. Not only were they made long before the surge of iPhones and iPads, but they do not accommodate human perception. For example, as humans, we tend to perceive higher contrast between brighter colours than darker ones, even if the luminance values are the same.
The new WCAG 3: APCA (Advanced Perceptual Contrast Algorithm)
The new WCAG 3 method sees massive improvements in the current contrast system. The most significant changes are listed below:
- New scoring system. The new APCA scores accessibility by level out of 100 instead of ratios. The higher the number, the higher the contrast. 15 is the minimum for non-text elements, while 75 is the preferred level for body text.
- Weight and text size. The new guidelines consider the size and weight of text to measure accessibility. The thinner the text, the lower the score.
- Swapping text and background colours. If you swap text and background colours, the accessibility result differs, unlike WCAG 2, which yields the same results.
- Contrast is modelled perceptually, not mathematically. Unlike WCAG 2, the new APCA considers that humans do not perceive contrast linearly across hue and lightness.
Conclusion
While they might feel long overdue, the new APCA guidelines are an excellent response to changing technologies for us web developers and graphic designers. The new scoring system and consideration of human perception will make our lives a lot easier when creating websites, and we are excited for the update to arrive later this year.