Блог UXART
Это БАЗА

Самый полный гайд по контрастности в интерфейсах

Рассказываем, как накосячили с контрастностью на нашем сайте и о том, что делать, чтобы на вашем было на одну проблему меньше) В этой статье собрали максимально полную информацию о контрастности с объяснениями и ссылками на источники.

This browser does not support the video element.

Всем привет, с вами снова я — Ланцева Анастасия, аналитик и UX-проектировщик в студии UXART, где мы используем контрастность для удобства пользователей каждый день. Поэтому хорошо освоили теорию и, конечно, не обошлись без парочки факапов)

Предыстория

Около полугода назад в нашей практике появился проект, в котором контраст стал объектом обсуждений и споров. То, что для нас было очевидным, для многих участников проекта — не было. В российском интернете по этой теме информации мало, а та, что есть, переведена недостоверно, неполно или вообще неправильно. А ведь на нее ссылаются заказчики и их очень сложно переубедить.
А потом еще сделали наш сайт с чисто белым текстом на чисто черном фоне и всей студией выясняли, хорошо это или не очень.
Поэтому написали собственную статью-справочник по контрастности. Отправляйте ее дизайнерам/проектировщикам/заказчику, если возникнут разногласия, чтобы аргументировать свою точку зрения)
Контрастность и контраст: есть ли разница? С точки зрения терминов да, контраст — чувствительность глаза к яркости и цвету. А контрастность (contrast ratio) — степень контраста, отношение яркости самой светлой и тёмной точек в интерфейсе. Так что высокий контраст, но контрастность 4:1.

Зачем это нужно

В мире не менее 2,2 млрд случаев нарушения зрения или слепоты, это по меньшей мере треть населения планеты. В России 210 тысяч незрячих и слабовидящих людей. И это только с зарегистрированной инвалидностью. Контрастность — один из пунктов доступности, который может помочь людям с заболеваниями зрительной системы видеть ваш сайт лучше или в принципе дать возможность с ним взаимодействовать.
Контраст важен и для людей с хорошим зрением, ведь неудобно пользоваться таким интерфейсом:
К тому же доступность во многих странах уже регулируется законом (Америке, Австралии, Германии). В России действует ГОСТ Р 52872-2019, в основе которого лежит стандарт WCAG, но его применение пока добровольно, хотя когда-нибудь ситуация может измениться.

Как обычно проверяют контрастность

Никак :))) Или на глаз. Но те, кто хотя бы минимально заботятся о пользователях, проверяют через Contrast Checker и подобные инструменты. Вы вводите цвет текста, цвет фона и получаете значение контрастности + оценку: плохо, нормально, хорошо. Это упрощенный алгоритм, который не учитывает деталей. Удобно, когда результат подтверждает ваше мнение, но что если он не всегда правильный? Давайте разбираться.

Теория

