Контрастность цветов: соотношение и проверка текста

Прямой ответ

Соотношение контрастности текста и фона определяет читаемость, поэтому мелкий текст требует большего соотношения, чем крупный.

body { color: #1a1a1a; background: #ffffff; }   /* 17.4:1 */
.link-muted { color: #767676; }                  /* 4.54:1 */

Соотношение считается по фактическим значениям цвета, поэтому подбор палитры проверяется расчётом, а не на глаз. О требованиях — в статье про WCAG для разработчика.

Соотношение контрастности и размер текста

Соотношение контрастности зависит от размера текста, поэтому требование к мелкому тексту выше, чем к крупному.

Обычный текст. Текст малого размера требует большего соотношения, поскольку символы различаются хуже при низком контрасте.

Крупный текст. Текст большого размера либо насыщенного начертания требует меньшего соотношения, поскольку символы различаются легче.

Нетекстовые элементы. Границы элементов управления и значки требуют соотношения, достаточного для различения формы.

Практическое следствие: текст, проходящий проверку как крупный, теряет соответствие при уменьшении размера, поэтому соотношение пересчитывается.

Отдельный аспект — текст на изображении. Фон под текстом неоднороден, поэтому соотношение меняется по площади, и читаемость обеспечивается подложкой либо выбором области изображения.

Состояние, переданное только цветом

Состояние, переданное исключительно цветом, недоступно без цветового восприятия, поэтому различие дублируется иным признаком.

Цвет как единственный признак. Ссылка, выделенная только цветом, не отличается от окружающего текста, поэтому различие недоступно.

Дублирующий признак. Подчёркивание либо значок добавляется к цвету, поэтому различие сохраняется без цветового восприятия.

Сообщение об ошибке. Состояние ошибки объявляется текстом, поэтому пользователь узнаёт о нём без различения цвета.

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

Проверка палитры и автоматизация

Палитра интерфейса проверяется расчётом соотношения, поэтому комбинации цвета текста и фона подтверждаются до применения.

Расчёт соотношения. Значение считается по фактическим цветам текста и фона, поэтому соответствие требованию подтверждается числом.

Проверка комбинаций. Каждая пара текста и фона проверяется отдельно, поэтому часть комбинаций может не проходить проверку.

Проверка состояний. Состояния элемента при наведении и фокусе проверяются отдельно, поэтому соотношение сохраняется во всех состояниях.

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

Об основах доступности — в статье про доступность веб-интерфейсов; об аудите — в статье про аудит доступности сайта.

Тёмная тема и изменение палитры

Тёмная тема меняет фон, поэтому соотношение контрастности пересчитывается для каждой палитры отдельно.

Палитра темы. Набор цветов текста и фона определяется темой, поэтому соответствие требованию проверяется для каждой палитры.

Инверсия значений. Светлый текст на тёмном фоне требует того же соотношения, поэтому требование не снижается при смене темы.

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

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

Отдельный аспект — полупрозрачные значения. Цвет с прозрачностью смешивается с фоном, поэтому фактическое значение отличается от заданного, и соотношение считается по смешанному цвету.

Практика: обеспечение контрастности

1. Считайте соотношение по фактическим цветам. Соответствие требованию подтверждается расчётом, а не оценкой на глаз.

2. Различайте требования для мелкого и крупного текста. Мелкий текст требует большего соотношения, поэтому размер учитывается.

3. Проверяйте контраст нетекстовых элементов. Границы управления и значки различимы при соотношении не ниже требуемого.

4. Дублируйте состояние, переданное цветом, иным признаком. Различие доступно без цветового восприятия.

5. Объявляйте сообщение об ошибке текстом. Пользователь узнаёт о состоянии без различения цвета.

6. Проверяйте все состояния элемента. Соотношение сохраняется при наведении и фокусе.

7. Обрабатывайте текст на изображении подложкой. Фон неоднороден, поэтому соотношение обеспечивается подложкой.

Рекомендации:

1. Не полагайтесь на цветовое различие как единственный признак. Различие недоступно без цветового восприятия.
2. Учитывайте изменение размера текста. Текст, проходивший как крупный, теряет соответствие при уменьшении.
3. Сопоставляйте палитру с требованием до применения. Комбинация, не проходящая проверку, требует иного цвета.
4. Фиксируйте проверку контраста в процессе разработки. Нарушение обнаруживается до выпуска.
5. Пересматриваем палитру при изменении фона. Новый фон меняет соотношение для существующего текста.

Практический сценарий: сообщение об ошибке не воспринималось

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

1. Диагностика. Проверка показала, что состояние ошибки передавалось только цветом границы. Текстовое сообщение об ошибке отсутствовало, поэтому пользователь без цветового восприятия не узнавал о состоянии поля.
2. Причина. Цвет использовался как единственный признак состояния, поэтому различие было недоступно части пользователей.
3. Действия. (а) Добавили текстовое сообщение об ошибке рядом с полем, чтобы состояние объявлялось без различения цвета; (б) связали сообщение с полем, чтобы объявление читалось вместе с элементом; (в) добавили значок к границе поля, чтобы различие сохранялось без цветового восприятия; (г) проверили соотношение контрастности текста сообщения с фоном и убедились в соответствии требованию; (д) проверили состояния поля при фокусе и после исправления ошибки.
4. Результат. Ошибка объявления доступна без цветового восприятия, поскольку состояние дублируется текстом и значком.

Вывод: состояние, переданное только цветом, недоступно без цветового восприятия, поэтому пользователь не узнаёт об ошибке. Текстовое сообщение, связанное с полем, и дублирующий значок делают состояние доступным независимо от восприятия цвета.

FAQ

Какое соотношение контрастности требуется для обычного текста? Не ниже 4.5 к 1. Крупный текст либо насыщенное начертание допускают соотношение не ниже 3 к 1.

Почему нельзя передавать состояние только цветом? Различие недоступно без цветового восприятия, поэтому состояние дублируется текстом либо значком.

Нужно ли проверять контраст в состояниях наведения и фокуса? Да, соотношение считается для каждого состояния отдельно. Основное состояние может проходить проверку, а состояние с иным фоном — нет.

Как обеспечить читаемость текста на изображении? Подложкой под текстом либо выбором однородной области изображения. Фон под текстом неоднороден, поэтому соотношение меняется по площади.

Источники: WCAG 2.2 Contrast (Minimum), WCAG 2.2 Use of Color, WCAG 2.2 — ссылки в шапке.