Дизайн для дальтоников: полное руководство

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

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

Почему это важно

Нарушение цветового зрения есть примерно у 8% мужчин и 0,5% женщин. На практике это значит:

В команде из 20 мужчин примерно у 1–2 будет нарушение
В аудитории в миллион человек около 80 000 мужчин будут иметь ту или иную красно-зелёную форму
Смешение красного и зелёного — самая частая форма, около 98% случаев

Дизайн с учётом дальтонизма всё чаще становится и правовым требованием. Руководство по доступности веб-контента (WCAG) 2.1 прямо требует, чтобы информация, передаваемая цветом, была доступна и иными средствами.

Золотое правило: никогда не полагайтесь только на цвет

Главный принцип дизайна, дружественного к дальтоникам, прост:

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

Всегда дополняйте цвет хотя бы одной другой визуальной подсказкой:

Текстовые подписи — прямо называйте категорию или статус
Иконки и символы — используйте формы, не зависящие от цвета
Штриховка и текстуры — особенно полезны на графиках и картах
Положение — используйте пространственное расположение для передачи иерархии
Форма — разные фигуры для разных категорий данных

Избегайте проблемных сочетаний

Некоторые пары цветов особенно трудны для людей с красно-зелёным нарушением:

Рискованные сочетания

Избегайте	Почему	Альтернатива
Красный на зелёном	Полностью неразличим при дейтеранопии	Синий на оранжевом
Зелёный на красном	Та же проблема	Жёлтый на синем
Красная и зелёная кнопки	Не отличить «пройдено» от «не пройдено»	Добавьте иконки (✓/✗) и текст
Красный и чёрный текст	Красный может выглядеть тёмно-серым	Используйте жирность или подчёркивание
Розовый и серый	При протанопии выглядят одинаково	Используйте синий и серый

Более безопасные сочетания

Для пользователей с красно-зелёным нарушением синий и оранжевый — самая надёжная доступная пара: эти оттенки остаются различимыми практически при всех видах нарушения.

Другие безопасные пары:

Синий + жёлтый (отлично и для красно-зелёных, и для сине-жёлтых нарушений)
Синий + белый
Чёрный + жёлтый (максимальный контраст)
Фиолетовый + жёлтый

Графики, доступные дальтоникам

Визуализация данных — область, где дальтонизм сказывается сильнее всего. Типичные ошибки:

Красный/зелёный для положительных и отрицательных значений
Тепловые карты с градиентом красный–жёлтый–зелёный
Разделение нескольких рядов данных только цветом

Решения для графиков

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

2. Подписывайте данные напрямую Вместо цветной легенды подписывайте ряды прямо на графике. Это помогает всем, а не только дальтоникам.

3. Используйте палитру, дружественную к нарушениям цветовосприятия Рекомендуемые доступные палитры:

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

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

Формы и состояния интерфейса

Формы особенно уязвимы, потому что индикаторы состояния обычно завязаны на цвет:

Типичные проблемы

Красная рамка у некорректных полей, зелёная — у корректных
«Статус: активен» показан только зелёным текстом
Сообщения об ошибке показаны только красным

Доступные альтернативы

Состояния валидации:

❌ Не делайте: красная рамка = ошибка, зелёная = успех
✅ Делайте:    иконка ошибки (⚠) + красная рамка + поясняющий текст ошибки
               иконка успеха (✓) + зелёная рамка + текст «Всё верно!»

Индикаторы статуса:

❌ Не делайте: • (зелёная точка) = в сети, • (красная точка) = не в сети
✅ Делайте:    ✓ В сети, ✗ Не в сети (или разные фигуры: ●/○)

Кнопки и призывы к действию:

❌ Не делайте: зелёная «Подтвердить» / красная «Отмена» — при протанопии выглядят одинаково
✅ Делайте:    понятные подписи + достаточный контраст + иконки

Требования к контрасту (WCAG)

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

Требование	Минимальное соотношение	Контекст
WCAG AA	4,5:1	Обычный текст (меньше 18pt)
WCAG AA	3,0:1	Крупный текст (от 18pt или 14pt полужирный)
WCAG AAA	7,0:1	Повышенный уровень — обычный текст
WCAG AAA	4,5:1	Повышенный уровень — крупный текст

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

Как тестировать дизайн

Всегда проверяйте макеты несколькими способами:

1. Симулятор нарушения цветового зрения

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

2. Инструменты разработчика в браузере

В Chrome и Firefox есть встроенная симуляция:

Chrome: DevTools → Rendering → Emulate vision deficiencies
Firefox: DevTools → Accessibility → Simulate

3. Проверка контраста

Прогоните каждую пару «текст/фон» через инструмент проверки контраста, который также показывает симуляцию.

4. Живая обратная связь

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

Советы по платформам

Веб-дизайн

Добавляйте атрибуты aria-label и title к элементам с цветовой кодировкой
Не оформляйте состояние :focus только цветом
Следите, чтобы состояния ошибок в формах включали иконку и текст, а не только смену цвета

Данные и исследования

Сделайте палитру Окабэ–Ито значением по умолчанию в R, Python (matplotlib) или любой библиотеке графиков
Всегда добавляйте легенду с текстовыми подписями, даже если цвета кажутся очевидными

Мобильные приложения

iOS и Android поддерживают симуляцию в настройках доступности
Проверяйте приложение с включёнными настройками перед каждым крупным релизом

Печать

Не полагайтесь на метафору светофора «красный/зелёный» для статуса
Убедитесь, что инфографика остаётся понятной при чёрно-белом копировании

Полезные инструменты

Инструмент	Назначение
Симулятор ColorVision	Показывает, как любое изображение выглядит при нарушении цветового зрения
Проверка контраста	Проверка соответствия WCAG с предпросмотром симуляции
Colour Oracle (настольное приложение)	Общесистемный слой симуляции
Who Can Use	Моделирует контраст для разных нарушений
Плагин доступности для Figma	Проверки в реальном времени в Figma

Частые вопросы

Значит ли дружественный к дальтоникам дизайн отказ от цвета? Нет. Цвет можно использовать широко — он просто не должен быть единственным способом передачи информации. Добавляйте вторичные подсказки (текст, иконки, штриховку) рядом с цветом.

Достаточно ли учитывать только красно-зелёные нарушения? На них приходится около 98% случаев, но дизайн с их учётом обычно помогает и людям с другими видами. Самый инклюзивный подход — проверить все виды в симуляторе.

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

Какой бесплатный инструмент лучше для проверки доступности по цвету? Симулятор и проверка контраста на этом сайте полностью бесплатны. Для Figma бесплатный плагин «Able» даёт проверку контраста в реальном времени.

Короткий ответ