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

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

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

例如：用户输入“黑色”作为输入背景色；那么输入的文本颜色将为白色。但是，如果用户输入“白色”作为输入颜色，则文本颜色将为黑色。（有更多的案例不仅仅是黑色或白色。）

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

谢谢！

标签： javascripthtmlcss

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

此链接详细介绍了进行此计算的两种方法。 https://24ways.org/2010/calculating-color-contrast/