How to have the browser pick a contrasting color in CSS
29 comments
·May 17, 2025qfr
natemwilson
I’ve never seen any CSS function that has this call back style where you get parameters that you can modify. So interesting! Are there any other examples of this or is this unique to lch?
fireflies_
This is "relative color" syntax, it works with a range of color spaces/color functions. The key is the "from" at the front. Here's the MDN documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/...
halflife
It may be confusing, but everything here is static param. The —- prefix is css variables, where inside a css declaration block you write: —bg: blue
mediumsmart
>But, on a large project, with a large team, carefully managing such details can become a really hard task to get right. Suddenly a dark button has unreadable black text, and users can’t figure out what to do.
Cant someone take a look at the buttons before the large project ships? Alternatively make it mandatory to never have black text on a dark button and tell every team member including the large ones.
Interesting to read about the perceptual contrast vs mathematical - I did not know that. Going to integrate that into my workflow.
johnisgood
You may want to read about APCA, as you can have perceptual contrast calculations using the APCA algorithm.
refulgentis
You can have them with WCAG2, the stock APCA example hides the ball significantly and leads to a lot of incorrect conclusions in the article (tl;dr: black has more contrast by either measure, its just that APCA says you don't need as much contrast, so you can use white and have sufficient contrast)
johnisgood
I know about WCAG, too. You can also just implement a function that detects whether or not a color is dark or not. It is a general purpose function, e.g. my "isDark" function is: "func() < 0.5" (func() is omitted, but it is an algorithm). You can have "isLight", too, by doing "> 0.5". There are many ways to do this. You can just simply convert a hex color to RGB, then compute the luminance of the color, and then compare the luminance to a threshold (e.g. 0.5) to classify it as dark or light. The luminance function (WCAG luminance formula) converts RGB values to the range 0-1, applies gamma correction, and calculates luminance using the weighted sum of the gamma-corrected RGB values.
> APCA says you don't need as much contrast
You can always specify the threshold if you want, e.g. "apcaContrast(color)) >= $targetContrast" after adjusting, depending on what you want to do.
It really is easy, just make sure you have enough color space.
mediumsmart
I thought the white looks sharper but is not really. I would darken the blue a bit to be happy about it.
atum47
I made a video tutorial about a similar thing long time ago - choosing black or white for text color given a color background. My solution was very simplistic. I just transformed the color to gray scale and compared it between black and white. It was a fun project. I'm not good making videos though.
https://youtu.be/tUJvE4xfTgo?si=vFlegFA_7lzijfSR (warning: video is in Portuguese)
coolcase
Funny a sister comment gave a color space formula to do just that
https://news.ycombinator.com/item?id=44015990
Video seems fine. I don't speak Portuguese though so can't judge what you said but code looks good!
jbritton
At a minimum it would be nice to know good colors for the pseudo classes active, focus, hover, link, visited and their various combinations for a light and dark theme. Additionally material UI adds disabled, before, after.
politelemon
I'm still not convinced that the contrasting colour should be the browser vendor's decision, it won't always be right or predictable. Will this be a definitive deterministic standard across all browsers? Instead this function feels like a tool to help UX teams during design phase.
mcfedr
Choose is a strange word here. There is an algorithm that calculates the color.
MBCook
> Will this be a definitive deterministic standard across all browsers?
The article says the standard specifies the calculation to use.
refulgentis
c.f. https://news.ycombinator.com/item?id=44015980, when you cut out the incorrect stuff due to confusion re: APCA's button example, it's a bit clearer that it's 100% right.
Consistent, it is not. Ex. we can imagine a background at L* 50 that is ~equally served with a white or black foreground - in that case, the aesthetic principles come into play.
To also disambiguate that, and get to 100% reliable, if both a darker and lighter color are available given contrast K and background color C, look at C, if it's L* is >= 60, choose lighter.
Then, it is 100% correct and consistent.
crtasm
>This browser does not support contrast-color(). Try this demo in a browser that does, like Safari Technology Preview
ctippett
You don't need the Technology Preview, it's available as a WebKit Feature Flag under the advanced settings of normal Safari. I just enabled it on my phone and was able to view the demos.
mgkimsal
not available on desktop safari (version 18.2 (20620.1.16.11.8)) under feature flags.
judah
And I don't yet see an entry for this on caniuse.com. I'm guessing this is super new.
miiiiiike
Very new. I think Safari is the only one that ships it and even then it’s still in preview
homebrewer
It works in "Gnome Web", which is mostly a wrapper around WebKit.
> Support for this feature first shipped in March 2021, in Safari Technology Preview 122.
https://webkit.org/blog/11577/release-notes-for-safari-techn...
> Added experimental support for CSS Color 5 color-contrast()
dp-hackernews
Surely the relative colour theory colour wheel is the answer to this problem.
"Color Wheel: The Basic Color Theory for Artists and Designers" https://dessign.net/color-wheel-theory/
gitroom
[dead]
refulgentis
The article is wrong:
- Their work does ensure contrast.
- The white on blue clearly has less contrast, not more. (squinting is a cheap way to test, or, walking backwards from your monitor)
With APCA, backgrounds around L* 60 tend to still allow white foregrounds, which is aesthetically closer to what the eye wants.
A black foreground would have more contrast regardless, even by APCA.
To be fair, this is how APCA is almost always demonstrated as a win over the long-running standard, so people run with the premise that the demo image of APCA is more contrast, rather than "ours say you'll have enough contrast to be accessible with a white foreground, even if it also says the contrast would be higher with a black foreground".
(source: in 2020 built color system around the same science, enabling latest iterations of Material theming)
refulgentis
Voters, I'd be very happy for feedback, I'm quite surprised it is -3.
EDIT:
I get it, it is easily read as "the entire article is wrong" instead of "the article is wrong on these points"
You're free to elaborate on your concerns. We could raise this to a conversation, I think that'll feel better for both of us than me taking that remark about me personally.
For example, I agree that the primary container color shouldn't have been L* 90 and used for buttons, and they shouldnt have severely limited chroma. In fact, I left over it and the dysfunction between VPs wondering why we didn't have it day 1, approving fixes repeatedly, and Android dysfunction that kept the conversation at "What? Didn't hear nothing from nobody in engineering! Anyways, lock screen clocks!"
troupo
I didn't vote, but "your article is wrong" take ignores literally the entire article, and the rather detailed explanation on why "bigger contrast by pure numbers is more contrast" does not work.
> in 2020 built color system around the same science, enabling latest iterations of Material theming
No wonder everything Google builds, including Material, always has issues with contrast.
there is a way to do something close to this using lch:
source: https://til.jakelazaroff.com/css/swap-between-black-and-whit...