Дизайн для дальтонизма: Полное руководство для разработчиков

29 января 2026•15 мин чтения

Вы разработали панель управления с красными/зелёными индикаторами состояния, но 8% ваших пользователей-мужчин (300 миллионов человек во всём мире) не могут их различить. Ваши диаграммы с цветовым кодированием нечитаемы для пользователей с нарушением цветовосприятия (CVD). Это руководство объясняет типы дальтонизма, как тестировать ваши дизайны с помощью симуляторов и как создавать инклюзивные цветовые палитры, работающие для всех.

Понимание нарушения цветовосприятия

Дальтонизм (точнее: нарушение цветовосприятия) затрагивает примерно:

8% мужчин (1 из 12)
0,5% женщин (1 из 200)
~300 миллионов человек во всём мире

Большинство случаев дальтонизма является наследственным (X-сцепленный рецессивный признак), но также может быть результатом старения, глазных заболеваний или приёма лекарств.

Типы дальтонизма

Тип	Затрагивает	Распространённость	Путаемые цвета
Протанопия	Красные колбочки	1% мужчин	Красный/зелёный, красный/коричневый, красный/оранжевый
Протаномалия	Красные колбочки (слабые)	1% мужчин	Похоже на протанопию (мягче)
Дейтеранопия	Зелёные колбочки	1% мужчин	Зелёный/красный, зелёный/коричневый
Дейтераномалия	Зелёные колбочки (слабые)	5% мужчин	Похоже на дейтеранопию (мягче)
Тританопия	Синие колбочки	0,001%	Синий/зелёный, жёлтый/розовый
Тританомалия	Синие колбочки (слабые)	0,01%	Похоже на тританопию (мягче)
Ахроматопсия	Все колбочки	0,003%	Нет цвета (только оттенки серого)

Красно-зелёный дальтонизм (наиболее распространённый)

Протанопия и дейтеранопия вместе называются "красно-зелёным дальтонизмом" и составляют ~99% всех случаев дальтонизма:

Нормальное зрение:
Красный (#FF0000) и зелёный (#00FF00) явно различимы

Протанопия/Дейтеранопия:
Красный и зелёный выглядят как похожие желтоватые/коричневатые тона
Красный (#FF0000) → выглядит как коричневато-жёлтый
Зелёный (#00FF00) → выглядит как желтоватый
Оранжевый (#FFA500) → выглядит похоже на жёлтый
Коричневый (#8B4513) → трудно отличить от зелёного

Критические путаницы:
- Красная "ошибка" vs зелёный "успех" → оба выглядят желтоватыми
- Красные/зелёные индикаторы состояния → неразличимы
- Диаграммы с цветовым кодированием красный/зелёный → нечитаемы

Сине-жёлтый дальтонизм (редкий)

Тританопия встречается гораздо реже (0,001%), но всё же важна:

Путаницы при тританопии:
Синий (#0000FF) → выглядит как зеленоватый
Жёлтый (#FFFF00) → выглядит как розоватый
Фиолетовый (#800080) → выглядит как тёмно-красный
Зелёный (#00FF00) → выглядит как бледно-синий

Критические путаницы:
- Синие ссылки на белом → труднее увидеть (выглядит зеленоватым)
- Синие/жёлтые предупреждения → неразличимы
- Фиолетовые/синие кнопки → сбивают с толку

Тестирование ваших дизайнов с помощью симуляторов

Использование симулятора дальтонизма

Протестируйте свои дизайны, загружая скриншоты в Симулятор дальтонизма:

Процесс тестирования:

1. Сделайте скриншот вашего интерфейса
2. Загрузите в Симулятор дальтонизма
3. Просмотрите симуляцию для каждого типа CVD:
   - Протанопия (красная слепота)
   - Дейтеранопия (зелёная слепота)
   - Тританопия (синяя слепота)
   - Ахроматопсия (оттенки серого)
4. Определите проблемные области:
   - Индикаторы состояния, которые выглядят идентично
   - Диаграммы, где цвета сливаются
   - Кнопки, которые теряют визуальную иерархию
5. Итерируйте дизайн
6. Повторно тестируйте до решения проблем

Совет: Тестируйте несколько экранов:
- Панель управления с индикаторами состояния
- Диаграммы и визуализации данных
- Формы с состояниями валидации
- Навигацию с активными состояниями

Расширения браузера для тестирования в реальном времени

Тестируйте живые веб-сайты в реальном времени:

Chrome: "Let's get color blind" или "Colorblindly"
Firefox: "Color Vision Deficiency Simulator"

Использование расширений браузера:

1. Установите расширение
2. Перейдите на ваш сайт
3. Включите симуляцию CVD (протанопия, дейтеранопия и т.д.)
4. Взаимодействуйте с UI как обычный пользователь
5. Проверьте, можете ли вы:
   - Различить состояния успеха/ошибки
   - Читать графики и диаграммы
   - Видеть все кнопки и ссылки
   - Понимать информацию с цветовым кодированием

Не прошёл тест, если:
- Два цвета выглядят идентично
- Цвет — единственный индикатор
- Состояния при наведении исчезают
- Индикаторы фокуса невидимы

Распространённые ошибки в дизайне и их исправления

Ошибка 1: Красные/зелёные индикаторы состояния

Проблема: Использование только цвета для указания состояния (красный = ошибка, зелёный = успех).

❌ Не работает для пользователей с красно-зелёным дальтонизмом:

Индикатор состояния:
● Красный (ошибка)    → Выглядит коричневато-жёлтым
● Зелёный (успех) → Выглядит желтоватым
Результат: Оба выглядят почти идентично

Легенда диаграммы:
Красная линия (серия A) → коричневато-жёлтая
Зелёная линия (серия B) → желтоватая
Результат: Невозможно различить линии на диаграмме

Решение: Добавьте индикаторы без использования цвета:

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

1. Иконки + цвет:
   ✗ Красный (ошибка)    → Чёткий визуальный индикатор
   ✓ Зелёный (успех) → Чёткий визуальный индикатор

2. Паттерны + цвет:
   ■ Сплошной красный (ошибка)
   ▨ Полосатый зелёный (успех)

3. Текстовые метки + цвет:
   "Неудача" красным
   "Успех" зелёным

4. Разные символы:
   ⬤ Ошибка (красный круг)
   ▲ Предупреждение (жёлтый треугольник)
   ■ Успех (зелёный квадрат)

5. Позиция + цвет:
   Левая позиция = ошибка
   Правая позиция = успех

Ошибка 2: Легенды диаграмм только с цветом

Проблема: Диаграммы с несколькими цветными линиями/столбцами без альтернативных индикаторов.

❌ Недоступная диаграмма:

Линейная диаграмма с:
- Красной линией (Доход)
- Зелёной линией (Затраты)
- Синей линией (Прибыль)

Для протанопии/дейтеранопии:
- Красная и зелёная линии сливаются
- Невозможно определить, что есть что

Для тританопии:
- Синие и зелёные линии сбивают с толку

Решение: Добавьте отличительные признаки:

✓ Доступная диаграмма:

1. Разные стили линий:
   - Сплошная линия (Доход)
   - Пунктирная линия (Затраты)
   - Точечная линия (Прибыль)

2. Разные символы в точках данных:
   - ● Круглые маркеры (Доход)
   - ▲ Треугольные маркеры (Затраты)
   - ■ Квадратные маркеры (Прибыль)

3. Прямая маркировка:
   - Подписывайте каждую линию в конце
   - Используйте аннотации для ключевых точек

4. Всплывающие подсказки при наведении:
   - Показывайте название серии при наведении
   - Включайте числовые значения

5. Дружественная к дальтоникам палитра:
   - Используйте цвета, которые остаются различимыми
   - Избегайте комбинаций красный/зелёный

Ошибка 3: Тепловые карты с цветовым кодированием

Проблема: Тепловые карты, использующие красно-зелёную шкалу для отображения интенсивности.

❌ Красно-зелёная тепловая карта:

Шкала:
Тёмно-красный (высокий) → Светло-красный → Жёлтый → Светло-зелёный → Тёмно-зелёный (низкий)

Проблема для пользователей с CVD:
Все цвета выглядят как оттенки жёлтого/коричневого
Невозможно определить, высокое или низкое значение

Решение: Используйте дружественные к CVD цветовые шкалы:

✓ Альтернативные шкалы:

1. Сине-оранжевая шкала:
   Тёмно-синий (низкий) → Светло-синий → Белый → Светло-оранжевый → Тёмно-оранжевый (высокий)
   Работает для всех типов CVD

2. Сине-красная шкала (избегайте зелёный):
   Тёмно-синий (низкий) → Светло-синий → Белый → Светло-красный → Тёмно-красный (высокий)
   Красная конечная точка отличима от синей

3. Одноцветная шкала:
   Светло-синий → Тёмно-синий (один цвет, меняющаяся интенсивность)
   Путаница невозможна

4. Добавьте числовые метки:
   Показывайте фактические значения в ячейках
   Цвет становится вторичным индикатором

5. Легенда с числовыми диапазонами:
   0-20: Светло-синий
   21-40: Средне-синий
   41-60: Тёмно-синий
   Пользователи могут читать легенду вместо зависимости от цвета

Ошибка 4: Цветовые пары с низким контрастом

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

Примеры проблемных пар:

Нормальное зрение: Выглядит хорошо
Дейтеранопия: Появляются проблемы

1. Красный текст на зелёном фоне:
   Нормальное: Различимо
   CVD: Жёлтый на желтоватом (низкий контраст)

2. Синие ссылки на фиолетовом фоне:
   Нормальное: Видно
   Тританопия: Зелёный на тёмно-красном (плохой контраст)

3. Оранжевые кнопки на красном фоне:
   Нормальное: Различимо
   Протанопия: Жёлтый на коричневатом (сливается)

4. Светло-зелёный на белом:
   Нормальное: Едва заметно, но видно
   CVD: Почти невидимо (очень низкий контраст)

Решение: Тестируйте контраст для CVD:

Процесс тестирования:

1. Используйте Симулятор дальтонизма для проверки пары
2. Проверьте, что коэффициент контрастности достаточен (4.5:1+)
3. Если цвета сливаются:
   - Увеличьте разницу яркости
   - Добавьте границу или разделитель
   - Используйте альтернативную цветовую пару

Безопасные цветовые пары (работают для всех типов CVD):
- Тёмно-синий на белом
- Чёрный на белом
- Оранжевый на тёмно-синем
- Жёлтый на чёрном
- Розовый на тёмно-сером

Ошибка 5: Валидация форм только с цветом

Проблема: Границы полей ввода становятся красными/зелёными для указания состояния валидации.

❌ Валидация только цветом:

<input class="valid">   <!-- Зелёная граница -->
<input class="invalid"> <!-- Красная граница -->

Проблема: Пользователи с CVD не могут различить валидное от невалидного

Решение: Добавьте несколько индикаторов:

✓ Доступная валидация:

<input class="valid" aria-invalid="false">
  ✓ Валидный ввод
</input>

<input class="invalid" aria-invalid="true">
  ✗ Неправильный формат email
</input>

Функции:
1. Иконка (✓ или ✗)
2. Текстовое сообщение
3. Атрибут aria-invalid (для программ чтения с экрана)
4. Цвет границы (дополнительный)
5. Опционально: изменение цвета фона

Несколько избыточных индикаторов гарантируют,
что все пользователи понимают состояние

Создание доступных цветовых палитр

Принципы выбора дружественных к CVD цветов

Избегайте комбинаций красный-зелёный: Никогда не полагайтесь только на красный vs зелёный
Используйте достаточный контраст: Убедитесь, что цвета остаются различимыми в симуляции CVD
Включайте синий и оранжевый: Они различимы во всех типах CVD
Варьируйте яркость: Даже если оттенки похожи, разница в яркости помогает
Тестируйте с симуляторами: Всегда проверяйте с реальными симуляциями CVD

Тестирование вашей палитры

Контрольный список тестирования палитры:

1. Загрузите образец палитры в Симулятор дальтонизма
2. Проверьте каждый тип CVD:
   ✓ Протанопия: Все цвета различимы?
   ✓ Дейтеранопия: Все цвета различимы?
   ✓ Тританопия: Все цвета различимы?
   ✓ Ахроматопсия: Достаточные различия в яркости?

3. Проверьте распространённые комбинации:
   - Текст на каждом цвете фона
   - Соседние цвета на диаграммах
   - Состояния при наведении/активности

4. Задокументируйте безопасные комбинации:
   Создайте руководство по стилю, показывающее какие цвета
   можно использовать вместе

5. Протестируйте граничные случаи:
   - Маленькие элементы (иконки, точки)
   - Тонкие линии (линии диаграмм)
   - Большие области (фоны, заливки)

Паттерны дизайна для инклюзивных интерфейсов

Паттерн 1: Система состояний с несколькими индикаторами

Отображение состояния с избыточными индикаторами:

<!-- Состояние ошибки -->
<div class="status status-error">
  <svg class="icon">
    <circle /> <!-- Красный круг -->
    <line />   <!-- Крестик внутри -->
  </svg>
  <span class="status-label">Ошибка</span>
  <span class="status-count">3 неудачи</span>
</div>

<!-- Состояние успеха -->
<div class="status status-success">
  <svg class="icon">
    <polygon /> <!-- Зелёный квадрат -->
    <path />    <!-- Галочка внутри -->
  </svg>
  <span class="status-label">Успех</span>
  <span class="status-count">47 пройдено</span>
</div>

Индикаторы:
1. Форма (круг vs квадрат)
2. Иконка (X vs галочка)
3. Цвет (красный vs зелёный)
4. Текстовая метка
5. Числовой счётчик

Пользователи с CVD могут полагаться на форму/иконку/текст,
а не только на цвет

Паттерн 2: Доступный дизайн диаграмм

Функции диаграммы для доступности CVD:

1. Стили линий:
   - Серия A: Сплошная линия, ● круглые маркеры
   - Серия B: Пунктирная линия, ▲ треугольные маркеры
   - Серия C: Точечная линия, ■ квадратные маркеры

2. Прямая маркировка:
   - Подписывайте каждую линию в конечной точке
   - Избегайте отдельной легенды, когда возможно

3. Всплывающие подсказки при наведении:
   - Показывайте название серии
   - Отображайте точное значение
   - Выделяйте активную серию

4. Паттерны заливки (столбчатые диаграммы):
   - Столбец A: Сплошная заливка
   - Столбец B: Полосатый паттерн
   - Столбец C: Точечный паттерн

5. Интерактивная легенда:
   - Клик для переключения видимости серии
   - Наведение для выделения серии на диаграмме
   - Используйте доступные цвета

Паттерн 3: Лучшие практики дизайна форм

Доступная валидация форм:

<!-- Невалидный ввод -->
<div class="form-field form-field-error">
  <label for="email">Email</label>
  <input
    id="email"
    type="email"
    aria-invalid="true"
    aria-describedby="email-error"
  />
  <div id="email-error" class="error-message">
    <svg aria-hidden="true">
      <!-- Иконка ошибки -->
    </svg>
    <span>Пожалуйста, введите корректный email адрес</span>
  </div>
</div>

CSS:
.form-field-error input {
  border: 2px solid #DC2626; /* Красная граница */
  border-left: 4px solid #DC2626; /* Более толстая левая граница */
  background: #FEF2F2; /* Светло-красный оттенок */
}

.error-message {
  color: #991B1B; /* Тёмно-красный текст */
  font-weight: 600; /* Жирный текст */
}

Несколько индикаторов:
1. Иконка
2. Текстовое сообщение
3. Цвет и стиль границы
4. Оттенок фона
5. Атрибут aria-invalid
6. Жирный шрифт

Паттерн 4: Различие ссылок

Проблема: Синие ссылки на чёрном тексте - одного цвета недостаточно.

✓ Доступные стили ссылок:

a {
  color: #0066CC; /* Синий */
  text-decoration: underline; /* Всегда подчёркнуто */
  font-weight: 500; /* Немного жирнее основного текста */
}

a:hover {
  text-decoration: underline;
  background: #F0F9FF; /* Светло-синий фон */
  text-decoration-thickness: 2px; /* Более толстое подчёркивание */
}

a:focus {
  outline: 2px solid #0066CC;
  outline-offset: 2px;
  border-radius: 2px;
}

Функции:
1. Цвет (синий)
2. Подчёркивание (всегда видимо)
3. Вес шрифта (едва заметное различие)
4. Изменение фона при наведении
5. Индикатор фокуса

Никогда не полагайтесь только на цвет для ссылок

Краткое описание процесса тестирования

Фаза дизайна

Выберите дружественную к CVD палитру: Начните с доступных цветов
Симулируйте рано: Загружайте макеты в Симулятор дальтонизма
Добавьте избыточные индикаторы: Иконки, паттерны, текст, формы
Документируйте паттерны: Создайте переиспользуемые доступные компоненты

Фаза разработки

Реализуйте паттерны с несколькими индикаторами: Никогда не полагайтесь только на цвет
Используйте семантический HTML: aria-invalid, метки, сообщения об ошибках
Тестируйте с расширениями браузера: Проверяйте живой сайт с симуляцией CVD
Проверяйте контраст: Используйте Проверку контрастности цветов для коэффициентов

Фаза QA

Тестируйте все типы CVD: Протанопия, дейтеранопия, тританопия, ахроматопсия
Тестируйте критические потоки: Формы, панели управления, диаграммы, индикаторы состояния
Пользовательское тестирование: По возможности, тестируйте с реальными пользователями с дальтонизмом
Документируйте исключения: Отмечайте любые элементы только с цветом (объясните почему)

Краткая справка: Безопасные для CVD цвета

Вариант использования	Цвет	Hex	Почему безопасен
Основное действие	Синий	#0066CC	Различим во всех типах CVD
Предупреждение	Оранжевый	#FF9900	Отличается от синего/красного
Успех (избегайте зелёный)	Бирюзовый	#009999	Синеватый, не путается с красным
Ошибка	Тёмно-красный	#CC0000	Высокий контраст (использовать с иконкой)
Вторичный	Фиолетовый	#7C3AED	Различимый оттенок
Нейтральный	Серый	#6B7280	Нет путаницы оттенков

Часто задаваемые вопросы

Могу ли я использовать зелёный в моём дизайне?

Да, но:

Никогда не используйте зелёный + красный как единственный способ различения элементов
Всегда добавляйте индикаторы без использования цвета (иконки, текст, паттерны)
Тестируйте с симуляцией CVD, чтобы убедиться, что зелёный не сливается с другими цветами
Рассмотрите использование бирюзового/голубого вместо чистого зелёного (более дружественно к CVD)

Нужно ли мне поддерживать все типы CVD?

Порядок приоритетов:

Протанопия/Дейтеранопия (красно-зелёный): 99% случаев CVD - всегда поддерживайте
Тританопия (сине-жёлтый): Очень редко (0,001%), но легко поддержать
Ахроматопсия (оттенки серого): Крайне редко, но хороший UX для всех

Если вы разработаете дизайн для красно-зелёного дальтонизма (наиболее распространённый), вы поможете 99% пользователей с CVD.

Достаточно ли соответствия WCAG?

Коэффициенты контрастности WCAG необходимы, но недостаточны:

WCAG требует контраст 4.5:1 - проверяет разницу яркости
Дружественный к CVD дизайн требует различий в оттенках, остающихся различимыми в симуляции CVD
Два цвета могут иметь отличный контраст (4.5:1+), но всё равно выглядеть идентично для пользователей с CVD
Всегда тестируйте с симулятором CVD в дополнение к проверке контрастности

Резюме

Дальтонизм затрагивает 8% мужчин (300 млн человек во всём мире), при этом красно-зелёный дальтонизм является наиболее распространённым. Никогда не полагайтесь только на цвет - всегда добавляйте иконки, паттерны, текстовые метки или формы. Тестируйте дизайны с симуляторами дальтонизма (протанопия, дейтеранопия, тританопия). Используйте дружественные к CVD палитры: синий и оранжевый работают универсально, избегайте комбинаций красный-зелёный. Добавляйте несколько избыточных индикаторов для состояний, валидации и визуализации данных.

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

бесплатные инструменты для веб-разработчиков