Инструменты основываются на WCAG (Web Content Accessibility Guidelines) — это руководство по доступности веб-контента и подразделение организации W3C, которая разрабатывает технологические стандарты. Требования по доступности сайтов, приложений для людей с нарушениями здоровья WCAG закреплены в законодательстве США.
В гайдлайне WCAG по доступности около 90 страниц, конечно, не все посвящены контрасту. Тем не менее — это первоисточник, на который мы и ориентируемся. Гайд разделен на несколько частей, контрастность относится к группе требований различимости, для которой выделены уровни успеха: A, AA, AAA:
А — обязаны выполнять, иначе одна или несколько групп с нарушением зрения не смогут пользоваться сервисом;
АА — следует выполнять, иначе некоторым группам будет сложно пользоваться сервисом;
ААА — можем выполнить, чтобы упростить доступ к сервису для некоторых групп.
Для контрастности только два уровня успеха: АА и ААА.
Уровень АА для текста (минимальный) — от 4,5:1 для основного текста, от 3:1 для крупного текста. Какой текст считать крупным: от 24px для обычных начертаний или 18px для жирных и иероглифов. Некоторые инструменты учитывают это неправильно, путают pt и px. Исключения: неактивные второстепенные элементы интерфейса, использующиеся в декоративных целях, логотипы. То есть надписи, не являющиеся кнопками или ссылками и не важные для понимания контекста — могут не удовлетворять этому критерию. Не важным для понимания контекста стандарт считает все, что можно убрать, переставить и смысл при этом не пострадает.
Уровень ААА для текста (повышенный) — от 7:1 для обычного текста, от 4,5:1 для крупного текста. Тут надо отменить, что это именно повышенная контрастность. Не лучшая, не супер-крутая, а сверх-достаточная.
Нетекстовый контраст, только уровень АА — для любых элементов интерфейса, не являющихся текстом, необходима контрастность от 3:1. Сюда относятся разделители, иконки, статусы и прочее.
Не будет ошибкой написать контрастность просто 21 вместо 21:1. Контрастность — это коэффициент, а не отношение или деление, у него нет ни единиц измерения, ни дробей. Такой формат исторически сложился, потому что хорошо передает суть, что самый светлый цвет в 21 раз ярче самого темного или их соотношение яркости 21 к 1 (21:1).
В последних объяснениях WCAG есть обоснования получения значений для критериев АА и ААА. В ISO-9241-3 и ANSI-HFES-100-1988, на которые опирается стандарт, минимальный уровень контраста основного текста для людей с нормальным зрением 3:1. Значение 4,5:1 (АА) учитывает слабое зрение, а 7:1 (ААА) плохое.
Стандарт рекомендует придерживаться уровня АА и не заставляет выполнять максимальные требования. И выполнение ААА вместо требуемых АА в критерии — не означает, что станет лучше. Иначе, чтобы не заморачиваться, можно было бы везде выставить максимальную контрастность 21:1, но очевидно, это не сработает.
Почему такой странный диапазон, от 0 до 21? Контрастность — это то, во сколько раз отличается яркость самого светлого и темного цветов. Яркость измеряется от 0 до 1. Так как на ноль делить нельзя, то к каждому значению прибавляют еще 0,05 и получается максимум 1,05/0,05 = 21. Почему прибавляют именно 0,05 — есть версии, что это связано с порогом контрастной чувствительности глаз (0,02) или погрешностью устройства.

Контраст и удобство использования

