Javascript 根据背景颜色输入更改文本前景的颜色

我有一个输入元素，允许用户设置输入元素的背景颜色

当用户设置输入元素的背景色时，我希望输入元素中的文本与原始颜色形成对比色

例如：用户输入“黑色”作为输入背景色；然后输入的文本颜色将为白色。但是，如果用户输入“白色”作为输入颜色，则文本颜色将为黑色。（除了黑色或白色外，还有更多的箱子。）

我将如何实现这一点？我知道可以在背景上使用另一个元素并设置混合模式，但我不想这样做，因为那样会删除输入点

---

谢谢

您可以根据颜色的十六进制值计算黑色或白色与用户给定的颜色是否具有更高的对比度

此链接详细介绍了进行此计算的两种方法。

---

您是否考虑过使用简单的文本阴影来勾勒文本轮廓，使其在任何颜色上都能显示？这没关系，但并不理想：3谢谢您的建议Thoya，这绝对是一种丑陋的方式：）对于将来阅读这篇文章的人来说，可能会想知道我在这里的意思，因为我在拖延一个基本的透明容器（虽然看起来并不总是那么容易）+1个提琴：）如果它只是文本，那就好了，但这是一个特定于元素的v，它的内部背景，这是一个不同的鱼壶，我会给它一个镜头。。。尽管我想要尽可能少的SLOC。（此外，颜色可能并不总是十六进制，也可以用css命名。