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