WCAG 3 and APCA

•

WCAG 3 will use a new color contrast method called APCA (Advanced Perceptual Contrast Algorithm). It's a big improvement over the current system but there are a lot of changes to get your head around. 🧵

1. The most obvious change is the new scoring system. The ratios are replaced by a level out of 100(ish). The higher the number, the higher the contrast.

Here's what they mean: 15 - 🚫 Minimum for non-text elements 30 - ⚠️ Absolute min for any text 45 - ‼️ Min for large text (the old 3:1) 60 - ❗Min for body text (the old 4.5:1) 75 - ✅ Preferred level for body text

2. The new standard takes text size and weight into account. The score changes depending on the size and weight - meaning much less guess work for you. The thinner the font, the worse the score.

3. Unlike WCAG 2, swapping text and background color affects the result. This makes sense when you think about it - text has a lower visual area and thus lower contrast.

4. The APCA contrast calculation is perceptually uniform. Humans don't perceive contrast linearly across hue and lightness and APCA takes this into account. WCAG 2 modelled contrast mathematically.

This takes care of those weird issues WCAG 2 would struggle with, like orange buttons.

tl:dr WCAG 3 will make your life easier as a designer. It isn't out yet but you can (and should) use APCA now. @MyndexResearch has a great tool here: myndex.com/APCA/simple

Also their piece explaining the benefits of APCA is great reading: github.com/Myndex/SAPC-APCA/blob/master/WhyAPCA.md

Other tools are starting to use APCA, including huetone by @ardovalexey t.co/GS157Iu7aL

If you want to read a bit more about the problems with WCAG 2, I made a tweet thread about that here: twitter.com/DanHollick/status/1417895151003865090

You can read the unrolled version of this thread here: typefully.app/u/DanHollick/t/sle13GMW2Brp