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

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

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

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

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

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

9
2 комментария

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

2
Ответить

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

1
Ответить