Дизайн для платформ

Зачем соблюдать контрастность

Корректное соблюдение контрастности помогает людям с особенностями зрения полноценно воспринимать информацию на сайтах и в приложениях, а также пользоваться интерфейсами. Если посмотреть на статистику, то в мире не менее 2,2 млрд случаев с нарушением зрения или слепоты, а в России 210 тысяч незрячих и слабовидящих людей, поэтому так важно учитывать работу с контрастностью в дизайне.

Уровни контрастности

Небольшое введение про уровни доступности и почему мы не целимся в уровень ААА.

• А — этому уровню должны соответствовать все сайты и приложения, так как в противном случае одна или несколько групп с особенностями зрения не смогут пользоваться сервисом;
• АА — это средний уровень соответствия цифровой доступности, который касается сложных барьеров. С этими барьерами может столкнуться большинство пользователей.

WСAG рекомендует ориентироваться на уровень AА. Большинство правил цифровой доступности требуют соответствия уровню АА. В связи с этим мы ориентируемся именно на этот уровень соответствия.

• ААА — это наивысший уровень соответствия цифровой доступности. Такой уровень учитывается на специальных сайтах для людей с особенностями.

На него мы не можем ориентироваться по нескольким причинам:

• ААА требует очень высокий уровень контрастности. В связи с этим есть определённые риски потерять иерархию в макетах для большинства нашей аудитории.
• Люди, которым нужен уровень ААА, обычно пользуются специальными инструментами, которые повышают контрастность текста на сайтах.

Как проверить контрастность элементов

Для проверки советуем использовать плагины в Figma. Их много, можно выбрать на свой вкус, мы например, пользуемся плагином «Contrast». Чтобы им воспользоваться сначала запустите плагин, а потом нажмите на элемент, который хотите проверить.

Как проверить контрастность страницы

Сначала выберите страницу, затем запустите плагин, выберите вкладку «Scan», а потом нажмите на кнопку «Scan Selection». Важно отметить, что в таком режиме плагин проверяет только текст.

Какие элементы учитывать при проверке контрастности

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

Текст — самый важный элемент в интерфейсе. Стоит уделить особое внимание второстепенному тексту, чтобы его уровень контрастности также подходил к стандартам. При этом важно понимать, что уровню контраста для среднего наборного текста уровня доступности АА нужно соотношение 4,5:1, а для большого текста уровня доступности АА нужно соотношение 3:1.

Иконки — стоит учитывать именно иконки, рядом с которыми нет текста. Для уровней АА и ААА нужно, чтобы соотношение иконок к фону было 3:1. При этом советуем подбирать иконки без текста так, чтобы их смысл легко считывался.

Контролы — к ним относятся чекбоксы, радиокнопки, переключатели, cлайдеры и другие элементы с которыми можно взаимодействовать. У них также требование к контрастности 3:1 для уровней АА и ААА.

Какие элементы можно НЕ учитывать при проверке контрастности

Графические элементы — визуальные элементы, которые никак не влияют на восприятие интерфейса. Например, это могут быть паттерны на фоне.

Плашки — они скорее играют композиционную роль, поэтому их тоже можно не учитывать при проверке контрастности. Здесь важно уточнить, что не играет роль именно контрастность цвета плашек относительно основного фона сайта или приложения. Главное, что основной контент в плашке контрастировал с ее фоном.

Иконки с текстом — если у иконки рядом есть контрастный текст, то в таком случае не обязательно учитывать контрастность самой иконки.