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