如何编程计算两种颜色之间的对比度？

Question

非常直截了当，采用黄色和白色：

back_color = {r:255,g:255,b:255}; //white
text_color = {r:255,g:255,b:0}; //yellow

在上帝的地球上，宇宙常量的物理定律是什么，使得黄色文本不能在白色背景上阅读，而蓝色文本可以？

为了我的可定制小部件，我尝试了所有可能的颜色模型，我找到了转换函数；根据数字比较，也不能说绿色可以在白色上，黄色不可以。

我看了看Adsense (它是由所有互联网的Budda创建的)，猜猜他们做了什么，他们做了预设和颜色单元距离计算。我不能这么做。我的用户有权选择即使是最具视网膜炎症的、不美观的组合，只要文本仍然可以阅读。

Answer 1

根据维基百科的说法，当转换为亮度的灰度表示时，“一个人必须获得其红、绿、蓝的值”，并将它们按下一个比例混合: R:30% G:59%B:11%

因此，白色将具有100%的亮度，黄色将具有89%的亮度。与此同时，绿色仅占59%。11%几乎比41%的差值低了四倍！

即使是lime (#00ff00)也不适合阅读大量文本。

IMHO为了获得好的对比度，颜色的亮度至少应该不同50%。并且此亮度应按转换为灰度进行测量。

更新：最近在网上找到了一个comprehensive tool，它使用了w3 document阈值中的公式，可以从#1.4中获取。这里是这个更高级的东西的实现。

function luminance(r, g, b) {
    var a = [r, g, b].map(function (v) {
        v /= 255;
        return v <= 0.03928
            ? v / 12.92
            : Math.pow( (v + 0.055) / 1.055, 2.4 );
    });
    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
}
function contrast(rgb1, rgb2) {
    var lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
    var lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
    var brightest = Math.max(lum1, lum2);
    var darkest = Math.min(lum1, lum2);
    return (brightest + 0.05)
         / (darkest + 0.05);
}
contrast([255, 255, 255], [255, 255, 0]); // 1.074 for yellow
contrast([255, 255, 255], [0, 0, 255]); // 8.592 for blue
// minimal recommended contrast ratio is 4.5, or 3 for larger font-sizes

有关详细信息，请查看有关如何计算此值的WCAG 2.0 documentation。

Answer 2

计算对比度的方法有很多种，但一种常见的方法是这个公式：

brightness = (299*R + 587*G + 114*B) / 1000

你对两种颜色都这样做，然后取不同的颜色。这显然使蓝色与白色的对比度比黄色与白色的对比度要大得多。

Answer 3

const getLuminanace = (values) => {
  const rgb = values.map((v) => {
    const val = v / 255;
    return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
  });
  return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
};

const getContrastRatio = (colorA, colorB) => {
  const lumA = getLuminanace(colorA);
  const lumB = getLuminanace(colorB);

  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
};

// usage:
const back_color = [255,255,255]; //white
const text_color = [255,255,0]; //yellow

getContrastRatio(back_color, text_color); // 1.0736196319018405