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

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)也不适合阅读大量文本.

对于良好对比度颜色的恕我直言,亮度应至少相差50%.并且应该将此亮度测量为转换为灰度.

upd:最近在Web上找到了一个综合工具,它按顺序使用w3文档中的公式 阈值可以从#1.4中获取. 这是一个更高级的实现.

function luminanace(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) {
    return (luminanace(rgb1[0], rgb1[1], rgb1[2]) + 0.05)
         / (luminanace(rgb2[0], rgb2[1], rgb2[2]) + 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

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