Проверяйте цветовые сочетания не по впечатлению, а по роли каждого элемента: измерьте контраст текста и фона, оцените видимость иконок и границ, затем проверьте макет в симуляциях нарушений цветового зрения. Такой порядок помогает находить проблемы до передачи макета в разработку и предлагать конкретные правки вместо случайной замены оттенков.
Что проверить до оценки цветовой доступности
- Соберите пары цветов для текста, фона, иконок, границ и интерактивных состояний.
- Отметьте, какие элементы важны для чтения, навигации и выполнения действий.
- Проверьте контраст по критериям WCAG, подходящим для конкретного элемента.
- Посмотрите, понятен ли интерфейс без опоры только на цвет.
- Зафиксируйте проблемные места и предложите правки с сохранением роли цвета в дизайн-системе.
Подготовьте макет: соберите пары цветов и важные состояния
Проверка подходит для макетов сайта или приложения, дизайн-систем и уже свёрстанных страниц. Её удобно проводить до передачи материалов в разработку, а также после изменения палитры или контрастных состояний.
Не начинайте с массовой замены цветов: сначала выясните, где и для чего используется каждый оттенок. Если макет ещё не содержит реальных текстов, фонов и состояний компонентов, сначала соберите репрезентативные примеры - измерение случайных пар не покажет проблем интерфейса.
- Выпишите цвета текста и их фонов, включая текст поверх изображений.
- Добавьте пары для ссылок, кнопок, полей, уведомлений, иконок и границ.
- Проверьте состояния по отдельности: обычное, фокус, наведение, нажатие, ошибка и отключённое.
- Уточните, какие значения цвета заданы в макете: например, HEX или RGB.
Измерьте контраст текста, иконок и границ элементов
Для измерения понадобятся доступ к макету или странице, значения цветов переднего и заднего плана и инструмент проверки контраста. Это может быть плагин редактора, онлайн-сервис или средство в браузере. Для сложного фона - например, фотографии или градиента - оценивайте контраст в месте, где элемент фактически расположен.
При проверке соответствия WCAG 2.2 уровня AA ориентируйтесь на следующие критерии: обычный текст - не менее 4,5:1, крупный текст - не менее 3:1. Для значимых графических объектов и визуальных границ элементов управления применяют критерий 3:1 относительно соседнего цвета. Уточняйте применимость критерия к конкретному компоненту: декоративные элементы и отключённые элементы оцениваются иначе.
Результат измерения не заменяет визуальную проверку: он не покажет, различимы ли состояния, читается ли текст поверх неоднородного изображения и понятен ли смысл без цвета.
Сравните инструменты проверки: что показывают плагины и онлайн-сервисы
Перед запуском проверки подготовьте короткий набор примеров:
- пару цветов текста и фона для основного контента;
- цвета значимой иконки и окружающего фона;
- границу поля или кнопки и прилегающую область;
- состояние ошибки, успеха или фокуса вместе с поясняющим текстом.
После этого выполните проверку по шагам. Для поиска подойдёт запрос "проверка контрастности цветов онлайн", но результат сервиса нужно сопоставлять с макетом, а не трактовать как полную оценку доступности.
-
Выберите пары цветов.
Сначала проверьте контраст текста и фона, затем значимые иконки, границы и состояния компонентов. Не объединяйте разные состояния в одну проверку: у каждого своя пара цветов. -
Измерьте контраст.
Введите цвет переднего плана и фон в плагин или онлайн-инструмент. Сопоставьте результат с критериями WCAG для соответствующего типа элемента. -
Сверьте результат с макетом.
Убедитесь, что инструмент проверил реальные значения цветов и нужный фон. Если текст расположен на фотографии, проверьте несколько участков под буквами и оцените самое слабое место. -
Проверьте страницу целиком.
Чтобы проверить доступность цветов сайта, используйте средство, которое анализирует страницу в браузере, и отдельно осмотрите состояния, которые не показаны одновременно. Автоматический отчёт не всегда выявляет неоднозначность смысла или проблемы в сложном фоне. -
Сопоставьте инструменты.
Если результаты различаются, перепроверьте значения цветов и способ измерения, а затем повторите тест в другом средстве. Для подбора цветовых сочетаний онлайн используйте инструменты как отправную точку, а итоговые пары проверяйте в контексте интерфейса.
| Инструмент или подход | Что помогает проверить | Ограничения |
|---|---|---|
| Плагин графического редактора | Пары цветов и контраст прямо в макете | Может не учитывать реальное поведение страницы и все состояния компонентов |
| Онлайн-калькулятор контраста | Контраст двух заданных цветов и соответствие выбранному порогу | Обычно требует вручную ввести цвета и не анализирует весь интерфейс |
| Средство проверки страницы в браузере | Цвета и структуру уже свёрстанной страницы | Автоматическая проверка не заменяет визуальную оценку и проверку состояний |
| Симулятор цветового зрения | Видимость различий при разных типах цветового восприятия | Не измеряет нормативный контраст и не подтверждает доступность целиком |
Для проверки контрастности текста и фона начинайте с измерения конкретной пары, а затем проверяйте её в контексте страницы. Проверка соответствия цветов WCAG требует учитывать роль и размер элемента, поэтому одного универсального результата для всей палитры недостаточно.
Проверьте макет при разных нарушениях цветового зрения
Включите симуляцию разных типов цветового восприятия в редакторе или отдельном инструменте и пройдите по макету. Используйте чек-лист:
- Сохраняется ли различимость соседних серий на графике?
- Понятно ли, где ошибка, а где успешное состояние, без сравнения оттенков?
- Видны ли ссылки внутри основного текста?
- Можно ли различить важные иконки на фоне и рядом с текстом?
- Остаются ли границы полей заметными при разных режимах симуляции?
- Не исчезают ли выбранное состояние или индикатор фокуса?
- Есть ли подписи, узоры, формы или другие подсказки, дополняющие цвет?
Симуляция помогает обнаружить потенциально неоднозначные места, но не воспроизводит восприятие каждого человека. Рассматривайте её как дополнительную проверку, а не как доказательство полной доступности.
Найдите места, где цвет остаётся единственным носителем смысла
Отметьте типичные ситуации, в которых пользователь должен понять значение только по оттенку:
- Статус ошибки, успеха или предупреждения обозначен лишь цветом.
- Ссылка отличается от обычного текста только цветом.
- На диаграмме данные различаются только цветом линий или сегментов.
- Выбранный пункт меню не имеет дополнительного маркера, формы или подписи.
- Иконка состояния не сопровождается текстом или понятным знаком.
- Граница поля и фон сливаются, из-за чего область ввода трудно найти.
- Состояние фокуса заметно только за счёт оттенка, который теряется на фоне.
Добавьте независимую подсказку: текстовую метку, символ, подчёркивание, форму или устойчивое изменение оформления. Для графиков используйте подписи и различающиеся типы линий или маркеров.
Зафиксируйте результаты и передайте дизайнеру точечные правки
Передавайте не только оценку "не проходит", но и конкретную пару, контекст и ожидаемый результат. Подход выбирайте по масштабу проблемы:
- Точечная правка: подходит, если проблема затрагивает один компонент. Укажите его состояние, цвета переднего плана и фона, результат измерения и требование к изменению.
- Правило для дизайн-системы: уместно, когда одинаковая проблема повторяется в нескольких компонентах. Опишите роль цвета и задайте проверяемую пару для повторного использования.
- Дополнительный визуальный сигнал: используйте, если смысл сейчас передаёт только оттенок. Предложите текст, символ, узор или изменение формы.
- Повторная проверка в браузере: нужна, если макет не учитывает реальные изображения, прозрачность, шрифты или состояния свёрстанной страницы.
В отчёте зафиксируйте экран или компонент, проверенное состояние, значения цветов, используемый критерий, найденную проблему и предложенное решение. После правки повторите измерение и визуальную проверку.
Разбор спорных случаев при проверке цветовой доступности
Достаточно ли проверить только основные цвета палитры?
Нет: важно проверить конкретные пары цветов в реальных компонентах. Один оттенок может быть доступен на светлом фоне и недостаточно контрастен на другом.
Можно ли считать результат онлайн-калькулятора подтверждением доступности?
Он подтверждает результат измерения введённой пары, но не проверяет весь интерфейс. Отдельно оцените состояния, сложные фоны и смысл, передаваемый цветом.
Какой порог контраста использовать для текста?
Для соответствия WCAG 2.2 AA обычному тексту требуется контраст не менее 4,5:1, а крупному - не менее 3:1. Перед оценкой уточните, к какой категории относится текст.
Нужно ли проверять серый текст и отключённые элементы?
Проверьте их в контексте и определите, выполняют ли они значимую функцию. Для отключённых элементов действуют отдельные исключения в критериях WCAG, поэтому не распространяйте на них автоматически общие требования к тексту.
Если контраст соответствует критерию, можно ли не проводить симуляцию?
Нет, это разные проверки: измерение оценивает контраст пары, а симуляция помогает заметить неоднозначность цветовых различий. Для интерфейса полезно выполнить обе.
Что делать, если контраст достаточный, но состояние всё равно трудно заметить?
Добавьте независимый сигнал: подпись, символ, форму или более заметную границу. Проверьте также, сохраняется ли видимость состояния при навигации и в соседних компонентах.
Автор: Андрей Федотов.