Как сделать интерфейс доступным для людей с нарушениями цветового зрения
Интерфейсы для широкой аудитории часто проектируют по формальным правилам, не проверяя, как они работают в реальных условиях. Такой подход приводит к ошибкам, которые становятся заметны только на этапе эксплуатации, но легко устраняются при правильном тестировании.
Сегодня объясняю, почему специалистам, создающим продукты для широкой аудитории — от дизайнеров до инженеров, — важно учитывать пользователей с нарушениями зрения и выходить за рамки формального ТЗ при проектировании интерфейсов. Игнорирование этой части аудитории приводит к ошибкам, которые легко избежать, если изначально мыслить шире рамок технического задания. Также поделюсь несколькими инструментами, которые могут помочь в этой работе.
Почему доступность интерфейсов — это вопрос бизнеса, а не только дизайна
Для бизнеса доступность интерфейсов — это не про «социальную ответственность», а про прямые операционные и финансовые риски. Если пользователь не может быстро понять, какую кнопку нажать, он дольше взаимодействует с устройством, чаще ошибается или вовсе прерывает операцию. В случае банкоматов и терминалов это приводит к очередям, нагрузке на службу поддержки, снижению количества успешно завершённых операций и росту негатива к бренду.
Отдельный риск — юридический и регуляторный. Интерфейсы, формально соответствующие требованиям, но неудобные для части пользователей, всё чаще становятся предметом жалоб и проверок. В итоге бизнес несёт дополнительные затраты на доработку уже внедрённых решений, тогда как учёт доступности на этапе проектирования обходится значительно дешевле.
Рассылка: как вести бизнес в России
Пять полезных писем пришлем сразу после подписки. В них — бизнес‑идеи, готовые промпты для нейросетей, советы, как выбрать налоговый режим и получать пассивный доход
Ограничения банкоматов. Технические и не только
Банкоматы и терминалы относятся к оборудованию, которое может работать много лет подряд, поэтому нередко встречаются устройства со старыми типами дисплеев и слабой цветопередачей, заметно уступающей современным мониторам. К ограничениям таких экранов относятся не только низкая контрастность, но и небольшое разрешение (800×600 или 1024×768), медленный отклик сенсорной панели, невысокая производительность самого устройства и требования к формату отображаемых изображений. Дополнительно качество восприятия ухудшается, если терминал установлен в неудачном месте — например, под прямыми солнечными лучами.
К менее очевидным недостаткам старых дисплеев относится ограниченный угол обзора — обычно порядка 30–50 градусов. Если пользователь смотрит на экран сбоку или сверху, оттенки могут искажаться или даже полностью инвертироваться. Поэтому при проектировании интерфейса важно учитывать физические различия людей: разный рост, особенности зрения, а также возможные ограничения опорно‑двигательного аппарата, влияющие на положение перед устройством.
Помимо технических нюансов существует и нормативная база. Интерфейсы банкоматов разрабатываются с учётом требований ТКП 064‑2012 (07040) — технического кодекса, утверждённого Национальным банком Республики Беларусь. В документе прописаны правила, допустимые решения и ограничения для проектировщиков. На практике часть требований выглядит разумной, но некоторые положения уже не соответствуют реалиям — например, жёстко заданный минимальный размер шрифта в миллиметрах.
Есть и обязательные, но дискуссионные нормы. В частности, подтверждающие действия должны быть отмечены зелёным цветом, а функции отмены — красным. Причины спорности понятны: значительная часть пользователей сталкивается с нарушениями цветоразличения, и чаще всего люди хуже всего различают именно красный и зелёный. Тем не менее, для прохождения сертификации интерфейса правило необходимо соблюдать. Разберёмся в теме подробнее.
Красноречивая статистика и цветовое восприятие
В Беларуси, по разным оценкам, не менее 400 000 человек сталкиваются с нарушениями цветового восприятия и испытывают трудности при различении красных и зелёных оттенков. Эта особенность встречается у 8–10% мужчин и примерно у 2% женщин. В центральной зоне сетчатки находятся колбочки — рецепторы, отвечающие за восприятие цвета. Они содержат три типа пигментов, реагирующих на красный, зелёный и синий спектры. У части людей количество или характеристики этих пигментов отличаются от нормы, что и приводит к снижению способности различать определённые цвета.
Дейтераномалия или отклонения по зеленым оттенкам. При дейтераномалии восприятие зелёного цвета ослаблено, хотя человек продолжает его различать. Это наиболее распространённый тип нарушения цветоощущения, которым страдают примерно 2,7% людей, в основном мужчины.
Так это воспринимает человек с нормальным зрением:
Эмуляция дейтераномального зрения:
1/2Сравнение цветового спектра при нормальном зрении и при дейтераномалии: верхняя шкала — яркие цвета от красного до фиолетового, нижняя — искажённые оттенки, где красный и зелёный выглядят менее насыщенными 
2/2Так человек с дейтераномалией видит привычные цвета: красные и зелёные овощи теряют контраст и могут казаться одинаковыми
Протаномалия или отклонения по красным оттенкам. Существуют и другие формы нарушений цветового зрения, например, ослабленное восприятие красного цвета. На иллюстрации показана эмуляция того, как видит цвета человек с протаномалией:
1/2Сравнение цветового спектра при нормальном зрении и при протаномалии: верхняя шкала — яркие цвета от красного до фиолетового, нижняя — искажённые оттенки, где красный выглядит тусклым или коричневатым, а зелёный и жёлтый сливаются 
2/2Так видит овощи человек с протаномалией: красные и зелёные оттенки теряют контраст и могут восприниматься как схожие. Это подчёркивает важность выбора цветовых решений
По данным Всемирной организации здравоохранения, примерно 18% людей имеют нарушения зрения. Причём сюда не включаются обычные случаи близорукости или дальнозоркости, которые корректируются очками или медицинскими средствами. То есть в Беларуси речь идёт примерно о 1,7 миллиона человек — почти всё население Минска. Если слепо следовать только нормативным требованиям, не учитывая реальные технические ограничения и особенности пользователей, получается, что каждый пятый белорус окажется лишён удобного доступа к интерфейсу. Нельзя назвать это прямо «эйблизмом», но игнорировать проблему дальше невозможно — пора принимать меры.
Правильный подход к тестированию интерфейсов
Не стоит полагаться на догадки. Идеальный вариант, когда каждый этап разработки можно проверить прямо на тестовом банкомате. В Студии Райт банковские интерфейсы проверяются на тестовых банкоматах в зданиях центрального аппарата банка, но были и случаи, когда устройства самообслуживания появлялись прямо в нашем офисе.
Предварительно стоит подготовить десятки вариантов макетов, чтобы выбрать наиболее удачные, оценивая их непосредственно на экране устройства. Тестирование на реальных устройствах сразу выявляет макеты с блеклыми цветами и недостаточной контрастностью.
Обычно мы выбираем оптимальную цветовую гамму в фирменном стиле банка, которая обеспечивает хорошую контрастность на экране. Далее готовим ещё около десяти вариантов интерфейсов для других типов экранов и снова провели тестирование в банке. Процесс остаётся прежним: выбираем лучшие макеты, дорабатываем их и повторно проверяем, внимательно оценивая и фон, и текстовые элементы. Так на этом этапе можно получить рабочее и визуально приятное цветовое решение. Когда основной цветовой стиль утверждён, наступает этап работы над доступностью интерфейса — здесь уже методы «на глазок» перестают быть эффективными.
Почему дешевле заложить доступность сразу. Исправление проблем с читаемостью и цветовым восприятием после запуска обходится бизнесу кратно дороже. На этом этапе изменения затрагивают не только дизайн, но и разработку, повторную сертификацию, обновление прошивок и логистику. В некоторых случаях требуется физический выезд к устройствам. Напротив, проверка контрастности и цветовых сценариев на этапе прототипов занимает часы, а не недели, и не требует пересборки готового продукта. Поэтому доступность — это инвестиция в снижение будущих затрат, а не дополнительная статья расходов.
Эмуляция отклонений цветовосприятия и проверка контрастности. Для того чтобы интерфейс был максимально доступным, важно ориентироваться на рекомендации WCAG 2.0 (Web Content Accessibility Guidelines), стремясь соответствовать уровням AA–AAA. Полностью достичь уровня AAA на банкомате невозможно из‑за технических ограничений устройства. Тем не менее, чтобы соответствовать стандарту и сделать интерфейс удобным для всех пользователей, необходимо привести элементы интерфейса к требованиям по контрастности и различению цветов.
Балансировка оттенков. Для проверки интерфейсов с точки зрения людей с нарушениями цветового восприятия мы использовали специальные программы. Например, Sim Daltonism доступен только на Mac, а универсальной альтернативой для разных операционных систем является Color Oracle. Для тестирования веб‑сайтов можно воспользоваться расширением RGBlind.
Принцип работы прост: запускаем программу и помещаем рамку эмулятора на интерфейс или макет. Сразу становится видно, где красный и зелёный теряются. Затем корректируем цвета так, чтобы они оставались различимыми в окне эмулятора для людей с нарушением цветового восприятия, при этом не теряя читаемости и соответствия требованиям ТКП для пользователей с нормальным зрением. В результате получается:
1/2Интерфейс после цветовой коррекции, протестированный через эмулятор дейтераномалии. Красные и зелёные элементы адаптированы так, чтобы сохранять различимость для пользователей с нарушениями цветоощущения 
2/2Адаптированный интерфейс, проверенный на восприятие при протаномалии. Цветовые акценты подобраны так, чтобы сохранять функциональность и визуальную чёткость
Приводим контраст в соответствие классу AA‑AAA WCAG 2.0.
Для оценки контрастности мы применяем Color Contrast Analyzer. В качестве альтернативы можно использовать онлайн‑инструменты, например, наглядный сервис Color.review. Выбираем текстовые элементы и проверяем их соотношение контрастности (Contrast Ratio). Цель — достичь значения не ниже 5:1, что соответствует уровню AAA. В программе это отображается как «Pass AAA». Если результат неудовлетворительный, корректируем цвет или размер текста и повторяем проверку.
1/2Анализ контрастности зелёного текста — соответствие стандарту AAA для крупного шрифта 
2/2Анализ контрастности красного текста — соответствие стандарту AAA для крупного шрифта
Почему это важно для бизнеса
Доступность интерфейсов — это не отдельная задача и не дополнительная опция, а часть качества продукта. Чем раньше бизнес начинает учитывать реальные условия использования и особенности зрения пользователей, тем меньше он теряет на этапе эксплуатации.
Практика показывает, что даже небольшие корректировки цветовых решений и контрастности снижают количество ошибок, ускоряют работу с устройством и повышают доверие к сервису. В долгосрочной перспективе это напрямую отражается на операционных расходах и восприятии бренда.
В итоге можно получить интерфейс, который соответствует нормативным требованиям и обеспечивает комфортное использование банкомата для максимально широкой аудитории. Поскольку не все решения поддаются точной визуальной оценке, важно ориентироваться на международные стандарты, такие как WCAG, и использовать специализированные инструменты для проверки. Обязательно тестируйте свои решения.