График зависимости удобства от контрастности не линейный и не растет постепенно от 0 до 21, более того, контрастность 21 будет не лучше, скажем 3. Сейчас объясним.
Отсутствие контрастности (ниже 3:0). Текст с контрастностью ниже 3:0 не прочитают ни люди с хорошим зрением, ни с различной степенью нарушений.
Минимальная контрастность (3:0 — АА). Как уже писали выше, для людей с хорошим зрением достаточно контрастности 3:1.
Достаточная контрастность (АА — ААА). В этом диапазоне уже люди с незначительными нарушениями воспринимают текст хорошо. К таким нарушениям относятся: катаракта (помутнение хрусталика глаза), глаукома (незначительная потеря зрения), дальнозоркость (плохая фокусировка на объектах вблизи) и другие заболевания, вызывающие снижение и/или нечеткость зрения. Но у групп с более значительными отклонениями могут оставаться сложности.
Повышенная контрастность (ААА–16:1). Люди даже с плохим зрением (кроме крайних случаев) хорошо воспринимают контрастную информацию. В случаях с очень плохим зрением обычно пользуются вспомогательными технологиями и коррекция контрастностью не требуется.
Максимальная контрастность 21:1. Чем выше, тем лучше? Вот такие ответы можно найти загуглив или вбив в проверку контраста:
Это значения для контрастности устройств и мониторов, не стоит путать их с контрастностью интерфейсов.
Контрастность монитора — это разница между самым ярким и темным изображением, которые он может воспроизвести. Измеряется специальными приборами на практике. Чем больше контрастность монитора, тем более широкий диапазон цветов он отображает и тем ближе их контраст будет к WCAG. Контрастность интерфейса вычисляется на основе значений RGB и для этого ничего измерять не нужно.
Даже у здоровых людей повышенная контрастность интерфейса вызывает усталость глаз, повышенную утомляемость. А с близорукостью симптомы усугубляются. Помимо этого повышенная контрастность может способствовать приступам у больных эпилепсией.
К сожалению, WCAG не учитывает влияние контрастности при значениях близких к максимальному, поэтому невозможно дать точное пороговое значение, начиная с которого удобство падает. Хотя стандарт не против, чтобы мы учитывали это сами))
Визуальные искажения
Замечали, что примеры визуальных искажений обычно черно-белые или «вырвиглазного» контраста? Все потому, что визуальные искажения часто бывают вызваны или гипертрофируются максимальной контрастностью. Вот несколько примеров.
Глядя на решетку, можно увидеть мелькающие серые пятна в местах пересечения белых линий. Зрительная иллюзия в виде мнимых точек на сетке возникает из-за латерального торможения — физиологического механизма нейронов. Если уменьшить контраст, то эффект будет менее заметен.
Визуальные иллюзии могут быть совершенно разнообразны. Давайте оставим максимальный контраст для фокусов и не будем использовать его повсеместно в интерфейсах)
Итак, что же мы сделали не так на нашем сайте?
Уже догадались? Конечно, сделали максимальный контраст: чисто белый текст на чисто черном фоне)) Уже поправили, заходите проверить)

Что еще может повлиять на контрастность?

Акцент
Контрастность — один из способов создания контраста. Она помогает выделить одни элементы среди других и тем самым помочь пользователю сориентироваться в информации, понять иерархию элементов на странице.
Используйте повышенную контрастность, если хотите выделить элемент на странице. Подойдет для баннеров, лендингов, промо-сайтов и материалов, где нужно создать сильное впечатление на пользователя. Можете использовать высокое значение или даже максимум, но убедитесь, что таких элементов не много или пользователь не будет долго с ними взаимодействовать.
При этом важно сочетать внутри страницы элементы с разной контрастностью, чтобы показать приоритет элементов, сделать важное заметнее, а неважное спрятать.
Объем и время на сайте
Чем больше контента или чем дольше пользователь взаимодействует с интерфейсом, тем меньше нужна контрастность. В новостных ресурсах, прикладных инструментах, электронных книгах пользователю будет комфортнее, если контрастность будет с учетом стандарта, но не выкручена на максимум. А еще лучше, если будет несколько вариантов настроек. Потому что, напомним, что уже при минимальном контрасте 7:1 — контент отлично воспринимается. Повышение увеличивает утомляемость, что плохо, если контент нужно изучать долго.
Поэтому же промо-лендинги могут быть сколь угодно яркими — чтобы привлекать внимание, но при этом с ними недостаточно долго взаимодействуют, чтобы начать утомлять.
Интересно, что многие российские новостные порталы и блоги полностью игнорируют этот момент, в отличии от иностранных. Может, самое время поправить?)
Технологии и устройства
На некоторых мониторах, например, с TN-матрицей контрастность пониженная. При этом стандартом WCAG это не регулируется никак, формула вычисления контрастности зависит только от значений RGB. Авторы рекомендуют учитывать это по ситуации. Так что пользовательские настройки мониторов, свойства шрифтов (например, очень тонкие линии), которые могут не давать достаточный контраст, нужно оценивать индивидуально и как бы «на глаз».
Чем больше контрастность монитора, тем более широкий диапазон цветов он воспроизводит и тем ближе они к WCAG. Мониторы с низкой контрастностью за счет несовершенства устройства в реальности будут выдавать более низкий контраст.
Бывает наоборот, что монитор «съедает» светлые цвета и даже серый текст выглядит почти черным, например, с матрицей AUO. На OLED-дисплеях максимальная контрастность (черного на белом или наоборот) вызывает смазывание при анимации. У IPS и VA матриц достаточно хорошая цветопередача и контрастность.
Поэтому нужно понимать пользователей и подстраивать контрастность под них. Если вы делаете маркетплейс на широкую аудиторию, можно использовать стандартные значения. Если вы знаете, что разрабатываете интерфейс для использования сотрудниками компании, которые сидят за мониторами с TN-матрицей, то возможно стоит немного увеличить контраст.
Окружающая среда
Днем нас окружает светлая обстановка, общий контраст может быть высоким, поэтому светлая тема не вызовет неудобств у пользователя. В то время как ночью контраст окружающей среды понижен и использование светлых, ярких цветов противоестественно и будет вызывать повышенную утомляемость.
Аналогично с освещенностью помещения. Если вы знаете, что интерфейсом будут пользоваться только работники здания, все окна которого выходят на южную сторону и чаще они работают в условиях прямого попадания солнечных лучей, стоит поднять контраст.
Если ярко-выраженных особенностей по освещенности и окружающей среде нет, то можно придерживаться стандартных значений.
Версия продукта
Если выпускаете MVP, то наверно не надо заморачиваться над контрастом и можно обойтись проверкой с помощью любого инструмента. Да, слабовидящих людей много, но для России это 210 тысяч против 143 миллионов, а это всего 0,14%. Сначала надо проверить гипотезу, а не углубляться в детализацию — может идея вообще не выгорит? Но гигантам имеет смысл следить за деталями, чтобы быть оптимальными для широкой аудитории.

