Вы можете предположить, что все воспринимают цвета или разборчивость текста так же, как и вы. То, как мы воспринимаем цвет, может зависеть от окружающей среды (при слабом или ярком освещении) и возможностей нашего зрения. Вы или ваши пользователи можете быть среди миллионов людей с дальтонизмом или плохим зрением.
Чтобы поддержать людей с различными нарушениями зрения, группа WAI создала формулу цветового контраста , обеспечивающую достаточный контраст между текстом и его фоном. При соблюдении этих коэффициентов цветового контраста люди с умеренно слабым зрением могут читать текст на фоне без вспомогательных технологий, повышающих контрастность.
Обратите внимание на разницу в коэффициентах контрастности, показанную на рисунке 1.
Коэффициент контрастности 4,5:1 — это необходимый минимум, установленный Руководством по доступности веб-контента (WCAG) 2.0. Это соотношение было выбрано потому, что оно компенсирует потерю контрастной чувствительности, которую часто испытывают пользователи с потерей зрения, эквивалентную зрению примерно 20/40.
Опять же, 4,5:1 — это всего лишь минимум. Чтобы поддержать пользователей с плохим зрением или другой дальтонизмом, обеспечьте уровень AAA и создавайте контент с контрастностью 7:1.
Вы можете проверить цветовой контраст с помощью аудита доступности Lighthouse в DevTools .
Расширенный алгоритм перцептивного контраста
Усовершенствованный алгоритм перцептивного контраста (APCA) — это способ расчета контраста, основанный на современных исследованиях восприятия цвета.
APCA более зависит от контекста, чем уровни AA и AAA WCAG.
В этой модели контраст рассчитывается на основе следующих особенностей:
- Пространственные свойства (вес шрифта и размер текста)
- Цвет текста (ощущаемая разница в яркости между текстом и фоном)
- Контекст (окружающий свет, окружение и предполагаемая цель текста)
Chrome включает экспериментальную функцию, позволяющую заменить рекомендации по коэффициенту контрастности AA/AAA на APCA .
Передавайте важную информацию не только с помощью цвета
Всякий раз, когда вы передаете пользователям важную информацию, полагайтесь на текст или замещающий текст в дополнение к визуальным подсказкам при обмене важной информацией. Визуальные подсказки включают цвета, узоры, изображения, стиль шрифта и язык направления.
Например, у вас может быть контактная форма, в которой недопустимые данные указываются путем подчеркивания их красным цветом. Эта цветовая индикация не сообщает программе чтения с экрана или пользователям с нарушениями цветового зрения, что что-то не работает. Пользователь может задаться вопросом, почему отправка формы не работает, и сдаться.
Обязательно предупредите пользователя о конкретной ошибке несколькими способами. Например, вы можете добавить сообщение об ошибке, чтобы объявить, что конкретный ввод недействителен и почему. Вы также можете добавить текст справки о том, как должен выглядеть правильный ввод.
Вы по-прежнему можете подчеркнуть неверный ввод красным, если есть дополнительные невизуальные подсказки.
Если вы сильно полагаетесь на использование цвета в интерфейсе, вы можете обнаружить проблемы с контрастностью в Chrome DevTools .
Увеличьте контрастность и инвертируйте цвета.
Людям со слабым зрением режимы высокой контрастности могут облегчить навигацию по контенту на странице. Есть несколько способов настроить высокую контрастность.
И macOS , и Windows предлагают способы повышения уровня контрастности в операционной системе.
Пользователи также могут инвертировать цвета переднего плана и фона (например, в macOS ), что особенно полезно для веб-сайтов и приложений, которые не поддерживают темные режимы.
Как разработчики, вы можете проверить, чтобы ваш интерфейс по-прежнему был виден и пригоден для использования, включив эти настройки и вручную проверив удобство использования.
Например, панель навигации может использовать тонкий цвет фона, чтобы указать, какая страница выбрана. Если вы просматриваете его в режиме высокой контрастности, эта тонкость полностью исчезает, а вместе с ней и понимание читателем того, какая страница активна.
Если вы соответствуете уровню контрастности AA или более высокому уровню, ваш контент все равно должен работать должным образом, даже если цвета инвертированы или имеют высокую контрастность. Тем не менее, все равно стоит протестировать, чтобы убедиться, что результат соответствует ожиданиям.