Colour contrast measurement, the future of (?): Accessible Perceptual Contrast Algorithm (APCA)

[sarayourfriend]

In the GitHub discussion to test Dark Mode, I brought up an issue I saw with the contrast of some text. Francisco has done his due diligence, of course, and the combination passes WCAG 2 standards. I believe we also reviewed that fact during the Dark Mode design proposals. However, because I was seeing the issue only in certain contexts, it made me wonder about something I recalled reading a while ago: that WCAG 2 has issues with contextual contrast. I remembered in particular reading passing WCAG 2 isn't always enough to determine whether a combination works for a particular situation. There was something specifically about button padding. I wish I could find that article!

Trying to find that article led me to learn about the more recent proposal of Accessible Perceptual Contrast Algorithm (APCA). I wanted to briefly share with you all some resources I found that may be interesting for be better understanding these ideas. Even if these are not immediately applicable, they might be in the future.

Here is an “easy intro” to APCA: https://git.apcacontrast.com/documentation/APCAeasyIntro. The “TL;DR” of that page seems to be something like: “WCAG 2 was developed for CRTs, not our current displays, and is overly simplistic, ignoring aspects of human perception that don't fit easily into a simple algorithm for calculating contrast. APCA is intended to solve that by incorporating up-to-date understandings of the diversity of human perception, even beyond the context of impairment.” This was fascinating to read.

I found an interesting comparison between APCA and WCAG here: w3c/low-vision-a11y-tf#131

I decided to try checking the colours we were discussing in the Dark Mode testing. The first tool I tried was this one: https://colorcontrast.app/#fg=%5Bobject%20Object%5D&bg=%23a9a9a9&level=aa&format=rgb&algo=APCA&filter=none. It is somewhat basic, and might slightly misunderstand how APCA is meant to be interpreted. The introduction above has a section about going beyond “pass fail”. The next tool demonstrates this idea really well.

This page also lets you check two colours and has more information about how to interpret the result, and specifically shows you the scenarios in which the particular colour combination would be “acceptable” in APCA's measurement of contrast: https://www.myndex.com/APCA/?BG=0d0d0d&TXT=a9a9a9&DEV=G4g&BUF=A22

On that page, you will see that the colour combination can be used in some contexts, but, according to APCA, not in the context we're using it. All the usable examples they show are much heavier, and larger text than our usage.

That second tool is from some of the same folks who wrote the introduction, and is more closely related to and guided by the research done to develop APCA. (That's based on my basic reading of the situation, I could be missing some piece of the picture myself.)

In trying to find tools for testing combinations, I wondered if there were any browser extensions that support it. Unfortunately, there are not many, and no free ones I could find and test. That means testing for APCA on a regular basis, even manually, is harder than testing for WCAG 2. First, I tried Axe, which I have used in the past, but it doesn't look to support APCA just yet. Next, I tried an extension I had never heard of, Stark. However, it requires paying to view the list of violations, so I couldn't see if it took exception to the search box from the discussion above. It apparently found more problems than Axe does when I ran it on the homepage. Axe only shows 1 or 2 programming issues (depending on settings), and no colour issues. Beyond that, in my brief search, I didn't find any easy ways of doing a broad check of a website. I spent less than 10 minutes looking, so there might be something out there that would do the job. Someone else might be familiar with resources for this too, if we were interested to see how APCA compares to WCAG 2 on Openverse.
Chrome has apparently had the ability to check for APCA since 2021. Either I didn't understand the information for using it, or it isn't available in Chromium, because I couldn't find it in the dev tools.

Anyway, it's super interesting! I've enjoyed learning about it. The W3 proposal for APCA is still in open beta, so it isn't necessarily ready for full adoption yet, regardless. Perhaps for now it's best seen as an interesting thing to be aware of, which may give new and significant information to us when evaluating our applications for accessibility.

[sarayourfriend]

Here is some interesting information on the context of APCA more recently, which I just found: https://techhub.social/@Myndex/112455539800205336

It looks like WCAG 3 also looks to address issues in WCAG 2 with colour contrast. This was something I wondered about APCA, whether it was trending towards wider adoption and recognition. I still haven't quite sorted it out, it looks like there are maybe some conflicts in trying to sort out the what and where of implementing up-to-date research and understanding about human perception. My read that APCA might be the future could be totally off base. Maybe WCAG 3 will fix the problems in WCAG 2 contrast and WCAG will remain as the main widely referenced standard for contrast measurement.

There is also a lot of discussion about APCA and WCAG 3 in https://github.com/w3c/silver. I don't necessarily want to link the issues specifically because of GitHub automatically cross-posting discussions, but they are easy to find by searching "contrast" in that repository's issues.