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

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

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

Вспомним, что такое контрастность. Если говорить просто, то это отношение яркости элемента к яркости фона. Контрастность измеряется в диапазоне от 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.

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

• А11y Color Contrast Checker — проверяет контрастность всех текстов на фрейме

• Contrast — позволяет проверить контрастность

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

• Storybook A11y Addon — проверка компонентов в Storybook

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

• Colorblind Web Page Filter — применяет к странице по ссылке эффект дальтонизма

• Coblis — применяет к загруженному изображению эффект дальтонизма

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

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