Цветовой контраст

Светло-серый #999999 на белом даёт коэффициент контрастности 2.85:1, намного меньше 4.5:1, которых WCAG 2.2 требует для основного текста.

Почему важен контраст

Бледный на своём фоне текст трудно читать людям со слабым зрением, многим пожилым читателям и всем, кто смотрит в телефон на солнце. WCAG 2.2 не оставляет «бледность» на вкус. Стандарт измеряет относительную яркость двух цветов, число от 0 для чёрного до 1 для белого, и сравнивает их через коэффициент контрастности (L1 + 0.05) / (L2 + 0.05), где L1 является более светлым цветом. Результат лежит от 1:1 (цвет на самом себе) до 21:1 (чёрный на белом). В курсе теории цвета формула разобрана по шагам; здесь мы её применяем.

Какие числа нужны

Критерий успешного применения 1.4.3 «Контрастность (минимальные требования)» уровня AA требует не меньше 4.5:1 для обычного текста и 3:1 для крупного, а крупным WCAG считает текст от 18 пунктов или от 14 пунктов полужирным. Критерий 1.4.6 уровня AAA поднимает эти значения до 7:1 и 4.5:1. Критерий 1.4.11 «Контрастность нетекстовой информации» требует 3:1 для тех частей элементов управления и графики, которые людям нужно видеть, например рамки текстового поля или линий графика. Логотипы и текст, который служит только украшением или входит в неактивный элемент управления, освобождены от требований.

Несколько значений стоит запомнить. Серый #767676 даёт 4.54:1 на белом, и его часто называют самым светлым простым серым, который проходит AA; #777777 даёт 4.48:1 и не проходит. Более тёмный #595959 достигает 7.00:1 и проходит AAA. Насыщенные цвета обманчивы: чистый красный #ff0000 на белом даёт всего 4.00:1, а более глубокий красный #c01c28 достигает 6.11:1. Частая ошибка встречается в тексте-подсказке внутри полей формы, потому что дизайнеры нередко нарочно делают его очень светлым.

Как проверять цвета на практике

Считать формулу вручную приходится редко. Если исследовать текстовый элемент, палитра цвета в инструментах разработчика основных браузеров показывает его контрастность относительно фона, часто с линией порогов AA и AAA. Два случая требуют особого внимания. У текста поверх фото или градиента нет одного фона, поэтому проверяй его по самому светлому участку под ним или подложи сплошную плашку. А сайт с тёмной темой нужно проверять дважды: цвет, который проходит на белом, может не пройти на почти чёрном. Синий #1a5fb4 даёт 6.29:1 на белом, но всего 3.34:1 на чистом чёрном.

Никогда не только цвет

Контраст текста и фона составляет лишь половину дела. Критерий 1.4.1 «Использование цвета» уровня A говорит, что цвет не должен быть единственным способом передать информацию. Красный #c01c28 и синий #1a5fb4 хорошо читаются на белом, но друг относительно друга дают всего 1.03:1. В оттенках серого или для человека, который не различает красный и синий, они превращаются в один и тот же серый. Поэтому обязательному полю, отмеченному только красной подписью, или ссылке, которая отличается от окружающего текста только цветом, нужен второй признак: слово, значок, подчёркивание.