Контрастность цветов в интерфейсе

Контрастность в дизайне интерфейсов — это противопоставление или резкое отличие по цвету и яркости между отдельными элементами; значимая или заметная разница между элементами в интерфейсе.

От уровня контрастности интерфейса напрямую зависит то, насколько удобным и комфортным будет его использование. Особое внимание стоит уделять контрасту фона и основного контента — текста. Мы можем интуитивно оценить, насколько читаем тот или иной текст, но можем упустить из внимания особенности зрения, которые влияют на восприятие контрастности и различение похожих цветов. К примеру, дальтонизм. Также низкий контраст цветов может помешать комфортному использованию интерфейса при ярком свете, на старых экранах и т. д.

• Разборчивость: людям с любым зрением проще воспринимать текст.
• Юзабилити: контрастные интерфейсы проще воспринимаются на солнце, в темноте или на экране с низким разрешением.
• Доступность: пользователи с особенностями зрения могут использовать продукт без барьеров.
• Соответствие законам и стандартам: во многих странах доступность — это юридическое требование. Например, в странах Евросоюза, США и Великобритании.

При проектировании разборчивых интерфейсов для людей с разными особенностями зрения используют две системы расчёта контрастности — WCAG 2 (Web Content Accessibility Guidelines) и APCA.

Руководства по доступности контента (коротко WCAG 2) предлагают рассчитывать контрастность, сравнивая яркость одного цвета на фоне другого. На выходе получается соотношение из двух чисел, например, 2.5:1. Кроме этого учитывается размер и толщина (насыщенность) шрифта, который используется для текста.

В основе WCAG 2 — руководства и критерии нескольких уровней соответствия. Критерии про контрастность не исключение.

AA — минимальный уровень:

• Текст меньше 24px (обычное начертание): не ниже 4.5:1.
• Крупный текст (≥24px или ≥19px, жирный): не ниже 3:1.
• Нетекстовые элементы интерфейса (разделители, иконки, статусы и другие): от 3:1 и выше.

AAA — повышенный уровень для интерфейсов, где требуется максимальная доступность:

• Обычный текст: не ниже 7:1.
• Крупный текст: не ниже 4.5:1.

Требования к контрастности для более крупного текста ниже. Текст большего размера, с более толстыми буквами и символами легче различать при меньшей контрастности. Это позволяет нам использовать более широкий диапазон цветов и шрифтов для крупного текста, что может быть полезно для дизайна.

Для декоративных элементов, иконок без текста и других нетекстовых частей интерфейса допускается меньшее соотношение. При этом важно следить за контрастом ключевого содержимого и фона.

Компоненты интерфейса, недоступные для взаимодействия, не обязаны соответствовать требованиям. Например, кнопка «Отправить» внизу формы. Такая кнопка видна, но не может быть нажата, пока не заполнены все обязательные поля.

APCA (Accessible Perceptual Contrast Algorithm, иногда Advanced Perceptual Contrast Algorithm) — aлгоритм контрастности для доступности на основе восприятия цветов. Это означает, что алгоритм учитывает не математическое соотношение яркости, а светлоту цвета (lightness contrast, Lc). Светлота — яркость цвета текста или участка изображения по отношению к белому. Эта субъективная характеристика цвета, в отличие от яркости, так как строится на особенностях восприятия цветов человеческим глазом.

Светлота учитывает несколько факторов: семейство и толщину шрифта, его цвет и размеры, назначение текста (основной текст, заголовок, подзаголовок и пр.), а также цвет фона. В итоге получаем не соотношение одного цвета к другому (3.1:1), а значения светлости (Lc 60, Lc 75 и далее).

Например, для текста, набранного базовым шрифтом без засечек Arial, такие требования:

• Lc 15 — минимальная светлота для нетекстовых элементов, которым достаточно быть едва различимыми (например, неактивные крупные кнопки).
• Lc 30 — минимум для дополнительного текста вроде плейсхолдеров, а также значимых нетекстовых элементов.
• Lc 45 — минимум для заголовков и другого крупного текста.
• Lc 60 — минимум для крупного текста, который не является основным (например, короткие подсказки и подписи): от 24px нормального начертания или от 16px жирного.
• Lc 75 — минимум для основного текста размером от 18px и крупнее.
• Lc 90 — рекомендуемое значение для основного текста от 14px.

Сравнивать цвета можно с помощью автоматических инструментов: калькуляторов, расширений, плагинов и прямо в браузерах.

Калькуляторы для алгоритма WCAG 2:

• Проверка контраста от WebAIM: определяет и сравнивает цвета только в формате HEX, показывает итоговое соотношение и статус соответствия критериям WCAG 2.
• Отчёт о контрасте: кроме базовых функций калькуляторов симулирует тёмную и светлую темы, работает в режиме картинки в картинке (Picture-in-Picture).
• Анализатор цветового контраста CCA (Colour Contrast Analyser): программа под Windows и macOS, поддерживает несколько форматов цветов, есть симулятор дальтонизма.
• Contrasts: приложение для macOS, поддерживает несколько цветовых форматов.

