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

дизайн: документи-рование

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

дизайн: документи-рование2

Убедитесь, что элементы интерфейса соответствуют пороговым коэффициентам контрастности
Пороговые коэффициенты контрастности отличаются в зависимости от формата элемента:

наборный текст — 4.5:1
текст большого размера — 3:1
иконки — 3:1
границы инпутов, чекбоксов, переключателей и других элементов взаимодействия — 3:1

Проверить контрастность можно с помощью различных сервисов, например: WebAIM ???, APCA ???, Colour Contrast Analyser (CCA)

Для пользователей Figma существуют плагины, позволяющие быстро проверить контрастность элементов, мы пользуемся Contrast ???, он удобен и прост в использовании.
Давайте вместе делать доступно и классно!
Показатели контрастности текста в норме: текст легко читается
Давайте вместе делать
доступно и классно!
Показатели контрастности текста ниже пороговых: текст сложно читать
Убедитесь, что элементы интерфейса соответствуют пороговым коэффициентам контрастности5555
Пороговые коэффициенты контрастности отличаются в зависимости от формата элемента:

наборный текст — 4.5:1
текст большого размера — 3:1
иконки — 3:1
границы инпутов, чекбоксов, переключателей и других элементов взаимодействия — 3:1

Проверить контрастность можно с помощью различных сервисов, например: WebAIM ???, APCA ???, Colour Contrast Analyser (CCA)

Для пользователей Figma существуют плагины, позволяющие быстро проверить контрастность элементов, мы пользуемся Contrast ???, он удобен и прост в использовании.
Давайте вместе делать доступно и классно!
Показатели контрастности текста в норме: текст легко читается
Давайте вместе делать
доступно и классно!
Показатели контрастности текста ниже пороговых: текст сложно читать
Убедитесь, что цвет является
не единственным способом передачи информации
Цветные элементы интерфейса должны иметь рядом с собой текстовое описание с названием цветов или их характеристикой.
Цвет текста – #000000

Цвет фона – #FFFFFF
Цвет текста – #3C3C3C

Цвет фона – #FFFFFF
Убедитесь, что цвет является
не единственным способом передачи информации
Цветные элементы интерфейса должны иметь рядом с собой текстовое описание с названием цветов или их характеристикой.
Статус инпута передаётся только цветом, ошибка неочевидна
Текстовый комментарий сопровождает цвет, ошибка очевидна
Проверьте разницу восприятия цветов
Разница цветов влияет на восприятие и читаемость.

Например, при слабой разнице цвета полей ввода в состоянии enabled и disabled могут быть почти идентичны. Поэтому при формировании палитры рекомендуем проверять цвета и оттенки в онлайн-калькуляторе …

Полученное значение в калькуляторе необходимо сравнить с нормативным показателем и сделать выводы.

30−40dE (единиц) — нормативный показатель необходимой разницы между цветами (то есть число единиц, при котором разница между
цветами будет четко обнаружена).
Показатель разницы: 42
Цвета легко различаются
Показатель разницы: 18.9
Различить цвета трудно
Template id: 29265994