Question

有没有办法，给定两种颜色（让他们称之为第一种颜色和第二种颜色）来弄清楚第二种颜色必须改变为什么颜色才能获得4.5的对比度？换句话说，为了获得4.5的对比度，我们需要多少量来移动第二种颜色？亮度和比率代码如下：

亮度代码：

function getLuminance (rgb){

    for (var i =0; i<rgb.length; i++) {
        if (rgb[i] <= 0.03928) {
            rgb[i] = rgb[i] / 12.92;    
        } else {
            rgb[i] = Math.pow( ((rgb[i]+0.055)/1.055), 2.4 );
        }
    }
    var l = (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]);
    return l;
};

比率代码：

var ratio = 1;
var l1 = getLuminance([first_color_red.value/255, first_color_green.value/255, first_color_blue.value/255]);
var l2 = getLuminance([second_color_red.value/255, second_color_green.value/255, second_color_blue.value/255]);

if (l1 >= l2) {
    ratio = (l1 + .05) / (l2 + .05);
} else {
    ratio = (l2 + .05) / (l1 + .05);
}

我面临的问题是亮度计算 - 仅基于比率，似乎无法计算出R，G和B值，因为它们是三个未知数（取决于哪个）每种颜色所采用的路径 - 大于0.03928或不大于......）。

我们可以通过考虑颜色亮度和色差计算来添加更多约束，如下所示：

色彩亮度代码： brightnessDifference的阈值是它大于或等于125。

fY=((first_color_r.value * 299) + (first_color_g.value * 587) + (first_color_b.value * 114)) / 1000;
sY=((second_color_r.value * 299) + (second_color_g.value * 587) + (second_color_b.value * 114)) / 1000;
brightnessDifference = Math.abs(fY-sY);

色差代码： colorDifference的阈值是它大于或等于500。

colorDifference = (Math.max (second_color_r.value, first_color_r.value) - Math.min (second_color_r.value, first_color_r.value)) +
                        (Math.max (second_color_g.value, first_color_g.value) - Math.min (second_color_g.value, first_color_g.value)) +
                        (Math.max (second_color_b.value, first_color_b.value) - Math.min (second_color_b.value, first_color_b.value));

我已阅读以下帖子：How to pick good contrast RGB colors programmatically?

然而，计算补色并不总能解决问题！甚至可能不会产生4.5的对比度......关于如何实现这一点的任何想法？

移动颜色以获得特定的对比度

0 个答案: