以编程方式避免色盲惩罚

Question

作为一名网络开发人员，我了解到，如果网站上的颜色对比很糟糕，那么我赚的钱就很少，但我想改变它，但是我遇到了问题。我的网站上有一个部分，用户可以在其中选择一种颜色，并且该框会填充该颜色。假设已经选择了颜色。然后这个盒子在黑盒子的代码中会是这样的：

<div ID="box" style="background:#000000;width:16px;height:16px">Text?</div>

问题是#000000 将根据用户在运行 javascript 中的选择更改为另一个值。我觉得要让包括谷歌在内的所有 CSS 处理器都满意，我需要指定一个前景色，以便它在任何背景色上都可读，但我不知道这背后的数学原理。

<script>
var x=(insert chosen color value);
var y=(some calculated value);
document.getElementById('box').style.background='#'+v;
document.getElementById('box').style.color='#'+y;
</script>

无论我选择使用何种背景颜色，我如何确定前景色的公式，以使文本始终可读？

或

我应该使用不同的 HTML4 元素来表示我的颜色框吗？

我可以不用只制作彩色框的图像就可以解决这个问题吗？

更多添加代码

运行此代码以获取我用于颜色框的颜色条示例。

<div ID="BOX" style="width:100%"></div>
<script>
var body=document.getElementById('BOX');
for (n=0;n<15;n++){
  var box=document.createElement('DIV');
  box.style.width='20px';
  box.style.height='20px';
  v=n.toString(16);
  box.style.background='#'+v+v+v+v+v+v;
  body.appendChild(box);
}
</script>

Answer 1

这是我用于检查和创建颜色对比的旧功能（我在颜色选择器中使用它）。

这是您可以更改以测试功能的行：

var hexcolor = '#333333'; // <--- change this for test

Fiddle

HTML：

<div id="bckgrd" >
  <div id="txt">
    TEST CODE
  </div>
</div>

CSS：

html, body {
  background-color:#ff0000;
}
#bckgrd {
  display:inline-block;
  width:100%;
  font-size:18px;
}

JAVASCRIPT：

function colorContrast(color) {
    var r = hexToRgb(color).r;
  var g = hexToRgb(color).g;
  var b = hexToRgb(color).b;
  var rB = 255, gB = 255, bB = 255;
  var rN = 0, gN = 0, bN = 0;

  var cB = Math.abs(r - rB) + Math.abs(g - gB) + Math.abs(b - bB);
  var br1 = (299*r + 587*g + 114*b);
  var br2 = (299*rB + 587*gB + 114*bB);
  var dB = Math.abs(br1 - br2);

  var cN = Math.abs(r - rN) + Math.abs(g - gN) + Math.abs(b - bN);
  br2 = (299*rN + 587*gN + 114*bN);
  var dN = Math.abs(br1 - br2);

  if ((cB>500) && (dB>125)){
    return '#ffffff';
  } else if ((cN>500) && (dN>125)){
    return '#000000';
  } else {
    if ( ((0.2*cB) + (0.8*dB)) > ((0.2*cN) + (0.8*dN)) ) {
      return '#FFFFFF';
    } else {
      return '#000000';
    }
  }


}

function hexToRgb(hex) {

    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
var hexcolor = '#333333'; // <--- change this for test
$('#txt').css('color', hexcolor);
$('#bckgrd').css('background-color', colorContrast(hexcolor));