Дизайн интерфейса при дальтонизме: передавайте смысл не только цветом

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

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

Найдите решения, которые сейчас зависят от цвета

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

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

Сначала сделайте явным смысл. Оставьте время видимым в каждом варианте. Выбранный вариант дополните галочкой и словом «Выбрано». Возле времени, на которое нельзя записаться, напишите «Недоступно». Рядом с неверно заполненным полем поясните: «Введите адрес электронной почты в формате name@example.com». Цвет будет усиливать сообщения, но перестанет быть единственным носителем информации.

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

Дайте каждому состоянию понятный признак

Дополнительный признак должен быстро и последовательно объяснять состояние. Для записи полезны слова: разница между «Выбрано» и «Подтверждено» существенна. Галочка подходит для обоих случаев, но одинаковый символ без подписи может создать впечатление, что выбор времени уже завершил запись.

Значение	Слабое решение	Более понятное решение для этого сценария
Время можно выбрать	Только зелёный фон	Читаемое время и «Доступно», заметная граница элемента управления
Время выбрано	Только синий фон	Галочка, «Выбрано» и то же время в сводке записи
Время нельзя выбрать	Только бледный серый текст	«Недоступно» рядом со временем; оформление не обещает запись по нажатию
Данные нужно исправить	Только красная рамка	Конкретное сообщение рядом с полем и узнаваемый признак ошибки
Запись завершена	Только зелёный блок	«Запись подтверждена», её подробности и полезное следующее действие

Подписывать каждую декоративную фигуру не нужно. Явные признаки важны там, где человек должен понять состояние или выполнить действие. Если слово «Доступно» перегружает длинный список, его роль может выполнять ясно названный раздел со свободным временем. Исключения — например, недоступный или выбранный вариант — должны оставаться понятными в своём контексте.

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

Проверяйте контраст отдельно от цветовых различий

Два цвета могут различаться по тону, но давать слишком слабый контраст по светлоте для текста или важного индикатора. И наоборот: высокий контраст сам по себе не объясняет значение состояния. Задавайте два вопроса: видна ли информация и понятно ли, что она означает?

WCAG 2.2 устанавливает минимальный контраст текста 4,5:1 для обычного текста и 3:1 для текста, соответствующего критериям крупного, с оговорёнными исключениями. Небольшие подписи времени и статуса следует проверять как обычный текст. Оценивайте действительную пару «текст — фон» в каждом состоянии.

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

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

Объясняйте ошибки и делайте ссылки узнаваемыми

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

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

Для ссылки «Правила отмены записи» внутри поясняющего текста подчёркивание — простой способ отличить её от обычных слов. Ссылка должна быть узнаваема до наведения: на сенсорном экране нельзя полагаться на состояние под курсором. Название объясняет, что откроется, а не отсылает к цвету надписи.

Так же составляйте сообщения о результате. «Вы записаны на вторник, 10:30» сообщает конкретный итог. Цветная метка «Успешно» даёт меньше полезной информации. Если подтверждение ещё ожидается, так и напишите: оформление не должно обещать действие, которое система пока не завершила.

Спроектируйте весь сценарий записи в Pixso

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

В нашем примере 09:00 доступно, 10:30 выбрано, а 11:00 недоступно. В сводке повторяется 10:30; подтверждение описывает ту же запись. Эти повторы помогают человеку узнать результат своего выбора, а команде — заметить несоответствия при проверке.

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

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

Пройдите задачу с цветовыми подсказками и без них

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

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

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

В англоязычном руководстве по инструментам проверки доступности объясняется, как проверка контраста на этапе дизайна дополняется тестированием в браузере. Используйте в этих проверках весь сценарий записи, чтобы результат оставался связан с реальной задачей.

Сохраните пользу цвета, убрав зависимость от него

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

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

Спроектируйте понятные состояния интерфейса в Pixso