Учитывая цвет фона, как получить цвет переднего плана, который делает его читаемым на этом фоне?

Question

Учитывая цвет фона, как получить цвет переднего плана, который делает его читаемым на этом цвете фона?

Я имею в виду автоматическое вычисление этого цвета переднего плана в программе.

Или упростить задачу, если цвет переднего плана выбран из белого / черного, как сделать выбор в программе?

Answer 1

Самая безопасная ставка заключается в соответствии с Руководством по доступности веб-контента Консорциума World Wide Web (W3C) 2.0, в котором указывается коэффициент контрастности яркости 4,5: 1 для обычного текста (12 пт или меньше) и 3,0:1 для большого текста .Коэффициент контрастности определяется как:

[Y (b) + 0,05] / [Y (d) + 0,05]

Где Y (b) - яркость (яркость) более яркого цветаи Y (d) - яркость более темного цвета.

Вы вычисляете яркость Y, сначала конвертируя каждое из значений RGB цвета в гамма-скорректированные нормализованные значения rgb:

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

Затем объедините их, используяконстанты sRGB (округлены до 4 раз):

Y = 0,2126 * r + 0,7151 * г + 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%, используйте белый. В противном случае используйте черный.

Использование цветов в качестве цвета переднего плана затруднительно, поскольку необходимо учитывать контраст и дальтонизм.

Answer 4

Вот некоторый фактический (ruby) код, который на самом деле сделает подъем:

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"

Answer 5

Вы можете вычислить обратный цвет, но вы рискуете уменьшить контрастность "в середине" цветового пространства.