Мифы

1. WCAG актуален
WCAG 2.2 вышел в 2018 году, а 2.0 в 2008, с которого главы о контрасте не обновлялись. Сам стандарт опирается на ISO-9241-3 и ANSI-HFES-100-1988, которые вышли в 2003 и 2008 годах (берем в расчет обновленные версии).
С этого момента уже вышло много новых или улучшенных типов матриц, которые позволили передавать контраст более точно и благодаря чему реальные значения контрастности повысились. Поэтому есть сомнения по поводу актуальности значений критериев успеха. В 2023 прогнозируют выход новой версии в WCAG, в которой можем ожидать каких-то изменений.
К тому же, как уже говорили ранее, в последнем драфте к стандарту говорится про получение этих самых значений критериев успеха АА и ААА. 4,5:1 вывели теоретически, для низкой остроты зрения, отмечается, что она типична для людей в 80 лет. Ну как бы есть некоторые вопросы, по поводу того, как это значение получилось и почему выбран именно такой референсный диапазон.
2. Текст должен соответствовать уровню AAA или он недоступен
Уровень AAA распространяется только на людей с плохим зрением, которые не используют вспомогательные технологии, а таких очень мало. Если большая часть вашей аудитории старше 70 лет, выполнение требований уровня AAA может принести им пользу, но для повсеместного использования это излишне. А в современных высоконагруженных интерфейсах скорее даже плохо. Соответствие уровню AA достаточно для большинства пользователей, поскольку он покрывает слабое зрение типичное для людей в возрасте 80 лет.
3. Обязательно, чтобы контрастность в любом случае была не менее АА
Стандартом разрешается использовать значения контрастности для людей с нормальным зрением (3:1 для основного текста), при условии, что возможно вернуться к значениям стандарта (есть версия для слабовидящих).
Например, можно увидеть статьи, где у озона и других маркетплейсов отмечают неконтрастные цвета, которые ниже стандарта, и считают это ошибкой:
На самом деле они выполняют стандарт в большей части, ведь для людей с нормальным зрением 3:1 уже достаточная контрастность и, например, у озона есть версия для слабовидящих. Поэтому по стандартным инструментам он не пройдет проверку, но по факту все ок.
Остается вопрос насколько хорошо версия для слабовидящих сделана, но это уже другая тема))
А на неактивные компоненты и элементы, сопровождающиеся текстовым пояснением с достаточным контрастом, требования вообще не распространяются.
4. Элементы интерфейса подчиняются тем же требованиям контрастности, что и текст
Они имеют отдельное требование контрастности: не менее 3:1, более низкое, чем текст, поскольку не требуют чтения.
5. WCAG всегда выдает корректные значения
Если немного поэкспериментировать с цветом текста и фона, можно получить странные результаты: цветовые пары, которые лучше читаются, чем другие, но имеют худшие коэффициенты:
Уже давно заметили такие косяки в алгоритме WCAG, в связи с чем появились другие, например «Расширенный алгоритм восприятия контраста» или APCA. Если руководство WCAG 3.0 будет включать APCA (прямо сейчас в черновике упоминается об этом), это значительно повлияет на то, что будет считаться достаточно контрастным, а что нет. В сравнении с указаниями по уровням WCAG этот алгоритм больше отталкивается от контекста.
Что не учитывает WCAG, но возможно будет APCA:
  • размер цветного элемента (помимо размера текста);
  • какой цвет фона, а какой текста (сейчас нет разницы между фоном и текстом — вы получите одинаковые значения, даже если поменяете их местами);
  • тип монитора, персональные настройки, освещенность окружающей среды, толщину шрифта, отступы от границ контента, разницу в цвете (помимо разницы в яркости) и другое.
