Цвет — это неотъемлемая часть нашей повседневной жизни: он помогает нам ориентироваться, принимать решения и воспринимать информацию. Однако для миллионов людей по всему миру восприятие цвета ограничено из-за дальтонизма.
По данным Colour Blind Awareness, дальтонизм встречается у 1 из 12 мужчин и 1 из 200 женщин. Это значит, что примерно каждый десятый человек испытывает трудности с восприятием цветов. Для дизайнеров, разработчиков и создателей контента цветовая доступность становится необходимостью.
Дальтонизм — нарушение цветового зрения из-за неправильной работы или отсутствия колбочек в сетчатке глаза. Люди с дальтонизмом видят цвета иначе, что может создавать трудности.
L-колбочки (красные), M-колбочки (зелёные) и S-колбочки (синие).
В зависимости от того, какие колбочки не функционируют, выделяют несколько типов дальтонизма:
дейтеранопию (Не отличает зелёный от красного и оранжевого. Мягкие оттенки зелёного и жёлтого могут сливаться.),
протанопию (Красный цвет воспринимается как чёрный, тёмно-зелёный или коричневый.
тританопию (редкие проблемы с синим)
монохроматию (чёрно-белое зрение).
В этой статье мы разберём, как сделать цвета в вашем продукте или контенте доступными для людей с дальтонизмом. Вы узнаете о типах дальтонизма, их особенностях и получите практические советы по созданию удобного и понятного дизайна для всех.
Дейтеранопия
Проблема с фильтрами по цвету на маркетплейсах для людей с дейтеранопией
На маркетплейсах фильтры по цвету товаров представлены в виде цветных кружочков. Это создаёт проблемы для людей с дейтеранопией. Это делает фильтры бесполезными, так как пользователь не может понять, какой цвет выбирает.
Как это можно улучшить:
Добавить текстовые метки:
Рядом с каждым цветным квадратиком указать название цвета (например, "Красный", "Зелёный"). Это сделает фильтры доступными для всех пользователей, включая людей с дальтонизмом.Использовать иконки или узоры:
Добавить уникальные узоры или текстуры к каждому цвету (например, полоски для красного, клетку для зелёного). Это поможет различать цвета даже при их схожести.Увеличить контраст:
Использовать более контрастные оттенки, чтобы даже при нарушении цветовосприятия разница между цветами была заметна.
ОЗОН 
Wildberries
Проблема с графиками для людей с дейтеранопией
Сайт CoinMarketCap использует графики для отображения изменения цен криптовалют. Рост цены обычно обозначается зелёным цветом, а падение — красным.
Для людей с дейтеранопией зелёный и красный цвета могут выглядеть одинаково (например, как коричневый или серый). Это затрудняет понимание, растёт цена или падает.
Как это можно улучшить:
1. Добавить текстовые метки:
Рядом с графиком указать текстовые подсказки (например, "Рост" и "Падение") или использовать иконки (▲/▼).
2. Использовать контрастные цвета:
Выбрать цвета, которые различаются не только оттенком, но и яркостью. Например:
📈 +5% (рост)
📉 -3% (падение)
3. Добавить узоры или текстуры:
Использовать разные узоры для роста и падения (например, полоски для роста, клетку для падения).
Протанопия
Проблемы с логотипом Google Chrome для людей с протанопией
Как это можно улучшить:
Чтобы сделать логотип более доступным, можно:
Изменить оттенки красного и зелёного, чтобы они отличались даже при протанопии (например, сделать красный более оранжевым, а зелёный — более голубым).
Обеспечивайте достаточный контраст
WCAG рекомендует минимум 4.5:1 для текста и 3:1 для иконок.
Проблема с цветовой валидацией пароля для людей с протанопией
Многие формы регистрации или входа используют цветовые индикаторы для отображения статуса валидации пароля: красный — ошибка, зелёный — успех.
При протанопии красный и зелёный могут восприниматься как похожие оттенки или даже сливаться. Например, красный может выглядеть как тёмно-зелёный или коричневый, что делает его практически неотличимым от зелёного. В результате пользователь не сможет понять, допустил ли он ошибку или всё в порядке.
Тританопия: редкий мир без синего
Тританопия — это как смотреть на мир через фильтр, который "стирает" синий цвет. Люди с этим типом дальтонизма путают синий с зелёным, а жёлтый видят как розовый или серый. Однако это нарушение встречается крайне редко — менее чем у 0,01% людей. Несмотря на свою редкость, тританопия напоминает нам, как разнообразно может быть восприятие мира.
Монохроматия: жизнь в чёрно-белом кино
Монохроматия — это полное отсутствие цветового зрения. Люди с этим нарушением видят мир только в оттенках серого, как в старом чёрно-белом фильме. Это одно из самых редких зрительных нарушений: оно встречается у 0,00003% людей. Однако есть уникальные места, например, остров Пингелап в Микронезии, где из-за генетической особенности многие жители видят мир в чёрно-белых тонах.
Почему это произошло на Пингелапе?
Всё началось с одного человека — короля острова, который был носителем гена ахроматопсии (монохроматии). В конце XVIII века на острове произошла катастрофа — цунами, которое оставило в живых лишь небольшое количество людей, включая короля. Из-за изолированности острова и близкородственных браков ген монохроматии стал распространяться среди населения. Сегодня на Пингелапе около 10% жителей видят мир только в оттенках серого, что делает это место уникальным с точки зрения генетики и человеческого опыта.
Почему мы сосредотачиваемся на более распространённых типах дальтонизма?
Хотя каждый случай нарушения цветового зрения уникален и важен, в дизайне и создании доступных решений мы чаще сталкиваемся с протанопией и дейтеранопией, которые затрагивают гораздо больше людей (например, 1 из 12 мужчин). Это не значит, что редкие случаи менее значимы — просто они требуют более специализированных решений.
Не откладывайте доступность на потом! Скачивайте мой гайд по ссылке в Figma Community, чтобы начать тестировать свои интерфейсы уже сегодня. Сделайте ваш дизайн инклюзивным и удобным для каждого!
