Вы можете полагать, что все воспринимают цвета и читабельность текста так же, как и вы. Наше восприятие цвета может зависеть от окружающей среды (яркое или слабое освещение) и особенностей зрения. Вы или ваши пользователи можете быть среди миллионов людей с цветовой слепотой или слабым зрением.
Для поддержки людей с различными нарушениями зрения группа 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 или выше, ваш контент должен работать корректно даже при инвертированных цветах или высокой контрастности. Тем не менее, стоит провести тестирование, чтобы убедиться, что всё работает так, как и ожидалось.