a11y-color-tokens VS SAPC-APCA

I've also created a package to help me with developing accessible color palettes called a11y-color-tokens which I use for more complex projects.

Eleventy let me boilerplate certain aspects, and I created additional tools to help me create color palettes and social share images. Those freed me to focus on architecting my idea and preparing content and design and ensuring accessibility. Then - out the door it went!

For a more future oriented version (as setting a font to black wont work with dark pages), check out the CSS Color Module Level 5 spec for color-contrast(), which will automatically choose a color that has a proper contrast ratio: https://www.w3.org/TR/css-color-5/#funcdef-color-contrast

One caveat is it's currently only supported in Safari technical preview.

Another thing worth mentioning is the relative brightness algo used in the repo for the linked plugin is using the WCAG 2 formula for relative luminance. This works pretty well in light mode for non-colored backgrounds, but doesn't incorporate perceived luminosity differences of different hues very well. A better algorithm to use here is the Advanced Perceptual Contrast Algorithm (APCA), which is the one used in the WCAG 3 working spec. It more accurately accounts for hue: https://github.com/Myndex/SAPC-APCA

Note the licensing note in the repository[1] of the APCA™ index the author’s company[2] promotes:

> The files currently in this repository are presently considered pre-release, and as such do not have a permanent license attached. In this repositiory, all files present are under a time-barred beta license, and intended for use with web-based content only, and not for any other use without written permission.

The non-pre-release stuff[3] offered to W3C is better but still seems to be intended to end up non-FOSS:

> Files in this repository are licensed to the W3/AGWG under their cooperative agreement for use with WCAG accessibility guidelines for web-based content only, and not for any other use.

(The question being, of course, how much of this is copyrightable at all.)

[1] https://github.com/Myndex/SAPC-APCA/

[2] https://www.myndex.com/CVD/

[3] https://github.com/Myndex/apca-w3/

Fifth: If you want to use APCA or BPCA, then welcome to the open beta test, and feel free to say hi in the beta thread at the GitHub repo: https://github.com/Myndex/SAPC-APCA/discussions/43

On an additional note, apart from the WCAG 3.0 Working Draft, this piece from Andrew Somers, who is working on APCA for WCAG 3, and this twitter thread might be of use.

Second: There are a number of contrast checkers that use APCA technology. The canonical "official" one is https://www.myndex.com/APCA/ but I want to mention it is an open public beta, and is not backwards compatible with WCAG_2 (this is in part because WCAG_2 is not perceptually accurate and thus the areas where WCAG_2 incorrectly fails pairs that APCA will pass is at issue).

Andrew Somers W3 AGWG Invited Expert Color Science Researcher Myndex Perception Research Inventor APCA/co-author WCAG3

Thank you! I'm not sure this would make sense as an npm package — it's just a web page. The source code is on github in case it inspires anybody, and the contrast calculation is based on the algorithm that Myndex has also shared: https://github.com/Myndex/SAPC-APCA