Дальтонизм и дизайн: как сделать палитру доступной
Как люди с нарушениями цветового зрения видят палитру, какие сочетания опасны (красный-зелёный), как проверить дизайн и сделать цвета доступными.
Цвет в веб-дизайне · · 2 мин чтения
Нарушения цветового зрения встречаются примерно у 8% мужчин и 0,5% женщин с североевропейским происхождением; чаще всего человеку трудно различать красный и зелёный. Чтобы палитра была доступной, не передавайте смысл только цветом, обеспечьте разницу по светлоте между важными цветами и проверьте дизайн в симуляторе.
Основные типы
| Тип | Что нарушено | Что путается |
|---|---|---|
| Дейтераномалия / дейтеранопия | Восприятие зелёного | Красный ↔ зелёный, коричневый ↔ зелёный |
| Протаномалия / протанопия | Восприятие красного | Красный ↔ зелёный; красный кажется темнее |
| Тританомалия / тританопия | Восприятие синего (редко) | Синий ↔ зелёный, жёлтый ↔ розовый |
| Ахроматопсия | Цвета почти не различаются (очень редко) | Видны только оттенки серого |
Опасные сочетания
- Красный и зелёный — особенно одинаковой светлоты.
- Зелёный и коричневый.
- Синий и фиолетовый.
- Светло-зелёный и жёлтый.
Пять правил доступной палитры
- Дублируйте цвет формой или текстом. Ошибка — красная рамка плюс иконка и сообщение; график — цвет плюс подписи или разные маркеры.
- Разводите цвета по светлоте. Если в оттенках серого два цвета сливаются, их перепутают и люди с дальтонизмом.
- Используйте безопасные пары. Синий и оранжевый различимы при самых частых типах нарушений.
- Соблюдайте контраст текста — см. статью контраст по WCAG.
- Подписывайте цвета. В палитрах и карточках товаров показывайте название цвета, а не только образец.
Как проверить
- Chrome DevTools → Rendering → Emulate vision deficiencies: протанопия, дейтеранопия, тританопия, ахроматопсия.
- Плагины Figma для симуляции цветового зрения.
- Быстрый тест: переведите макет в оттенки серого. Если важные элементы различимы — хороший знак.
Палитра из фото и доступность
Фото часто дают аналоговые палитры с похожей светлотой — красиво, но для статусов и графиков рискованно. Возьмите палитру из генератора, проверьте пары по светлоте (в HSL это третье число) и для смысловых цветов выберите те, что отличаются минимум на 20–30 процентных пунктов.
Частые вопросы
Можно ли использовать красный и зелёный вместе?
Можно, если они заметно отличаются по светлоте и смысл продублирован иконкой или текстом.
Какие цвета различают почти все?
Синий и оранжевый, а также пары с сильным контрастом по светлоте — например, тёмно-синий и светло-жёлтый.
Как сделать доступный график?
Используйте палитру с разной светлотой, подписывайте линии прямо на графике, добавьте маркеры разной формы и штриховку.