是否可以制作一个 Javascript 程序，自动将文本的颜色更改为背景的对比度？

Question

我有这个 Javascript 和 HTML 代码，它们使用颜色类型的输入更改背景颜色。

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input {
      outline: none;
      border: none;
      background: none;
    }
  </style>
</head>

<body>

  Change the color of the background:
  <input type="color" value="#000000" name="bgcolor" id="bgcolor" />

  <script>
    const color = document.getElementById("bgcolor");

    color.addEventListener("change", () => {    
      document.body.style.background = color.value;
    });
  </script>
</body>

</html>

因此，当用户更改由 <input type="color" value="#000000" name="bgcolor" id="bgcolor" /> 创建的调色板中的颜色时，这会更改页面背景的颜色。

现在想象一下用户选择黑色作为背景并且文本的颜色默认也是黑色的情况现在我们可以做两件事，

提供更改文本颜色的选项him/herself或自动将文本颜色更改为其背景对比度。

我想选择第二个选项，因为它有点漂亮，而且对用户来说看起来更高级一些，就像一个额外高级的东西来打动用户。

那么我该如何实现第二个选项，有人可以向我解释一下如何在用户设置背景时自动将文本颜色更改为背景的完整对比度。

Answer 1

对此感兴趣的资源：

这是 W3C 算法（JSFiddle demo too）：

const rgb = [255, 0, 0];

// Randomly change to showcase updates
setInterval(setContrast, 1000);

function setContrast() {
  // Randomly update colours
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // http://www.w3.org/TR/AERT#color-contrast
  const brightness = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}

#bg {
  width: 200px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="bg">Text Example</div>

是否可以制作一个 Javascript 程序，自动将文本的颜色更改为背景的对比度？

Is it possible to make a Javascript program that changes the color of the text to the contrast of the background automatically?

html

javascript

colors

dom-events