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

Ответ 1

Самая безопасная ставка заключается в соответствии с рекомендациями по доступности веб-консорциумов World Wide Web Consortiums (W3C) 2.0, которые определяют контрастность яркости 4.5: 1 для регулярный текст (12 pt или меньше) и 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 * g + 0,0721 * b

Это дает белый Y из 1 и черный a Y из 0, поэтому максимально возможный контраст (1.05/0,05) = 21 (в пределах ошибки округления).

Или пусть JuicyStudio выполнит математику для вас.

Этот расчет предполагает стандартный монитор в относительно тускло освещенной комнате (или комнате, которую пользователь может сделать тусклой, если он или она должен). Это делает его адекватным для домашнего или офисного использования, но я не знаю, подходит ли оно для мобильных приложений или других устройств, которые используются на открытом воздухе.

Ответ 2

• Рассчитайте легкость (см. HSL)
• Если яркость меньше 50%, используйте белый цвет. В противном случае используйте черный цвет.

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

Ответ 3

Вот какой-то фактический (рубиновый) код, который действительно сделает подъем:

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"

Ответ 4

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