If I ask you about web accessibility, what is your first thought? Most people will say that accessibility is related to the contrast between foreground and background colours. That’s a very good answer, you must guarantee the minimum contrast value so that the text is easy to read. But what does contrast mean?
The WCAG 2.1 (Web Content Accessibility Guidelines) set the recommended and minimum contrast values as well as the algorithm to calculate the relative contrast ratio with the RGB values of each colour. Contrast calculator tools follow these rules and thresholds, even the button block deprecated in WordPress 5.4 used them to guide colour combinations.
Sadly, the current algorithm does not work as well as it should, and sometimes results do not match what our perception tells us. Let’s do a test: calculate the contrast ratio between #6666ff and #ffffff, and between #6666ff and #000000. Which colour pair generate enough contrast? Does this result match your perception?
Good news, for the next major version of the WCAG, 3.0, a new algorithm for contrast calculation will be introduced, the APCA (Advanced Perceptual Contrast Algorithm). APCA takes into account some of the properties of the visual system to make much more realistic estimations. Repeat the previous test with the APCA contrast calculator; what is the difference between colour pairs now? Why can we see font sizes and weights in the APCA results?
In this talk, I will explain, as an Optometry and Vision Sciences specialist, what contrast is, what is wrong with the current standard and how the next version will amend this. After this talk you’ll be ready to adapt your WordPress site into the next colour contrast standard.