Калькуляторы для APCA:

• Проверка контраста APCA + WCAG 2: учитывает оба алгоритма расчёта контрастности, дополнительно оценивает контраст цвета интерактивных элементов и их фона, есть симуляторы нечёткого зрения и дальтонизма, подсказывает подходящие цвета, автоматически генерирует контрастные цветовые палитры.
• Bridge-PCA: калькулятор, который обратно совместим с расчётом соотношения контраста на основе алгоритма WCAG2.
• Калькулятор контраста APCA: рассчитывает контрастность только на основе APCA, удобный предпросмотр текста с разными начертаниями и размерами.
• Калькулятор Huetone: космолёт в мире калькуляторов, гибкие настройки цветовых палитр, можно копировать цвета в виде дизайн-токенов и CSS-переменных.

Плагины для Figma, Sketch и программ для написания кода (IDE):

• Плагин для проверки контрастности от Stark (Figma и Sketch): использует алгоритм WCAG2, есть симуляторы дальтонизма, размытого зрения, пониженного контраста и яркого дневного освещения.
• Polychrom (Figma): плагин для проверки на основе алгоритма APCA, кроме базовых цветовых форматов поддерживает OKLCH, работает с палитрами, где есть смешанные цвета, предлагает подходящие начертания для текста разных размеров.

Браузерные инструменты разработчика:

• Firefox (раздел «Доступность»);
• Chrome (показывает уровень контраста для текста);
• встроенные в браузеры инструменты для аудита доступности (Lighthouse, axe).

Эмпатическое тестирование: проверка интерфейса с включёнными режимами дальтонизма, нечёткого зрения, пониженной или пониженной контрастности (есть в браузерах, Windows, Figma и на macOS).

Например, в Chrome эмуляция особенностей зрения находится во вкладке «Отрисовка». Можно эмулировать нечёткое зрение, пониженную контрастность, все виды дальтонизма (когда не воспринимается красный, зелёный, синий или ни один из цветов RGB-спектра). В этой же вкладке включается эмуляция prefers-contrast — одного из значений директивы @media.

Есть отдельные сервисы для симуляции зрительного восприятия. Например, Who Can Use. Это веб-сервис, который показывает как люди с обычным зрением, дальтонизмом, глаукомой и катарактой видят комбинации цветов. Дополнительно проверяет соотношения контраста при прямом солнечном свете и в ночном режиме.

При использовании градиента проверяйте контраст текста и интерактивных элементов отдельно для каждого цвета градиента, особенно для самого светлого и самого тёмного участка. Контраст должен соблюдаться на всём протяжении градиента.

Проверять контрастность интерфейса при установленной тёмной теме можно теми же инструментами, которыми проверяют светлую тему. Только не забудьте учесть важные нюансы для тёмных тем.

Не инвертируйте цвета светлой темы автоматически. То, что было контрастным в светлой теме, например, акцентный синий на белом, может потеряться в тёмной теме. Всегда пересчитывайте соотношение контраста цветов, а лучше подбирайте их отдельно для каждой темы.

Проверяйте не только текст, но и компоненты: границы полей ввода, плейсхолдеры, элементы в состоянии наведения и разделители.

Избегайте чистых и насыщенных цветов на тёмном фоне. Ярко-красный, ярко-синий или ярко-зелёный на чёрном могут создавать эффект мерцания для некоторых людей. Также они создают ложное ощущение контраста (цветового, а не яркостного). Лучше использовать приглушённые оттенки или добавлять полупрозрачную подложку под цветные элементы.

Не используйте чистый белый на чистом чёрном. Соотношение белого текста (#FFFFFF) на чёрном фоне (#000000) максимально контрастно. Высокая контрастность может вызвать эффект ореола (гало-эффект) у людей с астигматизмом. Из-за этого эффекта трудно прочитать и разобрать текст, а глаза быстрее утомляются и болят. Вместо чистых цветов можно использовать светло-серый для текста и тёмно-серый или тёмно-синий для фона.

Уменьшайте яркость иконок и картинок. Картинки, иконки и другая графика с большим количеством светлых цветов могут слишком бросаться в глаза на тёмном фоне и вызывать у пользователей дискомфорт. В таком случае можно измененить цвета иконок, а для картинок использовать CSS-функции для яркости brightness(), прозрачности opacity() или насыщенности saturate(). Если CSS не решает проблему доступности картинок, подумайте об их замене на отдельную графику для тёмной темы.

Обратите внимание на толщину линий шрифта. На тёмном фоне шрифты визуально кажутся жирнее, чем на светлом. Это оптический эффект, в основе которого лежит то, как в глазе рассеивается свет (иррадиация). Мелкие буквы визуально слипаются и становятся менее разборчивыми, жирные шрифты выглядят более жирными, чем на самом деле. Засечки или непривычное начертание букв тоже могут понизить разборчивость текста.

Если шрифт стал менее разборчивым в тёмной теме, можно слегка увеличить расстояние между буквами или использовать другую насыщенность шрифта (font-weight), например, полужирную вместо жирной.

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