Как пользоваться: Симулятор дальтонизма
- Перетащите изображение, нажмите, чтобы выбрать файл, или вставьте скриншот комбинацией Ctrl+V.
- Сравните исходное изображение с симулированными версиями для каждого типа нарушения цветовосприятия.
- Ищите информацию, которая исчезает: красно-зелёные статусные цвета, серии на графиках, состояния ошибок.
- Переключитесь на Палитру, чтобы проверить фирменные или графические цвета и получить предупреждения о парах, которые становятся неразличимы.
Что такое дальтонизм?
Нарушение цветовосприятия (CVD) встречается примерно у 1 из 12 мужчин и 1 из 200 женщин северноевропейского происхождения. Большинство людей с CVD видят цвета, но в более узком диапазоне. Распространённые типы:
| Тип | Поражённые колбочки | Эффект |
|---|---|---|
| Дейтераномалия / дейтеранопия | Зелёные (M) | Красный и зелёный сложно различить — самая распространённая форма |
| Протаномалия / протанопия | Красные (L) | Красные выглядят темнее и сливаются с зелёными и коричневыми |
| Тританомалия / тританопия | Синие (S) | Путаница синего с зелёным и жёлтого с розовым — встречается редко |
| Ахроматопсия | Все | Отсутствие цветовосприятия — очень редко, но полезно для проверки в оттенках серого |
«-anopia» означает, что тип колбочек отсутствует; «-anomaly» означает, что их чувствительность сдвинута, и это более мягкая форма.
Как работает симуляция
Каждый пиксель переводится в линейный RGB и умножается на матрицы цветового зрения из работы Machado, Oliveira и Fernandes (2009), широко используемой физиологической модели. Для типов «-anopia» применяется полная степень выраженности, для типов «-anomaly» — 60%. Для ахроматопсии используется относительная яркость. Всё выполняется на canvas в вашем браузере; большие изображения для скорости масштабируются до ширины 900 px.
Дизайн с учётом дальтонизма
- Не опирайтесь только на цвет (WCAG 1.4.1): добавляйте иконки, подписи, паттерны или текст к статусным сообщениям, ошибкам в формах и сериям на графиках.
- Меняйте светлоту, а не только оттенок: тёмно-зелёный и светло-красный останутся различимыми почти для всех. Конвертер OKLCH упрощает управление светлотой.
- Используйте палитры для графиков, безопасные для дальтоников, например синий/оранжевый вместо красного/зелёного.
- Сохраняйте высокий контраст текста — проверяйте пары в Проверке контраста.
Симуляции передают усреднённое восприятие; у каждого человека оно индивидуально, поэтому тестирование с реальными пользователями всё равно очень полезно.
Также ищут как: cvd симулятор.
Инструменты, которые хорошо сочетаются с Симулятор дальтонизма
- APCA калькулятор контраста — Рассчитайте светлотный контраст APCA (Lc) между текстом и фоном, узнайте, для каких случаев подходит пара цветов, и сравните результат с классическим коэффициентом WCAG 2.
- Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
- Генератор цветов Tailwind — Вставьте один цвет бренда и получите сбалансированную шкалу из 11 оттенков (от 50 до 950), построенную в OKLCH, с подсказками контраста и экспортом для Tailwind v3, v4, CSS и SCSS.
- Сжатие изображений — Уменьшите фото и графику до 90% без заметной потери качества — всё зависит от изображения и настроек.