<![CDATA[CSS contrast-color is newly baseline, but it falls short in some areas.]]>CSS contrast-color is newly baseline, but it falls short in some areas. Here's how it works, and what to look out for:

]]>https://board.circlewithadot.net/topic/74359cb7-e7e9-407f-a5ec-e905320232ef/css-contrast-color-is-newly-baseline-but-it-falls-short-in-some-areas.RSS for NodeFri, 15 May 2026 04:51:42 GMTTue, 14 Apr 2026 15:05:12 GMT60<![CDATA[Reply to CSS contrast-color is newly baseline, but it falls short in some areas. on Wed, 15 Apr 2026 07:58:55 GMT]]>@simevidas I was actually shocked whisperx picked it up correctly.

]]>https://board.circlewithadot.net/post/https://mastodon.social/ap/users/115667120638353806/statuses/116407660410048104https://board.circlewithadot.net/post/https://mastodon.social/ap/users/115667120638353806/statuses/116407660410048104Wed, 15 Apr 2026 07:58:55 GMT<![CDATA[Reply to CSS contrast-color is newly baseline, but it falls short in some areas. on Tue, 14 Apr 2026 23:12:21 GMT]]>@firefoxwebdevs Thanks for reminding me how to pronounce WCAG

]]>https://board.circlewithadot.net/post/https://mastodon.social/users/simevidas/statuses/116405589854586443https://board.circlewithadot.net/post/https://mastodon.social/users/simevidas/statuses/116405589854586443Tue, 14 Apr 2026 23:12:21 GMT<![CDATA[Reply to CSS contrast-color is newly baseline, but it falls short in some areas. on Tue, 14 Apr 2026 16:52:34 GMT]]>@firefoxwebdevs @khamer yeah, iirc I tweaked the formula a bit, but I also did some unit conversion, so it's harder to see that.

]]>https://board.circlewithadot.net/post/https://infosec.exchange/users/adamhotep/statuses/116404096525867340https://board.circlewithadot.net/post/https://infosec.exchange/users/adamhotep/statuses/116404096525867340Tue, 14 Apr 2026 16:52:34 GMT<![CDATA[Reply to CSS contrast-color is newly baseline, but it falls short in some areas. on Tue, 14 Apr 2026 16:51:03 GMT]]>@adamhotep @khamer that's cool, but just be aware of the cases where WCAG gets it wrong (that page uses WCAG)

]]>https://board.circlewithadot.net/post/https://mastodon.social/ap/users/115667120638353806/statuses/116404090553109783https://board.circlewithadot.net/post/https://mastodon.social/ap/users/115667120638353806/statuses/116404090553109783Tue, 14 Apr 2026 16:51:03 GMT<![CDATA[Reply to CSS contrast-color is newly baseline, but it falls short in some areas. on Tue, 14 Apr 2026 16:35:46 GMT]]>@firefoxwebdevs @khamer 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");
]]>https://board.circlewithadot.net/post/https://infosec.exchange/users/adamhotep/statuses/116404030411241769https://board.circlewithadot.net/post/https://infosec.exchange/users/adamhotep/statuses/116404030411241769Tue, 14 Apr 2026 16:35:46 GMT<![CDATA[Reply to CSS contrast-color is newly baseline, but it falls short in some areas. on Tue, 14 Apr 2026 16:09:42 GMT]]>@firefoxwebdevs
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

]]>https://board.circlewithadot.net/post/https://toot.cafe/users/aardrian/statuses/116403927925833235https://board.circlewithadot.net/post/https://toot.cafe/users/aardrian/statuses/116403927925833235Tue, 14 Apr 2026 16:09:42 GMT<![CDATA[Reply to CSS contrast-color is newly baseline, but it falls short in some areas. on Tue, 14 Apr 2026 16:06:45 GMT]]>@vrugtehagel yesss, you can also use similar tricks to approximate APCA https://random-stuff.jakearchibald.com/color-contrast/#2277d3

]]>https://board.circlewithadot.net/post/https://mastodon.social/ap/users/115667120638353806/statuses/116403916354996665https://board.circlewithadot.net/post/https://mastodon.social/ap/users/115667120638353806/statuses/116403916354996665Tue, 14 Apr 2026 16:06:45 GMT<![CDATA[Reply to CSS contrast-color is newly baseline, but it falls short in some areas. on Tue, 14 Apr 2026 16:02:05 GMT]]>You can often get a better result using this trick with oklch() by @khamer which approximates APCA https://random-stuff.jakearchibald.com/color-contrast/#2277d3

]]>https://board.circlewithadot.net/post/https://mastodon.social/ap/users/115667120638353806/statuses/116403898019901689https://board.circlewithadot.net/post/https://mastodon.social/ap/users/115667120638353806/statuses/116403898019901689Tue, 14 Apr 2026 16:02:05 GMT<![CDATA[Reply to CSS contrast-color is newly baseline, but it falls short in some areas. on Tue, 14 Apr 2026 15:46:13 GMT]]>@firefoxwebdevs fun fact, you can (kind of) make it output colors other than white or black, using relative color syntax! For example, if you wanted yellow instead of white (for whatever reason), you could do `rgb(from contrast-color(var(--my-color)) r g 0)`. This doesn't account for the changed color when deciding the most contrasty color, though, so I reckon this is only useful for very minor color changes (like a slightly off-white or nearly-black).

]]>https://board.circlewithadot.net/post/https://mastodon.social/users/vrugtehagel/statuses/116403835617643425https://board.circlewithadot.net/post/https://mastodon.social/users/vrugtehagel/statuses/116403835617643425Tue, 14 Apr 2026 15:46:13 GMT