Approximating contrast-color() With Other CSS Features

accessibility color color-contrast() relative color Approximating contrast-color() With Other CSS Features Kevin Hamer on Feb 11, 2026 You have an element with a configurable background color, and you’d like to calculate whether the foreground text should be light or dark.

Qué encontrarás en la fuente

• Seems easy enough, especially knowing how mindful we ought to be with accessibility.
• There have been a few drafts of a specification function for this functionality, most recently, contrast-color() (formerly color-contrast() ) in the CSS Color Module Level 5 draft …
• But with Safari and Firefox being the only browsers that have implemented it so far, the final version of this functionality is likely still a ways off.
• There has been a lot of functionality added to CSS in the meantime; enough that I wanted to see whether we could implement it in a cross-browser friendly way today.
• Here’s what I have: color: oklch(from <your color> round(1.21 – L) 0 0); Let me explain how I got here.

Resumen

WCAG 2.2 WCAG provides the formulas it uses for calculating the contrast between two RGB colors and Stacie Arellano has described in great detail .

Fuente: CSS-Tricks