Greensight

Контрастная и цветовая доступность при проектировании интерфейсов

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

Одно из таких требований — контрастная и цветовая доступность. Соблюдая ее правила, мы поможем людям с плохим зрением или нарушением восприятия цветов, тем, кто пользуется старыми экранами или находится в условиях плохой видимости (например, на ярком солнце).

Контрастная доступность

Вспомним, что такое контрастность. Если говорить просто, то это отношение яркости элемента к яркости фона. Контрастность измеряется в диапазоне от 1:1 (минимальная контрастность, белый текст на белом фоне) до 21:1 (максимальная контрастность, черный текст на белом фоне).

Требования к контрастности описаны в гайдлайнах WCAG, разработанных консорциумом Всемирной паутины W3C. В них описаны уровни поддержки контрастности: AAA и AA для небольших шрифтов (меньше 14 pt для жирных и 18 pt для обычных) и AAA Large и AA Large для заголовков (больше 14 pt для жирных и 18 pt для обычных).

Значения контрастности:

  • AAA — 7:1
  • AAA Large — 4,5:1
  • AA — 4,5:1
  • AA Large — 3:1

Считается, что поддержка AAA-стандарта нужна для людей с умеренно сниженным зрением, а АА-стандарта — для людей со зрением чуть хуже среднего.

Где можно ошибиться

Неконтрастные цвета у Озона

Неконтрастные цвета у Вайлдберрис

Цветовая доступность

Если проблемы плохого зрения или неконтрастного экрана понятны всем, то о таком явлении как дальтонизм говорят разве что в шутку. Хотя нарушение восприятия цветов довольно обычная особенность зрения многих людей. Обратимся к статистике. 8% всех мужчин в мире обладают теми или иными типами дальтонизма. Женщины страдают от дальтонизма гораздо реже — всего 0,5%. Нас интересуют дейтеранопия и протанопия — это когда зеленый и красный цвета для человека выглядит практически одинаковыми: они желто-коричневые и отличаются только яркостью. Эти формы дальтонизма есть у 1% всех мужчин в мире.

Рассмотрим на конкретном примере. Предположим, что у одного известного спортивного интернет-магазина 15 000 000 уникальных посетителей в месяц. Из них 55% — мужчины, то есть 8 250 000 человек. По статистике, не различают красный и зеленый цвет 1% мужчин, это 82 500 клиентов интернет-магазина в месяц — население небольшого города!

Где можно ошибиться

Спортмарафон не подписывает цвета в фильтре и на странице товара

Пятерочка использует опасное красно-зеленое сочетание

Правила соблюдения контрастной и цветовой доступности

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

2. Не используйте только цвет для кодирования состояний, дублируйте состояние текстом и иконкой.

3. Соблюдайте требование к контрастности минимум 4,5:1.

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

Как мы следим за контрастной и цветовой доступностью

Плагины при работе в Фигме

  • Contrast — позволяет проверить контрастность
  • Color Blind — создает копии фреймов с наложенными эффектами дальтонизма

Аксессибилити-тесты при разработке

  • aXe Chrome Extension — браузерное расширение для финальной проверки страниц

Полезные ссылки

  • Coblis — применяет к загруженному изображению эффект дальтонизма
  • В 82-ой версии Chrome в Devtools добавят эмуляторы нарушения зрения. Сейчас эту функциональность уже можно попробовать в Chrome Canary.

Автор материала: Мария Созонтова

0
2 комментария
Популярные
По порядку

Спасибо. Пошел менять сайт)

2

Как же устают глаза от серых на сером фоне!

1
Читать все 2 комментария
Запустить игру и не прогореть: зачем нужны маркетинговые исследования в гейминге и как их проводить

Маркетинговое исследование помогает экономить сотни тысяч долларов и выпускать продукты, которые приносят миллионы.

«Яндекс» добавил в поиск рекламную галерею товаров с карточками разных магазинов Статьи редакции

В карточке указан сайт магазина, фотография товара, название, цена и возможная скидка.

Товарная галерея «Яндекс»
S7 запустила подписку на услуги и сервисы авиакомпании — стоит от 149 рублей в месяц Статьи редакции

Можно бесплатно выбрать место, оформить багаж или возврат билета — в зависимости от тарифа.

«Сбер» запустит агентство для продажи рекламы на всех площадках экосистемы Статьи редакции

Обсуждается использование банкоматов, как дополнительного места для объявлений, сообщают близкие к запуску источники.

Разработчик разговорных ИИ-технологий Just AI запустил сервис Aimyvoice для покупки и создания синтезированных голосов Статьи редакции

Голоса можно использовать для озвучивания книг, видеоигр, ассистентов, ботов, служб поддержки и другого.

Наводим порядок и изучаем rocket sience. Доклады Go meetup

На прошедшем Go meetup спикеры из Evrone, «Ситимобил» и «Авито» учили правильной организации кода микросервиса, рассказывали, как вырастить MVP в полноценную масштабируемую архитектуру, и разобраться с мусором и алгоритмами управления памятью. Все доклады записаны в студии и доступны для просмотра.

Какие баги в играх самые бесячие? Рассказывают геймеры

Когда любимая игра виснет, изображение фризит, а герой умирает на ровном месте — это адски бесит. Особенно если ждал релиза долгие месяцы (а то и годы!) В тексте собрали истории геймеров, в жизнь которых ворвались баги и проблемы с сетью.

Точка показала новогодний ролик об исчезнувшем предпринимателе

Банк для предпринимателей и предприятий Точка выпустил новогодний рекламный ролик, в котором главный герой из-за водоворота задач пропадает из собственной же жизни. Авторы хотели показать, как часто предпринимателям приходится отказываться от того, что они любят, чтобы их бизнес не стоял на месте.

«Газпром-медиа» заберёт у «Газпромбанка» долю в компании, контролирующей группу VK Статьи редакции

«Газпромбанк» решил внести 45% уставного капитала АО «МФ Технологии» в имущество «Газпром-медиа».

null