Что нужно знать о контрасте текста и как контролировать контраст с помощью SASS
2026-02-26 23:13 Diff
https://ru.hexlet.io/blog/posts/chto-nuzhno-znat-o-kontraste-teksta-i-kak-kontrolirovat-kontrast-s-pomoschyu-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 — относительная яркость самого тёмного цвета.

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

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

Относительной яркостью считается коэффициент от нуля до единицы, где 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.

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

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

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

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

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

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

Функция contrast-ratio() принимает значения фонового и текстового цвета, после чего высчитывает относительную яркость каждого цвета и возвращает коэффициент контраста. На самом деле такой функции, как luminance(), в SASS не существует. Поэтому её тоже необходимо написать. Так как в функции возможна операция возведения в степень, необходимо подключить библиотеку, которая добавит необходимую операцию. В качестве такой библиотеки используем sass-math-pow.

Теперь можно отслеживать коэффициент контраста непосредственно в SASS. Для этого используем директиву @warn и при недостаточном контрасте покажем сообщение. Оно выведется при следующей компиляции кода.

Во время компиляции SASS предупредит о недостаточном контрасте:

Резюме

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

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