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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Lc 15 — минимальная светлота для нетекстовых декоративных элементов.
• Lc 30 — минимум для дополнительного текста вроде плейсхолдеров, а также значимых нетекстовых элементов.
• Lc 45 — минимум для заголовков и другого крупного текста.
• Lc 60 — минимальное значение для основного текста (16px c жирным начертанием и 24px нормального начертания).
• 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: учитывает оба алгоритма расчёта контрастности, дополнительно оценивает контраст цвета интерактивных элементов и их фона, есть симуляторы нечёткого зрения и дальтонизма, подсказывает подходящие цвета, автоматически генерирует контрастные цветовые палитры.
• Калькулятор контраста APCA: рассчитывает контрастность только на основе APCA, удобный предпросмотр текста с разными начертаниями и размерами.
• Калькулятор Huetone: космолёт в мире калькуляторов, гибкие настройки цветовых палитр, можно копировать цвета в виде дизайн-токенов и CSS-переменных.

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

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

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

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

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

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

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