Это метод расчета цветовой яркости, о котором Леа Веру рассказала на конференции Smashing. Это позволяет вам динамически выбирать подходящие цвета, чтобы текст оставался удобочитаемым для человека. Полное объяснение формулы находится на w3.org.

Процедура выглядит следующим образом:

  1. Рассчитать яркость для текста и фона
  2. Рассчитайте коэффициент контрастности, используя следующую формулу. (L1 + 0,05) / (L2 + 0,05), где L1 — относительная яркость более светлого цвета переднего плана или фона, а L2 — относительная яркость более темного цвета переднего плана или фона.
  3. Убедитесь, что коэффициент контрастности равен или превышает 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
}

Чтобы проверить это прямо сейчас, вы можете открыть консоль браузера, вставить функцию и попробовать использовать ее прямо сейчас.

Ваше здоровье!