Симулятор дальтонизма для сайта, Figma и Chrome: как девять чисел из статьи 2009 года разошлись по четырём

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

Не «обесцветить», а пересчитать пиксели

В основе инструмента — матрицы из работы Мачадо, Оливейры и Фернандеса. Они пересчитывают RGB-цвет так, чтобы смоделировать восприятие при разных вариантах и тяжести нарушений цветового зрения. Это не декоративный фильтр в духе «давайте сделаем экран серее», а физиологическая модель отклика колбочек.

Практический смысл проще академической формулировки. Интерфейс может выглядеть безупречно для автора макета и разваливаться для человека, который различает цвета иначе. Причём проверка только на полной дейтеранопии — тоже удобный, но ленивый костыль: частичная потеря восприятия встречается чаще и даёт другой результат. Экран, который на 100% превращается в кашу, на меньшей интенсивности может казаться терпимым — пока пользователь не пытается в спешке отличить «доставлено» от «отменено».

В веб-версии матрица применяется через SVG-фильтр feColorMatrix: браузер сам пересчитывает пиксели. Но здесь есть нюанс, который обычно теряется между красивым демо и реальной отладкой. По умолчанию фильтр работает в linearRGB, а не в привычном sRGB. Картинка будет близкой, но не обязана совпасть с результатом другого алгоритма пиксель в пиксель. Сверять скриншоты как бухгалтерскую отчётность тут бессмысленно.

Два рендера вместо одной «магии»

Для загруженных изображений автор материала выбрала другой путь: canvas, чтение пикселей, пересчёт по матрице и запись результата обратно. Это тот самый скучный цикл, который не пытается быть умнее задачи. Зато цветовой путь остаётся предсказуемым.

В одном симуляторе таким образом сосуществуют два режима: SVG-фильтр для живых сценариев и пиксельная обработка для загруженных макетов. Результаты немного различаются — не потому, что один из них «сломался», а из-за разной обработки цвета. Хорошее решение здесь не замазывать расхождение усреднённым фильтром, а явно понимать, где и почему оно возникает.

Для продуктовой команды это важнее, чем очередной бейджик accessibility-ready. Симулятор показывает риск, но не заменяет дизайн-решение: цвет не должен быть единственным носителем смысла. Если состояние заказа, ошибка формы или линия на графике различимы только по оттенку, проблема уже не в тестовом инструменте.

Figma не даёт перекрасить холст на лету

С Figma всё ожидаемо менее гладко. Плагин, как описывает Хабр, не может живьём перекрасить холст: API этого не позволяет. Поэтому путь получается обходным, но рабочим: дизайнер выделяет фрейм, плагин экспортирует его в PNG, обрабатывает пиксели и добавляет симуляцию рядом с оригиналом — с подписью вроде «Дейтеранопия 100%».

Такое ограничение превращает проверку не в эффектный свайп «до/после», а в артефакт для хендофа. Его можно оставить в макете, показать разработчику и обсудить конкретную поломку до того, как она уедет в релиз. Не самый нарядный онбординг, зато меньше шансов, что пользователю предложат угадывать критичный статус по оттенкам горчицы.