Greensight
363

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

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

В закладки

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

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

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

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

B2B и B2C e-commerce solutions
{ "author_name": "Greensight", "author_type": "editor", "tags": [], "comments": 0, "likes": 4, "favorites": 4, "is_advertisement": false, "subsite_label": "greensight", "id": 123741, "is_wide": false, "is_ugc": false, "date": "Wed, 29 Apr 2020 18:15:26 +0300", "is_special": false }
Объявление на vc.ru
0
Комментариев нет
Популярные
По порядку

Прямой эфир