如何找到最佳的文本颜色叠加在背景颜色上？

Question

我尝试了CSS的

mix-blend-mode: difference

，它在某些情况下很接近，但在很多情况下不是。然后我尝试了

invert-color

库，它给出了这个：

基本上，这两种方法在中性色上都失败了，其中“差异”非常微小，并且反转几乎不明显。相反，我可能会根据背景的黑暗程度选择白色，否则选择黑色。或者，如果它是红色，我可能会选择与其最明显相反的绿色或黄色。

有这方面的算法吗？可以用纯 CSS 或一些基本的 JS 来完成吗？

我不一定在寻找完美的解决方案，因为它可能也取决于你的眼睛/人，但比我迄今为止所拥有的更好。

Answer 1

假设您知道背景的值并且可以将其作为变量，您可以使用

color-contrast()

您的代码将如下所示

 color: color-contrast(var(--background) vs white, black)

浏览器将根据背景颜色选择白色或黑色。

当然，这是未来的功能，因为目前没有浏览器支持它：https://caniuse.com/?search=color-contrast()