@firefoxwebdevs@mastodon.social
2026-04-14 16:02 UTC
Replies (3)
-
@aardrian@toot.cafe 2026-04-14 16:09
@firefoxwebdevs@mastodon.social For folks reading into this thread, understand that APCA is not part of any W3C spec, draft or otherwise: https://adrianroselli.com/2026/04/wcag3-contrast-as-of-april-2026.html You can still use APCA (whichever APCA version), but the colors you choose may not satisfy WCAG. Be sure to also check them against WCAG. @khamer@me.dm
-
@adamhotep@infosec.exchange 2026-04-14 16:35
@firefoxwebdevs@mastodon.social @khamer@me.dm Here's a useful resource for checking color contrast: https://webaim.org/resources/linkcontrastchecker/ In my own code, and I'm ashamed I didn't save links to how I found these values, I calculate contrast-color manually in JS like this (assuming values for the background's r, b, and g of 0-255): let luminance = r / 1199 + g / 357 + b / 3532; // 0-1 let foreground = luminance > .63 ? "#000" : "#fff"; I also emphasize it more with text shadow, giving a subtly glowing outline around the text: elem.style.textShadow = "0 0 .3ex " + (luminance > .63 ? "#fff" : "#000");
-
@Myndex@techhub.social 2026-05-03 21:44
@firefoxwebdevs@mastodon.social @khamer@me.dm OKlch does not approximate APCA — the lightness correlate in the plain OKlch is not perceptually uniform. Evil Martians did create harmonizer, where they spliced in APCA for lightness along with OKLch for hue and chroma.. https://evilmartians.com/opensource/harmonizer