Вот калькулятор контрастности APCA. Да, он выглядит страшно и еще находится в разработке, но его можно использовать как дополнительный инструмент проверки.
6. Выполнение всех требований сделает интерфейс удобным для каждого человека на планете
Всегда найдется пользователь, которому будет сложно воспринимать ваш дизайн. Выполнение требований не может удовлетворить потребности каждого человека, но оно может удовлетворить потребности как можно большего их количества.

Интересные наблюдения

Контрастность растет не линейно, а экспоненциально.
Поэтому, например, для черного цвета, отдаление по цветовой шкале на половину всего диапазона дает только 4 пункта контрастности. А остальная половина целых 17. Поэтому незначительное отклонение вблизи исходного цвета будет давать минимальный прирост к контрастности, а ближе к противоположному — наибольший.
Разная контрастность у равноудаленных цветов
Если взять цвета на равных расстояниях по цветовой шкале, то у них будет разная контрастность. Теоретически воспринимаемая контрастность должна быть выше у светлой пары, так как интенсивность ощущения зависит от логарифма интенсивности раздражителя и исходного состояния (по закону Вебера).
WCAG не совсем согласен с этими выводами, а вот APCA напротив. В любом случае нужно будет еще смотреть, что скажет новый WCAG 3.0, когда он выйдет.

Примеры хорошего и плохого контраста

Подведем итоги

Контрастность — многогранное свойство доступности, для вычисления которого пока нет на 100% работающего инструмента. Хотя WCAG и является золотым стандартом, но уже устарел и не всегда выдает корректные значения. Поэтому мы рекомендуем относиться к нему с долей скептицизма.
Учитывайте тип монитора и устройств, освещенность окружающей среды, толщину шрифта и другие детали. Проверяйте контрастность по WCAG, но при возникновении сомнений подкрепляйте результаты с помощью других алгоритмов, например, APCA, а еще здравым смыслом. И помните, что любой инструмент — это помощник, а не диктатор. Важнее удобство пользователей, а не выполнение какого-то правила.
А инструменты для работы с контрастностью: плагины для браузеров и figma, а также чеклист для проверки скоро выложим у себя в Telegram-канале, так что подписывайтесь)
Всем хорошего контраста!)
Предлагайте в комментариях свои идеи для статей или просто приходите к нам за интерфейсами — мы делаем только их и делаем круто :)