Post

Haz
@haz.dev

Here's the math needed to adjust a color's lightness and eliminate the gray area where WCAG2 and APCA conflict on black/white foregrounds. Yes, it's CSS. And yes, it's blazingly fast. Usage: background: oklch⁠(⁠from⁠ ⁠<⁠color⁠>⁠ ⁠var⁠(⁠-⁠-⁠_⁠ak⁠-⁠safe⁠-⁠l⁠)⁠ ⁠c⁠ ⁠h⁠)⁠;

Haz@haz.dev

I spent hours exploring the color ranges where APCA and WCAG2 contrast algorithms differ. Then I found a site that shows these discrepancies, with the gray area of the chart marking the disagreement range. That's the zone Ariakit Styles will avoid. Thank you so much, Lloyd Kupchanko!

blackorwhite.lloydk.caBlack or WhiteTest various contrast methods to see whether a black or white foreground color provides the best contrast against a given background color.

4 reposts35 likes

Szymon Pajka
@szympajka.com

This is phenomenal! I love CSS became so powerful, and oklch makes is almost like a cheating! I built a project lately where I used CSS variables to change its values for hover/active states!