The new contrast-color() function is not fully supported yet. But can we still implement it in a cross-browser friendly way using other new CSS features?

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

The CSS contrast-color() function isn't widely supported yet, but you can approximate it today using OKLCH color space and relative color syntax. By checking if a color's lightness is above or below 0.72, you can determine whether black or white text will contrast better: `color: oklch(from <your color> round(1.21 - L) 0 0);`. This approach aligns more closely with APCA than WCAG 2.0 and can be extended to switch between white and a base text color using color-mix().

Approximating contrast-color() With Other CSS Features

<p>You can use a custom native CSS function from this repo:</p>
<p><a href="https://yaireo.github.io/css-utility-functions/#contrast-text" target="_blank" rel="noopener nofollow">https://yaireo.github.io/css-utility-functions/#contrast-text</a></p>
