Что такое Симулятор цветовой слепоты?

Симулятор цветовой слепоты показывает, как ваши изображения и цветовые палитры выглядят глазами людей с различными типами нарушения цветового зрения. Протестируйте протанопию, дейтеранопию, тританопию и ахроматопсию, чтобы увидеть, какие цвета сливаются при каждом из них.

Симулятор прогоняет каждый пиксель через матрицы из моделей Бреттеля и Мачадо, приближая зрение людей с восемью самыми распространёнными вариантами цветовосприятия. Режим «сравнить все» выкладывает все типы рядом с оригиналом, что быстрее, чем перещёлкивать, когда вы аудитируете макет или график.

Как использовать

  1. Загрузите изображение или введите цвета, которые хотите протестировать на доступность.
  2. Выберите тип зрения и перетаскивайте разделитель, плавно переключаясь между оригиналом и симуляцией. Для лёгких форм аномальной трихромазии используйте ползунок степени.
  3. Сравните все типы симуляции одновременно и скачайте симулированные изображения для документации.

Когда использовать

  • Проверить цветовые «пилюли» статуса в дашборде перед UX-ревью.
  • Убедиться, что красно-зелёные различия в графике остаются читаемыми.
  • Подобрать палитры для публичного отчёта с разной аудиторией.

Результат

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

Частые вопросы

Насколько симуляция близка к реальному зрению?
Матрицы Бреттеля и Мачадо дают рабочее приближение, не точное совпадение. Реальное восприятие зависит ещё от освещения и индивидуальных особенностей, поэтому используйте режим для поиска явных проблем, а не как медицинский эталон.
В чём разница между протанопией и протаномалией?
Протанопия — полное отсутствие красных колбочек, красные сильно темнеют. Протаномалия — ослабленная реакция на красный: картинка похожая, но сдвиг мягче. Та же схема справедлива для дейтера- (зелёный) и трита- (синий).
Какие типы важнее учитывать в дизайне?
Дейтераномалия затрагивает около 5% мужчин и самая распространённая красно-зелёная аномалия. Протанопия и дейтеранопия вместе — около 2%. Синие нарушения и ахроматопсия редки. Для широкой доступности приоритет — дейтера-.
Можно ли проверить отдельные цвета, не загружая изображение?
Да. Откройте вкладку «Цвета» и введите любые hex-коды — каждый показан рядом с тем, как его воспринимают все семь типов зрения, так что можно проверить палитру бренда или набор токенов интерфейса без скриншота. Для целых изображений кнопка «Дальтонизация» идёт дальше и перекрашивает картинку, чтобы люди с дальтонизмом действительно различали оттенки.
Загруженные изображения уходят на сервер?
Нет. Изображение декодируется на canvas внутри вкладки браузера, матрица применяется локально, результат рисуется тут же. Со страницы ничего не отправляется; закрыли вкладку — всё удалилось.

Похожие инструменты