给定背景颜色,如何获得使其在背景颜色上可读的前景色？

Question

给定背景颜色,如何获得使其在背景颜色上可读的前景色？

我的意思是在程序中自动计算前景色.

或者简化问题,如果从白/黑中选择前景色,如何在程序中进行选择？

Answer 1

最安全的做法是遵守万维网联盟(W3C)的Web内容可访问性指南2.0,它指定常规文本(12磅或更小)的亮度对比度为4.5:1,大文本的亮度对比度为3.0:1.对比度定义为:

[Y(b)+ 0.05]/[Y(d)+ 0.05]

其中Y(b)是较亮颜色的亮度(亮度),Y(d)是较暗颜色的亮度.

您可以通过首先将每个颜色的RGB值转换为伽马调整的标准化rgb值来计算亮度Y:

• r =(R/255)^ 2.2
• b =(B/255)^ 2.2
• g =(G/255)^ 2.2

然后使用sRGB常量(四舍五入到4位)组合它们:

Y = 0.2126*r + 0.7151*g + 0.0721*b

这使得白色Y为1,黑色Y为0,因此最大可能对比度为(1.05/0.05)= 21(在舍入误差范围内).

或者让JuicyStudio为您做数学计算.

该计算假定在相对昏暗的房间(或者如果他或他必须用户可以使暗淡的房间)的标准性监视器.这使它适合家庭或办公室使用,但我不知道它是否适合移动应用程序或户外使用的其他设备.

Answer 2

这是我在Java和Javascript中所做的一个.它在javascript中松散地基于这个.我从这里拿了亮度公式.我眼中门槛的甜蜜点大约是140.

Java版本:

public class Color {

    private float CalculateLuminance(ArrayList<Integer> rgb){
        return (float) (0.2126*rgb.get(0) + 0.7152*rgb.get(1) + 0.0722*rgb.get(2));
    }

    private ArrayList<Integer> HexToRBG(String colorStr) {
        ArrayList<Integer> rbg = new ArrayList<Integer>();
        rbg.add(Integer.valueOf( colorStr.substring( 1, 3 ), 16 ));
        rbg.add(Integer.valueOf( colorStr.substring( 3, 5 ), 16 ));
        rbg.add(Integer.valueOf( colorStr.substring( 5, 7 ), 16 ));
        return rbg;
    }
    public String getInverseBW(String hex_color) {
        float luminance = this.CalculateLuminance(this.HexToRBG(hex_color));
        String inverse = (luminance < 140) ? "#fff" : "#000";
        return inverse;
    }

}

Javascript版本:

这是javascript中用于前端事物的相同内容.RGB转换取自此处:

hex_to_rgb: function(hex) {
        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;
},
hex_inverse_bw: function(hex) {
        rgb = this.hex_to_rgb(hex);
        luminance = (0.2126*rgb["r"] + 0.7152*rgb["g"] + 0.0722*rgb["b"]);
        return (luminance < 140) ? "#ffffff": "#000000";
}

Answer 3

• 计算亮度(见HSL)
• 如果亮度小于50%,请使用白色.否则,使用黑色.

使用颜色作为前景颜色很困难,因为您必须考虑对比度和色盲.