Serge Ø
LightNews LightNews
insilico.bsky.social
Serge Ø
@insilico.bsky.social
32 followers 270 following 0 posts
Pu-erh driven software engineer https://github.com/hcz
Posts Replies Media Videos
Reposted by Serge Ø
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⁠)⁠;
Screenshot of a CSS registered property with an initial value that consists of 12 lines of functions: calc(), clamp(), cos(), and several other mathematical operations. The initial value: calc(l * (1 - clamp(0, (l - (0.56 + (c / 0.4) * (-0.005 + (0.055 * cos(((h + 45) * pi / 180)))))) * ((0.72 + (c / 0.4) * (0.015 + (0.035 * cos((h * pi / 180))))) - l) * 1000, 1)) + ((0.56 + (c / 0.4) * (-0.005 + (0.055 * cos(((h + 45) * pi / 180))))) * (1 - clamp(0, (l - ((0.56 + (c / 0.4) * (-0.005 + (0.055 * cos(((h + 45) * pi / 180))))) + (0.72 + (c / 0.4) * (0.015 + (0.035 * cos((h * pi / 180)))))) / 2) * 1000, 1)) + (0.72 + (c / 0.4) * (0.015 + (0.035 * cos((h * pi / 180))))) * clamp(0, (l - ((0.56 + (c / 0.4) * (-0.005 + (0.055 * cos(((h + 45) * pi / 180))))) + (0.72 + (c / 0.4) * (0.015 + (0.035 * cos((h * pi / 180)))))) / 2) * 1000, 1)) * clamp(0, (l - (0.56 + (c / 0.4) * (-0.005 + (0.055 * cos(((h + 45) * pi / 180)))))) * ((0.72 + (c / 0.4) * (0.015 + (0.035 * cos((h * pi / 180))))) - l) * 1000, 1))
February 15, 2025 at 7:46 PM