Support APCA/WCAG 3

[darekkay]

WCAG 3 will change how contrast ratios are calculated. The specs are still under development, but a11y-contrast could already implement the current status.

• https://cliambrown.com/contrast/
• https://www.myndex.com/APCA/
• https://yatil.net/blog/wcag-3-is-not-ready-yet

Note that the spec is not stable yet, which is reflected in the license.

[Myndex]

WCAG 3 will change how contrast ratios are calculated. The specs are still under development, but a11y-contrast could already implement the current status.

Hi @darekkay

Indeed, APCA is in public beta and being adopted and integrated in more tools. Most tools have both APCA (the candidate for WCAG 3) and the existing WCAG 2, so comparisons can be made. It's important to note that APCA is not backwards compatible to WCAG 2, which i will explain in a moment.

Because of concerns regarding backwards compatibility, we've also released Bridge-PCA, which is completely backwards compatible with WCAG 2, but provides substantially improved readability. There's a simple demo tool with further information at https://www.myndex.com.BPCA/

Both are available as NPM packages:

npm i apca-w3

npm i bridge-pca

Regarding backwards compatibility

This recent article demonstrates how WCAG 2 contrast in incorrect and detrimental to color vision deficiency. I have a list of other articles and resources on my profile page here: http://git.myndex.com

APCA corrects this by using modern perceptually uniform techniques, based on actual human perception. You can see this per these charts and comparison table. In the following table (click it to see it at 100%) as color get darker, the WCAG 2 contrast levels get harder and harder to read, but APCA maintains constant contrast across the visible range.

Click To Enlarge

These charts below were created from the data in the above examples. In the charts below:

• The White area is where both WCAG 2 and APCA reject the same colors.
• The Purple area is where they both PASS the sam colors
• The Cyan blue area is where WCAG 2 passes but APCA rejects the colors
• The Magenta area is where APCA passes colors that WCAG 2 (incorrectly) rejects.

Legend

It's because of the WCAG 2 incorrect rejections of light colors that APCA is not backwards compatible, But as this comparison shows, APCA is significantly better at preserving readability than WCAG 2.

But Bridge-PCA is backwards compatible — and to get that, what is lost is some design flexibility. But APCA and Bridge-PCA both fix the notorious "dark color problem" of WCAG 2.

Please feel free to ask questions or comment. The discussions tab is open at the repo.

Thank you

Andy