Question

我作为一名网络开发人员了解到，如果网站上的颜色对比很差，那么我赚的钱很少，但我想改变它，但是我遇到了问题。我的网站上有一个部分，用户可以选择一种颜色，并且框中填充了该颜色。让我们说已经选择了颜色。在黑匣子的代码中，该框将如下所示：

repositories {
  mavenLocal()
  mavenCentral()
  maven { url 'http://repo.spring.io/libs-snapshot' }
  jcenter()
}

根据用户从运行javascript的选择，<div ID="box" style="background:#000000;width:16px;height:16px">Text?</div>将更改为另一个值。我觉得要让包括google在内的所有CSS处理器都快乐，我需要指定一个前景色，以便它可以在任何背景颜色上读取，但我不知道这背后的数学。

#000000

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

OR

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

我可以在不制作彩盒图像的情况下逃脱这个吗？

更多添加代码

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

<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>

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;
}

THE 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));

以编程方式避免色盲损失

1 个答案: