При вёрстке веб-страницы важно сделать так, чтобы пользователям было комфортно читать текст. Это необходимо учитывать, так как у людей может отличаться восприятие цвета. Если вы можете легко прочитать светло-серый текст на белом фоне, то, возможно, у вашего друга это вызовет затруднения.
Для решения этой и других задач доступности веб-страницы существует стандарт Web Content Accessibility Guidelines (WCAG). В этой статье нас интересует раздел, посвящённый контрасту цвета. Полную версию стандарта можно прочитать на сайте организации W3C.
Какие же требования предъявляются к тексту с точки зрения стандарта WCAG?
Кажется, всё логично: чем больше контраст, тем лучше читается текст. Закрываем статью и идём пить кофе. Но как же проверить, каким контрастом обладает тот или иной текст относительно фона? И что обозначают цифры 4.5 : 1, 7 : 1 и так далее?
Коэффициент контраста, согласно стандарту WCAG, высчитывается по формуле: (L1 + 0,05) / (L2 + 0,05), в которой:
Формула достаточно простая: берём два цвета, добавляем к ним константу, делим и смотрим на результат. Но как вы могли заметить, нужно взять не просто два цвета, а их относительную яркость.
Изучайте вёрстку на Хекслете Пройдите профессию и научитесь профессионально верстать веб-страницы. В рамках профессии вы изучите позиционирование HTML-элементов, технологии Flex и Grid, работу с препроцессором Sass. Также вы сверстаете несколько лендингов и добавите их в портфолио. Подписывайтесь, базовые курсы в профессии доступны бесплатно.
Относительной яркостью считается коэффициент от нуля до единицы, где 0 является чёрным цветом, а 1 белым цветом. Для получения этого значения используется следующая формула: L = 0,2126 * R + 0,7152 * G + 0,0722 * B. Самый сложный момент здесь — получение необходимых значений R (red), G (green), B (blue). Для этого нужно выполнить две операции над каждым из цветов:
После этого производятся следующие операции:
В качестве примера возьмём следующий блок:
Блок имеет такие значимые стили:
{
background: #845143;
color: #9bb3a5;
}
При использовании модели RGB достаточно легко получить значение каждого цвета. Для этого необходимо просто взять по 2 цифры из цвета. Первая пара является обозначением красного цвета, вторая пара обозначает зелёный цвет, а третья пара отвечает за голубой цвет. Фон блока можно определить следующим образом:
Данные значения записаны в шестнадцатеричной системе. Их необходимо перевести в десятичную. Это можно сделать самостоятельно или с помощью онлайн сервисов. Например Color Scheme. В ней нас интересует цвет в системе rgb().
Теперь можно получить относительную яркость фонового цвета.
B sRGB = 67 / 255 = 0.26
R = ((0.51 + 0.055) / 1.055) ^ 2.4 = 0.2234
G = ((0.31 + 0.055) / 1.055) ^ 2.4 = 0.0782
B = ((0.26 + 0.055) / 1.055) ^ 2.4 = 0.0549
Итоговое значение относительной яркости (L): 0.2126 * 0.2234 + 0.7152 * 0.0782 + 0.0722 * 0.0549 = 0.1074
С помощью этих же формул можно вычислить относительную яркость цвета текста.
Теперь можно получить относительную яркость текста.
B sRGB = 165 / 255 = 0.6470
R = ((0.6078 + 0.055) / 1.055) ^ 2.4 = 0.3277
G = ((0.7019 + 0.055) / 1.055) ^ 2.4 = 0.4506
B = ((0.6470 + 0.055) / 1.055) ^ 2.4 = 0.3761
Итоговое значение относительной яркости (L): 0.2126 * 0.3277 + 0.7152 * 0.4506 + 0.0722 * 0.3761 = 0.4190
Используя полученные значения относительной яркости, можно вычислить коэффициент контраста. Как было указано ранее, коэффициент контраста вычисляется по формуле (L1 + 0,05) / (L2 + 0,05), в которой:
Самым светлым будет считаться цвет, у которого относительная яркость выше. Подставим значения в формулу:
Contrast Ratio = (0.4190 + 0.05) / (0.1074 + 0.05) = 2.9. Также это значение может быть представлено так: 2.9 : 1, как это было показано в начале статьи.
Данное значение не вписывается в рамки стандарта WCAG. Если хотите сделать сайт более доступным для ваших пользователей, используйте другое сочетания фона и текста.
Также полезно Важная статья об организации кода: «Что верстальщик должен знать об объектно-ориентированном CSS».
Естественно, производить подобные вычисления вручную нет необходимости. Это отнимает много времени, к тому же, в вычислениях легко допустить ошибку. Вместо этого можно написать функцию, используя любой современный препроцессор. В качестве примера используем препроцессор SASS и создадим функцию contrast-ratio().
@function contrast-ratio($background-color, $text-color) {
$l-background: luminance($background-color);
$l-text: luminance($text-color);
@if ($l-background > $l-text) {
@return ($l-background + .05) / ($l-text + .05);
}
@return ($l-text + .05) / ($l-background + .05)
}
Функция contrast-ratio() принимает значения фонового и текстового цвета, после чего высчитывает относительную яркость каждого цвета и возвращает коэффициент контраста. На самом деле такой функции, как luminance(), в SASS не существует. Поэтому её тоже необходимо написать. Так как в функции возможна операция возведения в степень, необходимо подключить библиотеку, которая добавит необходимую операцию. В качестве такой библиотеки используем sass-math-pow.
@function luminance($color) {
$rgb: (
"red": red($color),
"green": green($color),
"blue": blue($color)
);
@each $color, $value in $rgb {
$value: $value / 255;
@if ($value <= 0.03928) {
$value: $value / 12.92;
} @else {
$value: ($value + .055) / 1.055;
$value: poly-pow($value, 2.4);
}
$rgb: map-merge($rgb, ($color: $value));
}
$result-luminance: (map-get($rgb, 'red') * .2126) + (map-get($rgb, 'green') * .7152) + (map-get($rgb, 'blue') * .0722);
@return $result-luminance;
}
Теперь можно отслеживать коэффициент контраста непосредственно в SASS. Для этого используем директиву @warn и при недостаточном контрасте покажем сообщение. Оно выведется при следующей компиляции кода.
$min-contrast-ratio: 4.5;
$bg-color: #845143;
$text-color: #9bb3a5;
$color-contrast: contrast-ratio($bg-color, $text-color);
@if ($color-contrast < $min-contrast-ratio) {
@warn "Current contrast ratio is #{$color-contrast}:1, but should be minimum #{$min-contrast-ratio}:1"
}
Во время компиляции SASS предупредит о недостаточном контрасте:
Warning: Current contrast ratio is 2.8974077644:1, but should be minimum 4.5:1