Соображения доступности для цвета

Существует множество ресурсов, которые помогут дизайнерам использовать цвет способами, доступными широкому кругу людей. Например, W3C признал необходимость улучшения доступности для людей с ограниченными возможностями, включая зрительные, слуховые, физические, речевые, когнитивные, языковые, обучающие и неврологические нарушения. Поэтому они разработали Руководство по обеспечению доступности веб-контента (WCAG), которое представляет собой серию рекомендаций по улучшению доступности веб-сайтов.

Как вы можете использовать WCAG в своих проектах? Давайте исследуем.

Дальтонизм приводит к тому, что человеку трудно различать определенные цвета. Существует три распространенные категории дальтонизма: красно-зеленый, сине-желтый и полный дальтонизм. Чтобы понять, как дальтонизм может повлиять на то, как пользователи видят цвета, посетите симулятор дальтонизма Colblindor, где вы можете загружать изображения и проверять их с помощью различных фильтров дальтонизма.

Есть несколько способов учитывать доступность цвета при проектировании:

1. Используйте в дизайне не только цвет, но и иконки. Например, посмотрите на изображение ниже: если вы разрабатываете форму и хотите указать, что в поле отсутствует текст или оно отформатировано неправильно, не полагайтесь только на то, чтобы превратить неправильный текст в красный цвет. Вам также следует использовать значок красного восклицательного знака. Значок восклицательного знака привлечет внимание пользователей к полю формы с помощью цвета и значка, поэтому ваши проекты будут более понятны большему количеству пользователей.
2. Используйте узоры и текстуру, чтобы создать контраст. Контраст — это разница между двумя или более элементами дизайна. Контраст часто создается за счет черно-белых изображений или большого размера текста заголовка по сравнению с меньшим размером основного текста. Представьте, что вы создаете гистограмму исследования пользователей, используя цвета бренда клиента. Чтобы создать контраст, не полагаясь только на цвет, вы можете добавить тонкие полосы в один столбец и точки в другой, как показано на изображении ниже. Благодаря контрастным рисункам, помимо цвета, столбцы на графике будут четко различаться для всех пользователей.
3. Избегайте сочетаний цветов, которые сложно отличить друг от друга. Вот некоторые цветовые комбинации, которые часто трудно различить пользователям, страдающим дальтонизмом:

• Зеленый и красный
• Зеленый и коричневый
• Синий и фиолетовый
• Зеленый и синий
• Светло-зеленый и желтый
• Синий и серый
• Зеленый и серый
• Зеленый и черный

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

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

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

Один из способов проектирования с учетом низкой контрастной чувствительности — это использование коэффициента контрастности яркости, который представляет собой измерение контраста между фоном и цветом текста, используемым поверх этого фона. В качестве стандарта WCAG рекомендует, чтобы коэффициент яркостной контрастности изображений и текста соответствовал коэффициенту контрастности не менее 4,5 : 1.

Что именно это означает для ваших проектов? Посмотрите эти четыре примера коэффициентов контрастности в действии:

• Низкая контрастность имеет соотношение 2 : 1. Как видите, цвет фона и текст плохо читаются.
• Минимальный контраст имеет соотношение 4,5 : 1. Эти комбинации фона и текста легче читать, даже если в них используются светлые цвета.
• Высокая контрастность имеет соотношение 16:1. Эти дизайны легко читаются, и в них используются более смелые цвета для текста, который выделяется на фоне.
• Максимальный контраст составляет 21 : 1. Для достижения максимального контраста в таких проектах используйте только черный и белый цвета.

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

Чтобы проверить коэффициент контрастности ваших проектов, WebAIM предоставляет [инструмент проверки контрастности] (https://webaim.org/resources/contrastchecker/), в котором вы вводите шестнадцатеричные коды цветов из ваших проектов. Если ваш коэффициент контрастности не соответствует стандартам, изложенным выше, вы можете использовать ползунок оттенка инструмента, чтобы настроить цвета и найти новые, соответствующие рекомендациям WCAG для доступных дизайнов.

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

Как всегда, цель создания удобного пользовательского опыта — сделать жизнь людей проще и лучше. Следуя нескольким рекомендациям и проектируя с учетом доступности, вы создадите полезные и полностью доступные продукты.

• Если вы хотите узнать больше о дизайне с использованием доступных цветов, посмотрите это видео от W3C, создателей рекомендаций WCAG, в котором показано, как проверять дизайн на предмет доступности в Интернете: [Простые проверки: первый обзор доступности веб-сайта] (https://www.w3.org/WAI/test-evaluate/preliminary/#video).
• Не знаете, как применить WCAG к цветовой палитре вашего дизайна? Вот Генератор цветовой палитры от Color Safe, который показывает WCAG в действии.
• Загрузите плагин Stark, чтобы выполнять проверку контрастности ваших проектов прямо в Figma, экономя ваше время и улучшая рабочий процесс. Посетите их страницу в сообществе Figma: Stark — Figma.