Как определить яркость rgb цвета в javasript?

Question

[Igor Fedorov]

Как можно определить "яркость" rgb цвета, чтобы текст поверх хорошо читался?



Прикладываю картинку для примера. Чтобы было видно, что на ярких фонах нужен чёрный цвет, а на более тёмных - белый.

Comments

[Денис Инешин]

Ни разу не встречал чтобы это делалось динамически. Обычно на стадии дизайна/проектирования все разруливается.

[Igor Fedorov]

Денис Инешин: в моём случае фон меняется динамически - при этом нет заранее определённого списка цветов

[xmoonlight]

Igor Fedorov: Я вот тоже хочу прикрутить себе: precosts.com/app/design-generator

[xmoonlight]

Igor Fedorov, littleguga, Денис Инешин, MaxKorz, dom1n1k, Дмитрий Беляев, Владислав Поляков: Прикрутил, смотрите как шикарно! precosts.com/app/design-generator

[littleguga]

xmoonlight: приятно получилось.

[xmoonlight]

littleguga: Спасибо! Там кросс-направлено: зависимость текста заголовков и цвета основного текста от цвета фона и от цвета оформления.
Следующий шаг - кросс-зависимость между цветом фона и цветом оформления, чтобы попадало всегда чётко в дизайн)

[dom1n1k]

Не всегда корректно работает.
В зеленых тонах он предложил зеленые же заголовки, которые едва отличались.

Answer 1

[littleguga]

Есть уже готовое решение: www.kennethcachia.com/background-check
Денис Инешин, xmoonlight, Igor Fedorov

Comments

[dom1n1k]

Очень там все сложно, аж 700 строк кода - потому что стремится к универсальности.
Если делать под конкретную локальную задачу, там строк 10 будет.

Answer 2

[dom1n1k]

W3C определяет минимальный контраст текста как 1:4.5:
https://www.w3.org/TR/WCAG20/#visual-audio-contrast
Как считать этот контраст:
https://www.w3.org/TR/WCAG20/#contrast-ratiodef

Те же самые рекомендации использует Google в material design, добавляя от себя оговорку, что 4.5 это минимум, а рекомендуется 7.

Answer 3

[Дмитрий Беляев]

Яркость = 0.21 R + 0.72 G + 0.07 B

Answer 4

[Владислав Поляков]

getComputedStyle(document.body).color;
-- "rgb(0, 0, 0)"

var rgb = getComputedStyle(document.body).color.match(/\d+/g),
    r = parseInt(rgb[0]),
    g = parseInt(rgb[1]),
    b = parseInt(rgb[2]);

if(r > 200)
...
if(g > 200)
...
if(b > 200)