Exploring the CSS contrast-color() Function… a Second Time | CSS-Tricks
June 18, 2025
In many countries, web accessibility is a human right and the law, and there can be heavy fines for non-compliance. Naturally, this means that text and icons and such must have optimal color contrast in accordance with the benchmarks set by the Web Content Accessibility Guidelines (WCAG). Now, there are quite a few color contrast checkers out there (Figma even has one built-in now), but the upcoming contrast-color() function doesn’t check color contrast, it outright resolves to either black or white (whichever one contrasts the most with your chosen color).
Source: Exploring the CSS contrast-color() Function… a Second Time | CSS-Tricks
Speaking of color contrast, the new contrast-color function of CSS will return either black or white, depending on which best contrasts with an input color (though it is not guaranteed to meet WCAG color contrast requirements).
