使用CSS动态改变颜色，这样背景和文本颜色就不会冲突

Question

我面临的问题是，用户可以更改 HTML 组件的背景颜色，这有时与他们无法更改的文本颜色发生冲突（或者更一般地说，背景和文本颜色在视觉上太相似）。因此，如果这些颜色在视觉上足够接近，文本可能会变得不可见（或难以看到）。

看下面哪里有一个三角形（=文本）...

...只有在悬停时才会变得更加明显。

（用户也可以选择灰色背景，这会让情况变得更糟）

我尝试修改过滤器（例如

filter: brightness(50%) contrast(150%);

或

filter: saturate(0) grayscale(1) brightness(.7) contrast(1000%) invert(1)

，如建议的这里），但这对所选颜色敏感（即可能不适用于背景和文本颜色组合的所有情况）。有没有一种方法（在CSS中，没有JS，如here所示）可以稍微改变文本颜色（理想情况下，“颜色类型”本身在某种程度上得到维护），以便文本在冲突（太接近）的背景和文本上颜色变得可见？

我意识到这个问题要求两件事（1.检测冲突和2.通过应用某种过滤器（或其他）解决冲突）。如果对如何解决冲突的颜色提出一些建议（2.），我会很高兴。

尝试

mix-blend-mode: difference

没有

mix-blend-mode: difference;

与

mix-blend-mode: difference;

Answer 1

本文演示了一种 CSS 方法，用于根据背景颜色（感知的）亮度在黑色和白色之间切换（文本）颜色。所以这并不完全是你所要求的，但也很接近了。

您可以考虑的另一种选择是在文本和背景颜色相似时使用对比文本阴影来提高可读性。

body {
  background: lightsalmon;
  font-size: 3em;
}

p {
  color: peru;
  margin: 0;
}

.p2 {
  text-shadow: 0 0 5px white;
}

.p3 {
  text-shadow: 0 0 20px white;
}

<p class="p1">Is this readable?</p>
<p class="p2">What about now?</p>
<p class="p3">Or with a larger spread</p>