CSS-背景前景对比度文本颜色

我有一个按百分比值着色的条形列

部分文本对用户不可见，因为它是白色的，位于白色部分。如果我选择它，我可以看到它，但不是其他-

---

css中是否有方法显示与背景颜色相反的文本？可能一半的文本是白色的，一半的文本是黑色的，因此用户可以看到它。

我会这样做：

.progressbarContainer
{
位置：相对位置；
宽度：100px；
高度：15px；
背景：#ff00ff；
}
.背景
{
位置：绝对位置；
左：0；
颜色：黑色；
}
.frontText
{
位置：绝对位置；
左：0；
颜色：红色；
}
.progressbar
{
位置：绝对位置；
宽度：14.34%；
身高：100%；
背景：蓝色；
溢出：隐藏；
}

14.34%
14.34%

为什么不能手动设置要使用的颜色？您可以定义“黑色”和“浅色文本”这样的样式对，它们可以很好地协同工作。为什么不将整个文本变成黑色呢？它在两种颜色上都是合理可见的——青绿色和红色。