Симулятор дальтонизма

Предварительный просмотр проблем цветовой доступности в изображении

Цвет может нести важный смысл в диаграммах, кнопках, картах, панелях и маркетинговых визуалах. Но не все видят различия цветов одинаково. Этот симулятор дальтонизма поможет посмотреть, как может выглядеть изображение при распространённых нарушениях цветового зрения, чтобы вы заметили места, где информация слишком сильно зависит от красно-зелёного или сине-жёлтого контраста.

Симуляция выполняется полностью в вашем браузере. Изображение рисуется на canvas, каждый пиксель преобразуется стандартной матрицей цветов 3×3, а полученный холст отображается и доступен для скачивания как PNG. Ни один сервер не получает ваш скриншот или дизайн, что особенно полезно для неопубликованных интерфейсов, клиентских работ и внутренних панелей.

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

Протанопия имитирует отсутствие или неработоспособность длинноволновых красных колбочек, из-за чего красные цвета могут казаться темнее, а различение красного и зелёного снижается. Дейтеранопия имитирует отсутствие средневолновых зелёных колбочек — ещё одно распространённое красно-зелёное нарушение. Тританопия имитирует отсутствие коротковолновых синих колбочек, влияет на восприятие синего и жёлтого и встречается реже. Вариант «Нормальное» оставляет изображение без изменений, чтобы вы могли быстро сравнить его с преобразованными версиями.

Проектирование не только на основе цвета

Симулятор — это вспомогательное средство проверки, а не полный аудит доступности и не медицинский диагностический инструмент. Используйте его, чтобы найти рискованные сочетания цветов, а затем улучшите дизайн с помощью подписей, значков, узоров, подчёркиваний, более сильного контраста и дублирующих подсказок. Диаграммы не должны полагаться только на линии разных цветов; состояния ошибок должны содержать текст или изменения формы; кнопки должны оставаться узнаваемыми без оттенка. Если смоделированный просмотр по-прежнему передаёт то же сообщение, ваше изображение с большей вероятностью подойдёт более широкой аудитории. Проверяйте важные экраны и в их реальном размере отображения, ведь мелкие подписи, тонкие линии диаграмм и едва заметные оттенки фона могут стать труднее различимыми после преобразования цветов.

Как читать результаты

Красно-зелёные нарушения встречаются гораздо чаще сине-жёлтых, поэтому протанопия и дейтеранопия обычно являются первыми двумя просмотрами для проверки. Переключайтесь между вариантами и сравнивайте оригинал с каждой версией: если две категории, линии или цвета статусов становится трудно различить, дизайн слишком зависит от оттенка. Помните, что это приближения полной дихромазии. Более лёгкие формы цветовой слабости и более редкие состояния, такие как полная цветовая слепота, не охвачены, а реальное восприятие различается у разных людей и при разном освещении. Скачанный PNG сохраняет полное разрешение оригинала и содержит название симуляции в имени файла.