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

[Yselia]

Очень интересная статья. Нагуглила, что дальтонизмом страдает примерно 8% мужчин и 0,5–1% женщин, то есть для продуктов с мужской аудиторией почти must have.

Хотелось бы подробнее узнать о применении и результатах. Когда читала, подумала что идея дать возможность настроить пользователю. А когда читала про figma, так поняла что вы рисуете рядом второй макет, чтобы понять правильно ли используете цвета и перерисовать, если плохой контраст? Я вот здесь немного запуталась 🥹

[Kikodoc]

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

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

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

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

[longtolik]

Вообще, не всё так просто.

В прошлой статье был тест. Я его видел как человек с нормальным цветовым зрением. Но у меня лёгкая дейтероанамалия.

То есть, коэффициенты матрицы, по идее, должны различаться от человека к человеку.

У одних может отсутствовать 50% колбочек, у других - 20% и т.д.

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

На эту тему можно написать диссертацию, надеюсь.

[Kikodoc]

О, это ценный комментарий, спасибо. Вы прошли тест как человек с нормальным зрением — при том что у вас дейтероаномалия. Вы только что на себе показали, почему разработчику нельзя доверять собственным глазам.

По матрицам вы правы. Machado 2009 даёт фиксированные степени по типу дефицита — это модель «усреднённого» протанопа, дейтеранопа и так далее, а не конкретного человека. Реальный дефицит у каждого свой: и по проценту работающих колбочек, и по смещению спектра. Одной матрицей это не покрыть.

А про диссертацию вы не шутите зря — тема реально глубокая, и хорошего прикладного инструмента под индивидуальную калибровку пока нет.

[kolomitcelenf]

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

[Kikodoc]

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

[boykovaolivia]

Очень сильная мысль про то, что переносить нужно не механику, а смысл. Это как раз то, что часто упускают при разработке, начинают копировать поведение один в один, хотя у каждой платформы свои ограничения и возможности. В итоге решение получается не просто адаптированным, а местами даже удачнее оригинала. Именно так и должны развиваться хорошие инструменты.