Что нужно знать о контрасте текста и как контролировать контраст с помощью SASS

~6 минут

При вёрстке веб-страницы важно сделать так, чтобы пользователям было комфортно читать текст. Это необходимо учитывать, так как у людей может отличаться восприятие цвета. Если вы можете легко прочитать светло-серый текст на белом фоне, то, возможно, у вашего друга это вызовет затруднения.

Что такое коэффициент контраста
Что такое относительная яркость
Пример вычисления коэффициент контраста
Как контролировать контраст с помощью SASS
Резюме
Дополнительные материалы

Для решения этой и других задач доступности веб-страницы существует стандарт Web Content Accessibility Guidelines (WCAG). В этой статье нас интересует раздел, посвящённый контрасту цвета. Полную версию стандарта можно прочитать на сайте организации W3C.

Какие же требования предъявляются к тексту с точки зрения стандарта WCAG?

Текст на странице или изображении должен иметь коэффициент контраста не менее 4.5 : 1. В идеале это значение должно быть не менее 7 : 1.
Для увеличенного текста коэффициент контраста должен иметь значение не менее 3 : 1. В идеале это значение должно быть не менее 4.5 : 1. Увеличенным считается текст размером в 18 пикселей, либо 14 пикселей с полужирным начертанием.

Кажется, всё логично: чем больше контраст, тем лучше читается текст. Закрываем статью и идём пить кофе. Но как же проверить, каким контрастом обладает тот или иной текст относительно фона? И что обозначают цифры 4.5 : 1, 7 : 1 и так далее?

Что такое коэффициент контраста

Коэффициент контраста, согласно стандарту WCAG, высчитывается по формуле: (L1 + 0,05) / (L2 + 0,05), в которой:

L1 — относительная яркость самого светлого цвета.
L2 — относительная яркость самого тёмного цвета.

Формула достаточно простая: берём два цвета, добавляем к ним константу, делим и смотрим на результат. Но как вы могли заметить, нужно взять не просто два цвета, а их относительную яркость.

Изучайте вёрстку на Хекслете Пройдите профессию и научитесь профессионально верстать веб-страницы. В рамках профессии вы изучите позиционирование HTML-элементов, технологии Flex и Grid, работу с препроцессором Sass. Также вы сверстаете несколько лендингов и добавите их в портфолио. Подписывайтесь, базовые курсы в профессии доступны бесплатно.

Что такое относительная яркость

Относительной яркостью считается коэффициент от нуля до единицы, где 0 является чёрным цветом, а 1 белым цветом. Для получения этого значения используется следующая формула: L = 0,2126 * R + 0,7152 * G + 0,0722 * B. Самый сложный момент здесь — получение необходимых значений R (red), G (green), B (blue). Для этого нужно выполнить две операции над каждым из цветов:

R sRGB = R 8bit / 255
G sRGB = G 8bit / 255
B sRGB = B 8bit / 255

После этого производятся следующие операции:

Если R sRGB <= 0,03928, то R = R sRGB / 12,92. Иначе R = ((R sRGB + 0,055) / 1,055) ^ 2,4.
Если G sRGB <= 0,03928, то G = G sRGB / 12,92. Иначе G = ((G sRGB + 0,055) / 1,055) ^ 2,4.
Если B sRGB <= 0,03928, то B = B sRGB / 12,92. Иначе B = ((B sRGB + 0,055) / 1,055) ^ 2,4.

Пример вычисления коэффициент контраста

В качестве примера возьмём следующий блок:

Текст с малой контрастностью

Блок имеет такие значимые стили:

{
  background: #845143;
  color: #9bb3a5;
}

При использовании модели RGB достаточно легко получить значение каждого цвета. Для этого необходимо просто взять по 2 цифры из цвета. Первая пара является обозначением красного цвета, вторая пара обозначает зелёный цвет, а третья пара отвечает за голубой цвет. Фон блока можно определить следующим образом:

R: 84
G: 51
B: 43

Данные значения записаны в шестнадцатеричной системе. Их необходимо перевести в десятичную. Это можно сделать самостоятельно или с помощью онлайн сервисов. Например Color Scheme. В ней нас интересует цвет в системе rgb().

R: 132
G: 81
B: 67

Теперь можно получить относительную яркость фонового цвета.

R sRGB = 132 / 255 = 0.51
G sRGB = 81 / 255 = 0.31
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

С помощью этих же формул можно вычислить относительную яркость цвета текста.

R: 155
G: 179
B: 165

Теперь можно получить относительную яркость текста.

R sRGB = 155 / 255 = 0.6078
G sRGB = 179 / 255 = 0.7019
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), в которой:

L1 — относительная яркость самого светлого цвета.
L2 — относительная яркость самого тёмного цвета.

Самым светлым будет считаться цвет, у которого относительная яркость выше. Подставим значения в формулу:

Contrast Ratio = (0.4190 + 0.05) / (0.1074 + 0.05) = 2.9. Также это значение может быть представлено так: 2.9 : 1, как это было показано в начале статьи.

Данное значение не вписывается в рамки стандарта WCAG. Если хотите сделать сайт более доступным для ваших пользователей, используйте другое сочетания фона и текста.

Также полезно Важная статья об организации кода: «Что верстальщик должен знать об объектно-ориентированном CSS».

Как контролировать контраст с помощью SASS

Естественно, производить подобные вычисления вручную нет необходимости. Это отнимает много времени, к тому же, в вычислениях легко допустить ошибку. Вместо этого можно написать функцию, используя любой современный препроцессор. В качестве примера используем препроцессор 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

Резюме

У людей может отличаться цветовосприятие, это надо учитывать при вёрстке страниц
Для контроля доступности в вебе используется стандарт Web Content Accessibility Guidelines (WCAG)
Контролировать контраст текста на странице можно с помощью SASS

Дополнительные материалы

Проверка контраста в Chrome DevTools

Nikita Mikhaylov 01 сентября 2020