Доступность по цвету и контрастности
Если у вас хорошее зрение, вы вряд ли задумываетесь, что другие могут воспринимать цвета иначе или видеть текст хуже, чем вы, — а ведь это именно так.
Некоторые сочетания цветов легко воспринимаются одними людьми, но другие их различают с трудом или не различают вообще. Обычно проблема сводится к цветовому контрасту — соотношению яркости цветов переднего и заднего плана. Если цвета похожи, контрастность низкая; если они различаются, контрастность высокая.
В руководстве WebAIM для текста рекомендуется минимальная контрастность уровня AA — 4,5:1. Исключение — очень крупный текст (на 120–150 % больше основного текста по умолчанию): здесь контрастность может составлять 3:1. Обратите внимание на разницу в контрасте ниже.
Контрастность 4,5:1 выбрана для уровня AA, чтобы компенсировать потерю контрастной чувствительности, которая обычно наблюдается при ухудшении зрения до уровня примерно 0,5, который считается типичной остротой зрения для людей в возрасте около 80 лет. Для пользователей с ослабленным зрением и недостатком цветового зрения контрастность основного текста можно увеличить до 7:1.
Для проверки цветового контраста можно использовать аудит «Специальные возможности» (Accessibility Audit) в Lighthouse. Откройте DevTools, щелкните «Аудиты» (Audits или Lighthouse), выберите «Специальные возможности» (Accessibility) и создайте отчет.
В браузере Chrome также есть экспериментальная функция, которая поможет обнаружить низкоконтрастный текст на странице. А исправить низкий контраст можно с помощью подсказки по доступности цветов.
Более подробный отчет можно получить, установив расширение Accessibility Insights. Одна из проверок в отчете Fastpass — цветовой контраст. Вы получите подробные сведения обо всех элементах, не соответствующих требованиям.
Расширенный алгоритм восприятия контраста (APCA) #
Расширенный алгоритм восприятия контраста (Advanced Perceptual Contrast Algorithm, APCA) — это новый способ вычисления контраста, основанный на современных исследованиях цветового восприятия.
В сравнении с указаниями по уровням AAи AAA этот алгоритм больше зависит от контекста.
Контраст рассчитывается на основе следующих характеристик:
- Пространственные свойства (вес шрифта и размер текста).
- Цвет текста (воспринимаемая разница в яркости между текстом и фоном).
- Контекст (окружающий свет, среда и предназначение текста).
В браузере Chrome есть экспериментальная функция, которая заменяет рекомендации AA/AAA на APCA.
При передаче информации не полагайтесь только на цвет #
В мире около 320 миллионов человек страдают недостатком цветового зрения. Примерно 1 из 12 мужчин и 1 из 200 женщин страдают той или иной формой «цветовой слепоты» — то есть, около 1/20, или 5 %, ваших пользователей будут видеть ваш сайт не так, как вы задумали. Полагаясь на цвет для передачи информации, мы доводим это число до неприемлемого уровня.
Например, недействительный номер телефона в форме ввода может подчеркиваться красным. Но при недостатке цветового зрения или использовании программы чтения с экрана эта информация будет передана плохо или вообще потеряется. Поэтому всегда нужно стараться предоставить несколько способов получения важной информации.
В разделе 1.4.1 контрольного списка WebAIM сказано не использовать цвет как единственный способ передачи контента или различения визуальных элементов, Также там говорится не выделять ссылки на тексте исключительно цветом, если он не отвечает определенным требованиям к контрастности. При этом для указания на активную ссылку рекомендуется использовать дополнительный индикатор, например подчеркивание (с помощью CSS-свойства text-decoration).
В предыдущем примере можно просто добавить в поле сообщение, говорящее о том, что значение недействительно (и в чем проблема).
При создании приложения нужно помнить обо всем этом и следить за тем, чтобы не полагаться слишком сильно на цвет для передачи важной информации.
Если вам интересно, как сайт выглядит для людей с нарушениями зрения, или если вы сильно полагаетесь на цвет в интерфейсе, то можете с помощью DevTools имитировать зрительные нарушения, включая цветовую слепоту различных видов. В браузере Chrome есть функция «Эмулировать дефекты зрения» (Emulate Vision Deficiencies): откройте DevTools и перейдите на вкладку Отрисовка (Rendering) в нижней панели. Здесь можно имитировать следующие недостатки цветового зрения:
- Протанопия — неспособность воспринимать красный цвет.
- Дейтеранопия — неспособность воспринимать зеленый цвет.
- Тританопия— неспособность воспринимать синий цвет.
- Ахроматопсия: неспособность воспринимать цвета вообще, за исключение оттенков серого (встречается крайне редко).
Режим высокой контрастности #
Режим высокой контрастности позволяет инвертировать цвета переднего и заднего плана, что часто помогает лучше выделить текст. Для людей с нарушениями зрения такой режим может значительно упростить навигацию по контенту на странице. У себя на компьютере настроить высокую контрастность можно несколькими способами.
В операционных системах (например, Mac OSX и Windows) есть режимы высокой контрастности, которые включаются на уровне системы для всего интерфейса.
Полезно иногда включать высокую контрастность и проверять, как отображается интерфейс приложения и насколько он остается удобным.
Например, в панели навигации для указания на активную страницу может использоваться неконтрастный фоновый оттенок. Если включить режим высокой контрастности, этот цвет становится незаметным и становится непонятно, какая страница активна.
А в примере выше красное подчеркивание в поле недействительного номера телефона может отображаться трудно различимым сине-зеленым цветом.
Если обеспечить соответствие упомянутым выше требованиям к контрасту, то в режиме высокой контрастности всё будет хорошо. Но спокойствия ради можно установить расширение High Contrast для Chrome и проверить страницу на предмет того, правильно ли всё работает и выглядит.