自动对比度字体颜色与背景

Question

我有一个领域的背景。底部是绿色，顶部是灰色。上面有文本。是否有一种方法让文本“感知”背景的颜色并使字体变色，以增强对比度？

例如，灰色天空上的文本会变得更亮，而绿色田野上的文本会变得更暗，以使其更加可见。

我可能在这个问题上追求得有点远，但我很感谢任何建议。（请注意，我不是寻找手动更改字体颜色的答案。）

- Evorlor

---

文本与背景对比的方法，Ana Tudor，2017年。 - vsync

2023 状态：color-contrast() 看起来最终将提供一种强大的方法来实现这一点：规范 | 更多示例。 - Tim M.

Answer 1

更多是一次实验，而非其他：

将文本的背景设置为inherit，以获取基础背景；然后将其剪裁到文本，并应用一些过滤器：

.test {
    width: 800x;
    height:220px;
    font-size: 200px;
    background-image: url(bosque.jpg); 
    color: white;
    position: relative;
}

.inner {
    position: relative;
    background-image: inherit;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-filter: invert() sepia();
}

fiddle

（仅适用于webkit）

也可以查看这些：

动画疯狂

对比度动画

更新：我们有新的方法来处理这个。 查看使用 mix-blend-mode: difference 的演示。

div {
  font-size: 300px;
  color: gray;
  mix-blend-mode: difference;
}
body {
  background-image: url(http://placekitten.com/900/600);
}

<div>TEST</div>

- vals

---

小心！[mix-blend-mode]在目前还没有得到很好的支持。（http://caniuse.com/#feat=css-mixblendmode） - Nathan Arthur

2020年4月，除了IE和Opera Mini之外，一切都支持该功能（尽管Safari和Safari Mini有部分支持；但不支持“色相”、“饱和度”、“颜色”和“亮度”）。 - Bing

但是如果 <div> 本身同时承载随机的 background-color 和文本 color ... mix-blend-mode 不起作用（我原以为它会起作用）。 - vsync

以上在Firefox 88中无法工作。但在Chrome 89中可以。 - mmm111mmm