Доступность цвета: контраст и восприятие людьми с дальтонизмом
Кто на самом деле не различает цвета
Полного дальтонизма — когда мир видится в чёрно-белых тонах — почти не бывает. В 99% случаев речь о частичной цветовой слепоте: человек путает конкретные пары оттенков, а не теряет цвет вообще. Распространённость сильно зависит от пола: нарушениями цветовосприятия страдают около 8% мужчин и лишь 0,5% женщин — разница объясняется тем, что гены, отвечающие за красно-зелёное восприятие, находятся в X-хромосоме.
- Дейтеранопия — самый частый тип, проблемы с зелёным спектром;
- Протанопия — сложности с красным, из-за чего красный кажется тёмным и приглушённым;
- Тританопия — редкое нарушение синего и жёлтого, встречается менее чем у 0,01% людей;
- Ахроматопсия — полное отсутствие цветовосприятия, крайне редкая форма.
Для бренда это значит одно: пара «красный — зелёный», которая кажется дизайнеру очевидным сигналом «плохо/хорошо», для миллионов пользователей выглядит как два оттенка серого.
Кейс: как Robinhood столкнулся с проблемой красно-зелёных графиков
Финансовое приложение Robinhood годами показывало рост акций зелёным, падение — красным — стандарт для всей индустрии трейдинга. После жалоб пользователей с дейтеранопией и протанопией компания добавила альтернативную цветовую схему на основе синего и оранжевого, которую можно включить в настройках. Решение не изменило основной интерфейс для большинства, но дало возможность выбора тем, кому исходная палитра буквально не позволяла понять, растёт актив или падает. Это показательный пример: доступность не требует переделки всего бренда — достаточно предусмотреть альтернативный режим восприятия для критичной информации.
Что говорят стандарты о контрасте
Есть чёткие цифры, на которые можно опираться вместо интуиции дизайнера. Веб-консорциум W3C в рекомендациях WCAG 2.1 задаёт минимальные коэффициенты контрастности:
| Тип контента | Уровень AA | Уровень AAA |
|---|---|---|
| Обычный текст | 4.5:1 | 7:1 |
| Крупный текст (от 18pt/24px) | 3:1 | 4.5:1 |
| Элементы интерфейса и графика | 3:1 | — |
Коэффициент считается по яркости, а не по «на глаз похоже — не похоже», поэтому проверять нужно инструментами, а не интуицией.
Почему одного цвета для сигнала мало
Главная ошибка брендинга — использовать цвет как единственный носитель смысла. Красная точка «ошибка», зелёная галочка «успех», жёлтый треугольник «внимание» — если убрать цвет, эти элементы всё равно должны читаться. Правило простое: любой цветовой сигнал должен дублироваться формой, иконкой, текстом или паттерном (штриховка, точки, сплошная линия против пунктира). Именно так устроены качественные инфографики и дашборды — линии на графике различаются не только цветом, но и толщиной или типом.
Как проверить фирменную палитру на доступность
- Прогнать основные цвета бренда через симулятор дальтонизма (Coblis, Color Oracle) и посмотреть, различимы ли они в трёх основных режимах — протанопия, дейтеранопия, тританопия.
- Проверить контраст текста и фона калькулятором (WebAIM Contrast Checker, Stark) на соответствие AA-уровню WCAG.
- Убрать цвет полностью (перевести макет в градации серого) и проверить, остаётся ли интерфейс понятным.
- Добавить дублирующие маркеры — иконки, подписи, текстуры — для всех цветовых сигналов, критичных для действия пользователя.
- Протестировать финальную палитру на реальных пользователях с нарушением цветовосприятия, если аудитория продукта массовая.
Что это значит для фирменного стиля
Логотип и ключевые цвета бренда не обязаны проходить строгий WCAG-контроль — это скорее требование к интерфейсам и коммуникации, а не к айдентике как таковой. Но там, где цвет несёт функциональную нагрузку — кнопки, статусы заказа, легенды на картах, инфографика в отчётах — доступность становится частью гайдлайна не меньше, чем шрифт или отступы. Разумный подход: закладывать проверку на дальтонизм и контраст на этапе утверждения палитры, а не после жалоб пользователей, как это произошло с Robinhood.
Кто на самом деле не различает цвета
Полного дальтонизма — когда мир видится в чёрно-белых тонах — почти не бывает. В 99% случаев речь о частичной цветовой слепоте: человек путает конкретные пары оттенков, а не теряет цвет вообще. Распространённость сильно зависит от пола: нарушениями цветовосприятия страдают около 8% мужчин и лишь 0,5% женщин — разница объясняется тем, что гены, отвечающие за красно-зелёное восприятие, находятся в X-хромосоме.
- Дейтеранопия — самый частый тип, проблемы с зелёным спектром;
- Протанопия — сложности с красным, из-за чего красный кажется тёмным и приглушённым;
- Тританопия — редкое нарушение синего и жёлтого, встречается менее чем у 0,01% людей;
- Ахроматопсия — полное отсутствие цветовосприятия, крайне редкая форма.
Для бренда это значит одно: пара «красный — зелёный», которая кажется дизайнеру очевидным сигналом «плохо/хорошо», для миллионов пользователей выглядит как два оттенка серого.
Кейс: как Robinhood столкнулся с проблемой красно-зелёных графиков
Финансовое приложение Robinhood годами показывало рост акций зелёным, падение — красным — стандарт для всей индустрии трейдинга. После жалоб пользователей с дейтеранопией и протанопией компания добавила альтернативную цветовую схему на основе синего и оранжевого, которую можно включить в настройках. Решение не изменило основной интерфейс для большинства, но дало возможность выбора тем, кому исходная палитра буквально не позволяла понять, растёт актив или падает. Это показательный пример: доступность не требует переделки всего бренда — достаточно предусмотреть альтернативный режим восприятия для критичной информации.
Что говорят стандарты о контрасте
Есть чёткие цифры, на которые можно опираться вместо интуиции дизайнера. Веб-консорциум W3C в рекомендациях WCAG 2.1 задаёт минимальные коэффициенты контрастности:
| Тип контента | Уровень AA | Уровень AAA |
|---|---|---|
| Обычный текст | 4.5:1 | 7:1 |
| Крупный текст (от 18pt/24px) | 3:1 | 4.5:1 |
| Элементы интерфейса и графика | 3:1 | — |
Коэффициент считается по яркости, а не по «на глаз похоже — не похоже», поэтому проверять нужно инструментами, а не интуицией.
Почему одного цвета для сигнала мало
Главная ошибка брендинга — использовать цвет как единственный носитель смысла. Красная точка «ошибка», зелёная галочка «успех», жёлтый треугольник «внимание» — если убрать цвет, эти элементы всё равно должны читаться. Правило простое: любой цветовой сигнал должен дублироваться формой, иконкой, текстом или паттерном (штриховка, точки, сплошная линия против пунктира). Именно так устроены качественные инфографики и дашборды — линии на графике различаются не только цветом, но и толщиной или типом.
Как проверить фирменную палитру на доступность
- Прогнать основные цвета бренда через симулятор дальтонизма (Coblis, Color Oracle) и посмотреть, различимы ли они в трёх основных режимах — протанопия, дейтеранопия, тританопия.
- Проверить контраст текста и фона калькулятором (WebAIM Contrast Checker, Stark) на соответствие AA-уровню WCAG.
- Убрать цвет полностью (перевести макет в градации серого) и проверить, остаётся ли интерфейс понятным.
- Добавить дублирующие маркеры — иконки, подписи, текстуры — для всех цветовых сигналов, критичных для действия пользователя.
- Протестировать финальную палитру на реальных пользователях с нарушением цветовосприятия, если аудитория продукта массовая.
Что это значит для фирменного стиля
Логотип и ключевые цвета бренда не обязаны проходить строгий WCAG-контроль — это скорее требование к интерфейсам и коммуникации, а не к айдентике как таковой. Но там, где цвет несёт функциональную нагрузку — кнопки, статусы заказа, легенды на картах, инфографика в отчётах — доступность становится частью гайдлайна не меньше, чем шрифт или отступы. Разумный подход: закладывать проверку на дальтонизм и контраст на этапе утверждения палитры, а не после жалоб пользователей, как это произошло с Robinhood.
Актуальные статьи
МегаФон, BMW, ВТБ и ещё 240+ компаний. Смотрите как это выглядит в шоуриле:
В наше брендинговое агентство обращаются, чтобы заказать:
