#contrast-color

[ follow ]
#css
fromCSS-Tricks
1 week ago
Web development

contrast-color() | CSS-Tricks

The CSS contrast-color() function returns either black or white based on the highest contrast with a given color.
fromWebKit
11 months ago
UX design

How to have the browser pick a contrasting color in CSS

The contrast-color() function in CSS automatically selects the best text color (black or white) based on background color contrast.
fromdaverupert.com
3 months ago

Using your design system colors with contrast-color()

One predictable pain point with contrast-color() is that it only returns black and white named colors. From a design systems perspective, that's not ideal because you want your colors. You want your harmonious brand and the colors you and your team spent thousands of man hours in meetings deciding on. Those colors. In fact, an earlier version of Safari had color-contrast() (confusing I know, naming is hard) which allowed you to pass in a list of best candidates to choose from. I beleive that proposal got mired in standards discussions, color contrast algorithms, and competing proposals; and contrast-color() is what survived which got simplified down to a binary result.
[ Load more ]