Дизайн с учётом дальтонизма: практические приёмы
Продвинутое3 минРедакция Innovialabs
Коротко
Не передавайте смысл только цветом: дублируйте его иконкой, текстом, формой или паттерном и обеспечьте разницу по яркости. Проверяйте макеты в симуляторах протанопии, дейтеранопии и тританопии и в оттенках серого.
Короткий ответ
Главное правило — цвет не должен быть единственным носителем смысла. Это прямо записано в WCAG (критерий 1.4.1 Use of Color). Если статус «ошибка» отличается от «успеха» только красным и зелёным, часть пользователей их не различит. Добавьте второй канал: иконку, текст, форму, паттерн или положение — и интерфейс станет понятен всем.
Типы нарушений цветового зрения
| Тип | Что происходит | Что путается |
|---|---|---|
| Протанопия / протаномалия | нет или ослаблены «красные» колбочки | красный, зелёный, коричневый; красный кажется темнее |
| Дейтеранопия / дейтераномалия | нет или ослаблены «зелёные» колбочки | красный и зелёный, оттенки оливкового и оранжевого |
| Тританопия / тританомалия | нет или ослаблены «синие» колбочки | синий и зелёный, жёлтый и розовый |
| Монохромазия | цвет почти или полностью не воспринимается | всё различается только по яркости |
Красно-зелёные нарушения встречаются чаще остальных, причём у мужчин заметно чаще, чем у женщин. Поэтому пара «красный — зелёный» — самая рискованная в интерфейсе.
Инструменты симуляции
- Chrome DevTools — вкладка Rendering, пункт Emulate vision deficiencies: проверка живой страницы.
- Плагины для Figma — симуляция типов дальтонизма прямо на макете.
- Фильтры ОС — цветовые фильтры в macOS и Windows, в том числе режим оттенков серого.
- Grayscale-тест — переведите экран в ч/б. Если состояния перестали различаться, значит, вы опираетесь только на оттенок.
Симуляция — приблизительная модель, а не точная копия восприятия конкретного человека. Если продукт критичен (медицина, финансы, транспорт), дополняйте её тестированием с реальными пользователями.
Приёмы для состояний интерфейса
- Ошибки и успех: иконка (крестик, галочка) и текст сообщения рядом с полем, а не только красная рамка.
- Ссылки в тексте: подчёркивание или другое начертание, а не только цвет.
- Обязательные поля: явная подпись или символ с расшифровкой.
- Переключатели и табы: активное состояние показывайте формой, толщиной или положением, а не сменой оттенка.
- Контраст: значимые нетекстовые элементы (границы полей, иконки) должны иметь контраст не ниже 3:1 с фоном по WCAG 1.4.11.
Приёмы для графиков
Графики — самое уязвимое место, потому что серии часто кодируют только цветом.
- Прямые подписи у линий и столбцов вместо отдельной легенды.
- Разные маркеры и типы линий: круг, квадрат, треугольник; сплошная, пунктир, штрих-пунктир.
- Паттерны и штриховки для областей и столбцов, если серий больше двух-трёх.
- Разница по яркости: соседние цвета палитры должны отличаться светлотой, а не только тоном.
- Проверенные палитры: последовательные палитры с монотонной яркостью (например, семейство viridis) и категориальные палитры, спроектированные для дальтоников (например, Okabe–Ito).
- Подсветка при наведении и таблица данных рядом с графиком как альтернативный способ чтения.
Для диаграмм «плохо — нормально — хорошо» вместо красно-зелёной шкалы используйте, например, оранжево-синюю.
Чек-лист перед передачей в разработку
- Каждое состояние понятно в оттенках серого.
- Нигде нет пары «красный/зелёный» без второго признака.
- Ссылки отличаются не только цветом.
- Серии графиков подписаны или имеют разные маркеры.
- Макеты прогнаны через симуляцию трёх основных типов.
- Контраст текста и значимых элементов проверен.