如何以编程方式计算两种颜色之间的对比度？ [英] How to programmatically calculate the contrast ratio between two colors?

问题描述

很直观，以黄色和白色：

Pretty straight-forward, take yellow and white:

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

上帝地球上的普遍常数的物理定律，不能在白色背景上阅读，但蓝色文本可以？

What law of physics on God's Earth of universal constants, makes the fact that yellow text can't be read on white backgrounds but blue text can?

为了我的可定制的小部件，我尝试了所有可能的颜色模型，

For the sake of my customizable widget I tried all possible color models that I found conversions functions for; neither can say that green can be on white and yellow can't, based on just numerical comparisons.

我看了Adsense（这是由所有互联网的Budda创建的） ）并猜测他们做了什么，他们做预设和颜色单元距离计算。我不能这样做。

I looked at Adsense (which is created by the Budda of all Internet) and guess what they did, they made presets and color cells distance calculations. I can't to do that. My users have the right to pick even the most retina-inflammatory, unaesthetic combinations, as long as the text can still be read.

推荐答案

因此，白色将具有100％的亮度，黄色将具有89％。同时，绿色也只有59％。 11％的差异几乎是41％的差异的4倍！

Therefore white will have 100% luminance and yellow will have 89%. At the same time green have as small as 59%. 11% difference is almost 4 times lower then 41% difference!

甚至是（＃00ff00 ）适合阅读大量的文本。

And even lime (#00ff00) is not good for reading large amount of texts.

对于良好的对比度颜色，亮度应至少相差50％。

IMHO for good contrast colors' brightness should differ at least for 50%. And this brightness should be measured as converted to grayscale.

upd ：最近找到了一个综合工具在网络上
，它按顺序使用 w3文档
阈值可以从#1.4
这是更高级的东西的计算方式。

upd: Recently found a comprehensive tool for that on the web which in order uses formula from w3 document Threshold values could be taken from #1.4 Here're calculations for this more advanced thing.

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;
}
(luminanace(255, 255, 255) + 0.05) / (luminanace(255, 255, 0) + 0.05); // 1.074 for yellow
(luminanace(255, 255, 255) + 0.05) / (luminanace(0, 0, 255) + 0.05); // 8.592 for blue
// minimal recommended contrast ratio is 4.5 or 3 for larger font-sizes

这篇关于如何以编程方式计算两种颜色之间的对比度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！