Я объясняла, что такое доступный дизайн, наверное, сто раз. В статьях, на созвонах, в комментариях. И каждый раз ловила одну и ту же реакцию: люди кивают, соглашаются, что это важно, — и через неделю выкатывают серую кнопку на сером фоне.
Дело не в том, что они плохие дизайнеры или им всё равно. Дело в том, что доступность невозможно понять головой. Её можно только почувствовать. А пока проблема не твоя — ты её не чувствуешь.
Я долго думала, как это починить. И в итоге перестала объяснять словами. Я сделала штуку, которая даёт побыть тем самым пользователем — на несколько секунд. Расскажу, как она устроена и почему чек-листы не работают.
Почему лекции про accessibility не меняют поведение
Стандартный способ учить доступности — это требования. WCAG, контраст 4.5:1, alt-тексты, focus states. Всё правильно, всё по делу. И всё мимо.
Требование — это внешнее правило. Ты выполняешь его, потому что надо, а не потому что понимаешь зачем. И при первом же дедлайне оно вылетает первым: «потом доделаем доступность». Потому что оно живёт в голове как пункт чек-листа, а не как живая картинка человека, которому будет плохо.
Я знаю это по медицине. Студенту можно сто раз сказать «у пожилых пациентов снижено зрение, учитывайте это». Он запомнит, ответит на экзамене и забудет. А можно надеть на него очки, имитирующие катаракту, и попросить прочитать инструкцию к препарату. После этого он не забудет уже никогда. Разница между «я знаю» и «я почувствовал» — это вся разница.
В медицине это поняли давно. Студенты учатся на манекенах, которые дышат и у которых падает давление. Отрабатывают на симуляторах, прежде чем подойти к живому человеку. В дизайне такого нет. Мы сразу проектируем для миллионов людей, ни разу не побывав ни одним из них.
Что я сделала
Это интерактивная карточка товара — обычный рюкзак в интернет-магазине. Цена, скидка, выбор цвета, кнопка «в корзину». Выглядит понятно. Понятно — потому что вы смотрите на неё своими глазами.
А рядом — переключатель состояний. Нажимаете «дальтонизм» — и красный бейдж скидки сливается с зелёным «в наличии» в одинаковый грязный цвет. Нажимаете «катаракта» — текст отзывов и выгоды растворяется в жёлтой пелене. «Туннельное зрение» — и вы видите только центр карточки, а скидка и статус в углах исчезают в темноте. «Тремор» — и кнопка «купить» начинает убегать от курсора, попасть невозможно.
Шесть состояний. Каждое — не абстрактная инвалидность из методички, а конкретный человек: каждый двенадцатый мужчина с дальтонизмом, любой из нас в старости с катарактой, человек с глаукомой, с дислексией, с тремором после инсульта.
Под каждым состоянием — короткий разбор. Что именно сломалось, почему, и как это лечится. Не «соблюдайте WCAG», а конкретно: добавь второй признак к цвету, подними контраст до 4.5:1, не раскидывай связанное по углам.
Что видно, когда переключаешь состояния
Самое неожиданное — насколько мало нужно, чтобы интерфейс развалился.
Серый текст #999 на белом фоне выглядит стильно и современно. Включаешь катаракту — и его просто нет. А это контраст 2.8:1, провал даже по минимальному стандарту. Дизайнер выбрал этот серый, потому что в его глазах на его мониторе он читается отлично. Для глаза с помутнённым хрусталиком — пустое место.
Красный и зелёный как «плохо» и «хорошо» — классика, которая кажется очевидной. Включаешь дальтонизм — и оба статуса становятся одинаковыми. Восемь процентов мужчин не понимают, что вы им сообщили. Это каждый двенадцатый покупатель, который не видит, что товар со скидкой или что его выбранный цвет — красный, а не зелёный.
Кнопка в углу, мелкие отступы, важная информация по краям экрана — всё это работает, пока у тебя идеальное зрение и твёрдая рука. Стоит убрать одно из условий, и продуманный интерфейс превращается в полосу препятствий.
Честно про то, чем это не является
Это не точная медицинская модель. Реальный дальтонизм сложнее CSS-фильтра, реальная дислексия — это не просто прыгающие буквы. Я намеренно не претендую на пиксельную точность, и так и написала прямо в инструменте.
Эта штука не заменяет тестирование с настоящими людьми. Ничто не заменит. Единственный способ узнать, работает ли ваш интерфейс для человека с инвалидностью, — позвать этого человека и посмотреть. Симулятор не отменяет исследование, он будит желание его провести.
Его задача — не выдать точную картину, а сломать иллюзию, что «всем видно так же, как мне». После того как кнопка пару раз убежала от вашего курсора, фраза «сделайте кликабельные зоны больше» перестаёт быть пунктом чек-листа и становится понятной телом.
Где попробовать
Симулятор живёт по ссылке — открывается в браузере, ничего ставить не нужно:
https://viktoriafilippova.github.io/perception-simulato/
Поиграйте пару минут. Переключите все состояния, попробуйте «купить» рюкзак с тремором, почитайте разборы. А потом откройте свой текущий проект и посмотрите на него теми же глазами.
В медицине есть правило: не лечи пациента по тому, как он выглядит от двери. Подойди, осмотри, спроси. В дизайне то же самое — твоё представление о пользователе не равно пользователю. Разница только в том, что в дизайне об этом легко забыть, потому что пользователь не сидит перед тобой. Так дай себе побыть им хотя бы три секунды.
А какой режим сломал ваш привычный взгляд сильнее всего? Расскажите в комментариях — мне интересно, что цепляет больше: то, что не видно, или то, во что не попасть.
Комментарии (17)
Assador
03.07.2026 15:15Плюсую. А вот ещё бы написать для разрабов, например, расширение такое для браузера, чтобы он на своём localhost-е мог во всплывающей панельке попереключать эти фильтры, так, чтобы всё это менялось в UI конкретно его проекта… Знаю-знаю. «Вот и займись». Но сейчас занят другим. Да и не писал ни разу расширения.
DmitrySolomennikov
03.07.2026 15:15Очень правильный и показательный проект!
С дальтонизмом все несколько сложнее, их несколько видов, не только красно-зеленый.
Как способ "вправить мозги" - очень здорово сделано, спасибо!
VadimProfii
03.07.2026 15:15Хорошая статья. Посоветовал бы ещё добавить фичу- поле для заполнения плюс 5% яркости и обведенное -2% яркости 1пиксельной рамочкой. На такое смотрю 90% времени на работе и посылаю лучи добра разрабу. Ибо в нашем бюджетном учреждении в наличие у меня моник с полудохлой подсветкой. И, дабы разглядеть эти потуги на дезигн- ложусь башкой на стол. Иначе нифига не видно. Респект. Уважуха. /s
fotopisets
03.07.2026 15:15Спасибо, очень наглядно. Вот только "имитация дальтонизма" как-то не очень корректно отрабатывает. Красный становится жёлто-зелёным (код цвета #c0c93f), а зелёный как раз таки почти серым становится (#6b617b), т.е. визуально очень отличаются цвета. Думал, что у меня что-то с цветовосприятием и позвал жену, она подтвердила. На всякий случай даже глянул по кодам цветов.
nikpnnk
03.07.2026 15:15Сори, не сильно в теме, но из настроек свежих игр помнится, что там есть несколько видов дальтонизма. Не может ли быть, что автор статьи обработал один конкретный?
playermet
03.07.2026 15:15На самой странице текстом подписано: "Красный бейдж скидки и зелёный «в наличии» слились в одинаковый грязно-жёлтый. Выбор цвета рюкзака — красный и зелёный кружки — теперь неразличимы.".
Туннельное зрение тоже с багом, верхний блок на переднем плане оказывается, и отображается поверх симуляции.
alcanoid
03.07.2026 15:15Довольно познавательно, полезно для общего понимания. Инструмент, способный делать такое с любым URL или экраном приложения, имел бы неплохой коммерческий потенциал.
alcanoid
03.07.2026 15:15Вот скажите, что не так? Доступные интерфейсы делать надо? Вроде надо. Проверить доступность как-то надо? Ну вроде бы надо. Альтернативы: искать тестировщиков с особенностями специально под эту задачу или купить подписку на подобный сервис, который покажет, как выглядит ваш сайт или приложение для людей с определёнными ограничениями восприятия. Второй путь, как мне видится, менее тернист.
Iscander_Che
03.07.2026 15:15Хорошая статья и интересный проект.
Я совсем не дизайнер интерфейсов и не владею понятийным апаратом в этой области. Но мне чудится некое несоответствие понятия "доступность" с ограниченными возможностями человека по тем или иным причинам. В ОСях это решается путём введения раздела настроек вроде "Специальные возможности". Вероятно, меня сбивает палкой определение доступности в автоматизированных системах, где рассматривается обезличенный оператор системы, по умолчанию умеющий пользоваться условным пультом управления системой при наличии инструкции по эксплуатации.
Про дизайн же и сочетаемость цветов у меня в голове только одна фраза некого известного дизайнера: "Красный и зелёный цвета не сочетаются? Посмотрите на грядку с клубникой." Хотя для дальтоников всё не так однозначно...
siberiano
03.07.2026 15:15Странно, что на синюю кнопку "Добавить в корзину" все эффекты (кроме тремора) не действуют. То, что вы пишете в заголовке -- не видно кнопку -- этого как раз не происходит от эффектов.
В некоторых программах такое уже есть, например, в QGIS этот эффект можно включить и увидеть, как воспринимают визуализацию на цветовой шкале.
udinhtml
03.07.2026 15:15Не перестану таскать свою пасту в подобные статьи. Это лечится не плагинами, а вторым монитором для дизайнера за тысячу рублей из 2007 года с TN матрицей. Пару месяцев работы с таким монитором и на всю жизнь будет понятен выбор "безболезненных приемов" в виде размерностей текста и кнопок, толщин линий, оттенков, яркости, эффектов и так далее. А когда дизайнер рождается сразу с золотой
ложкоймакбуком в жопе, с эталонным экраном и идеальным зрением, решать эту проблему придется радикальней.P.S. Все эти танцы дизайнеров вокруг важности WCAG и ее заветной галочкой дабл АА, кажутся порой довольно преувеличенными. Автоматизация подбора цветовых контрастов на уровне плагинов и макетов в фигме, всё это очень условно и не дает ни каких гарантий, что на пользовательской стороне все будет читаемым. На WCAG хватает достаточно объективной критики, если углубиться в интернеты. Пока работает текущая версия стандарта, где-то за кулисами разрабатывается уже другая, заделывая дыры и ошибки предыдущей.
Сама идея этого довольно утопична, пытаться решить это только програмно. Это должно быть устройство по типу калибратора монитора, которая будет анализировать яркость и контрастность экрана пользователя, уровень освещенности помещения, площадь цветовых заливок (сюда же и масштаб интерфейса), особенности зрения конкретного человека, потом все эти данные передавать прямо в видеокарту и корректировать програмно значения выводимых на экран цветов. Вот тогда да, вот тут можно быть уверенным, что заданные дизайнеров "веса" контраста по типу WCAG точно сработают, как и задумывалось.
Gradiens
03.07.2026 15:15Даже не надо ждать катаракты. Большинство в 40+ имеет "+" по зрению. А еще часть имеют "-" с молодости, который (если повезет) компенсируется с годами "+"ом, а если не повезет - привет, астигматизм.
И тем удивительнее наблюдать дизайнеров, которые делают мелкие серые буквы. Ребят, вы с другой планеты? Вы никогда не встречали людей в очках? Или думаете, что все смотрят на ваш продукт на больших дизайнерских калиброванных мониторах?
Дизайнеры, не надо "серить". Если это неважно - не пишите вовсе. Если всё-таки важно - напишите большими четкими буквами, а если не помещается - сделайте всплывашками.
Samid777
03.07.2026 15:15Плюс немножко разный бывает. Есть плюс, что нужно очки надеть, и все время носить, или хрусталик не дожимается, или он стал ближе к сетчатке, ну это если со стороны оптики рассуждать, и потому плюс нужен всегда. И эта проблема не у всех. А вот что бывает у многих, это когда все время видим нормально, но чтобы посмотреть на близкий предмет, мы не может дожать хрусталик. Мышцы слабее, хрусталик не такой гибкий. И мы все видим, а когда предмет слишком близко, вынуждены надеть очки для чтения.
А вот серые буквы, или другие объекты на сером фоне… Пытался по старинке пользоваться навигатором, чтобы ходить по нему куда надо, это очень не удобно. Объекты не контрастные. Серозеленые на таком же фоне почти. А там смысл как раз в том, чтобы я не ходил как раньше. Чтобы я нашел, и навигатор меня повел, а я кроме стрелки больше ничего и не видел. Купил бумажную карту, в 21 веке, и по ней получается находить все намного быстрее. С учетом определенных проблем с GPS, которые давали преимущество электронной карте с малоконтрастными объектами, бумажная стала удобнее. Поиск вручную на электронной карте возможен только на местности, которую я хорошо знаю. А там она и не нужна.
Samid777
03.07.2026 15:15Еще интересно будет выглядеть астигматизм. Когда одна строчка наползает на другую. Легкий астигматизм у меня был как только узнал, что имеет место быть сухой глаз, и нужно периодически его увлажнять, но постепенно прошел. Но когда это повторяющаяся вертикальная или горизонтальная линия, это одно. Хотя не совсем ясно как это происходит, ведь нет в глазе призм способных проявить такие аберрации… а вот когда он не совсем линейный в результате нарушения структуру хрусталики, и исправляется только специальной, индивидуально сконструированной линзой, это явление уже интереснее. Думаю что в таком случае человеку будет сложно читать большие тексты. Но все индивидуально.
Torvald3d
03.07.2026 15:15Помимо всего этого отдельно можно добавить кнопку "тёмная тема". Во многих браузерах есть такая фича, а где нет - есть расширение. И несмотря на то, что пользователей этой фичи довольно много, я регулярно вижу как сайты к ней не адаптированы.
netricks
Это полезно.
Kikodoc Автор
спасибо!