Это метод расчета цветовой яркости, о котором Леа Веру рассказала на конференции Smashing. Это позволяет вам динамически выбирать подходящие цвета, чтобы текст оставался удобочитаемым для человека. Полное объяснение формулы находится на w3.org.
Процедура выглядит следующим образом:
- Рассчитать яркость для текста и фона
- Рассчитайте коэффициент контрастности, используя следующую формулу. (L1 + 0,05) / (L2 + 0,05), где L1 — относительная яркость более светлого цвета переднего плана или фона, а L2 — относительная яркость более темного цвета переднего плана или фона.
- Убедитесь, что коэффициент контрастности равен или превышает 4,5:1.
Ключом ко всему этому является сохранение надлежащего соотношения контрастности между яркостью цветов переднего плана и фона.
Вот фактическая функция, которая возвращает относительную яркость цвета:
// color array - [r,g,b] , each color with value ranging from 0 to 255
// @return int - number [0-100], describes relative luminance of the color,
// 0 represents the luminance of completely black while
// 100 represents the luminance of the white color.
function luminance (color) {
var rgb = color.map(function(c){
c /= 255; // to 0-1 range
return c < .03928 ?
c / 12.92 :
Math.pow((c+.055)/1.055, 2.4);
});
return 21.26 * rgb[0] + // red
71.52 * rgb[1] + // green
7.22 * rgb[2]; // blue
}
Чтобы проверить это прямо сейчас, вы можете открыть консоль браузера, вставить функцию и попробовать использовать ее прямо сейчас.
Ваше здоровье!