Как проверить контраст текста и элементов интерфейса

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

Ниже — практический порядок для макета и готового интерфейса с ориентирами WCAG 2.2. Пример формы записи вымышленный. Это проверка одной части доступности: хороший коэффициент сам по себе не подтверждает доступность всего сайта.

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

Инструмент сравнивает относительную яркость двух цветов и показывает отношение от 1:1 до 21:1. В случае обычного текста это цвет букв и фактический фон под ними. Если подпись стоит на залитой кнопке, фоном текста является заливка кнопки, а не фон страницы.

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

Выберите подходящий порог

Для уровня AA критерий WCAG 2.2 1.4.3 задаёт минимум 4,5:1 для обычного текста и 3:1 для крупного. Крупным в этом контексте считается текст от 18 pt обычного начертания или от 14 pt полужирного: примерно 24 и 18,67 CSS px соответственно. Простая подпись 18 px обычного начертания под это исключение не попадает.

Критерий 1.4.11 задаёт 3:1 к соседним цветам для визуальной информации, необходимой, чтобы определить элемент управления, его состояние или значимую графику. Это не означает, что любую границу любой кнопки обязательно обводить контрастной линией. Сначала определите, какой визуальный признак нужен для распознавания элемента.

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

Шаг 1. Составьте список проверяемых элементов

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

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

Шаг 2. Возьмите реальные цвета

В макете выберите цвет текста и заливку его фона. Для проверки подойдёт специализированный инструмент, например Stark. Важно записать оба значения и размер текста, а не только сохранить зелёную отметку результата.

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

Для первичной оценки палитры можно использовать Realtime Colors, но проверку конкретного экрана это не заменяет. Важна именно та пара, которая оказалась рядом в интерфейсе.

Шаг 3. Сравните результат без округления в пользу прохождения

У серого текста #777777 на белом #FFFFFF отношение примерно 4,48:1. Для обычного текста это ниже 4,5:1. Округлять показатель до 4,5 и считать проверку пройденной нельзя. У #767676 на том же фоне получается примерно 4,54:1.

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

Шаг 4. Исправьте проблему в нужном месте

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

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

Шаг 5. Проверьте сложные фоны и состояния

На фотографии измерьте участки, которые находятся непосредственно под разными частями текста. При изменяемом изображении одного удачного кадра недостаточно. Можно использовать устойчивую подложку, изменить расположение подписи или задать другое оформление, затем повторить проверку.

У градиента важен наименее контрастный участок под содержимым. В форме посмотрите не только обычный вид поля, но и ошибку, заполнение и фокус. Различение ошибки не должно зависеть от одного красного цвета: добавьте понятное сообщение и другой необходимый признак.

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

Зафиксируйте результат и проверьте реализацию

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

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

Базовые определения: контраст и WCAG. В учебнике есть урок о цветовой доступности. Источники W3C: 1.4.3 Contrast (Minimum), 1.4.11 Non-text Contrast и 1.4.1 Use of Color.