Содержание
Что такое коэффициент контраста
Коэффициент контраста — это числовое соотношение яркостей двух цветов. Он вычисляется по формуле относительной яркости (relative luminance), описанной в спецификации WCAG, и выражается в виде соотношения: например, 4.5:1 означает, что более светлый цвет в 4,5 раза ярче более тёмного.
Максимально возможный коэффициент — 21:1 (чёрный текст на белом фоне). Минимальный практически применимый порог для нормального зрения — около 3:1. Но человеческое зрение неоднородно: у людей с нарушениями цветового восприятия, катарактой или просто при работе при ярком внешнем освещении реальный воспринимаемый контраст ниже расчётного.
Именно поэтому Web Content Accessibility Guidelines (WCAG) установили пороговые значения с запасом: они рассчитаны на средне-неблагоприятные условия восприятия, а не на идеальную тёмную комнату с откалиброванным монитором.
Справка: По данным Американской академии офтальмологии, более 8% мужчин и 0.5% женщин имеют то или иное нарушение цветового восприятия. В США это свыше 13 миллионов человек, работающих с вашими интерфейсами ежедневно.
Уровни WCAG: AA и AAA
WCAG определяет три уровня соответствия: A, AA и AAA. Для большинства коммерческих и информационных веб-проектов целевым является уровень AA — он обязателен в рамках американского закона ADA (Americans with Disabilities Act) и является стандартом для государственных и образовательных ресурсов.
Требования по контрасту на уровне AA следующие:
- Основной текст (до 18pt / 14pt bold): минимум 4.5:1
- Крупный текст (18pt+ / 14pt+ bold): минимум 3:1
- Компоненты интерфейса и графические элементы: минимум 3:1
- Декоративные элементы и логотипы: без ограничений
Уровень AAA повышает порог для обычного текста до 7:1, что на практике означает почти полный отказ от большинства цветовых комбинаций, не основанных на близких к чёрному или белому тонах. AAA рекомендуется для узкоспециализированных ресурсов — медицинских, образовательных — но не является обязательным требованием для общих сайтов.
Пять распространённых ошибок
1. Проверка контраста после утверждения цветовой схемы
Наиболее часто встречающаяся ошибка. Дизайн-система строится на основе брендовых цветов, и только на финальном ревью обнаруживается, что основной акцентный цвет (#F4A261 на белом, например) имеет контраст 2.9:1 — недостаточный для большинства применений. Переработка цветовой схемы на этом этапе означает пересмотр компонентов, документации и, возможно, маркетинговых материалов.
Решение: включить проверку контраста в первый этап построения дизайн-системы, до фиксации цветовых токенов.
2. Игнорирование состояний hover и focus
Основной текст может соответствовать WCAG AA, но интерактивные состояния — hover-цвет ссылок, цвет обводки поля ввода в фокусе, текст кнопки в состоянии disabled — часто не проверяются. Именно эти элементы критически важны для пользователей, полагающихся на клавиатурную навигацию.
3. Тестирование только на откалиброванном мониторе
Экран MacBook Pro с P3 Wide Color Gamut и автоматической калибровкой — не репрезентативная среда. Проверяйте контраст на дешёвых Windows-ноутбуках с дефолтными настройками яркости, на мобильных устройствах под прямым солнечным светом, на устаревших мониторах с завышенной яркостью.
4. Смешение понятий «хороший визуально» и «технически соответствует»
Тёмно-синий (#1a237e) на тёмно-фиолетовом (#4a148c) выглядит различимо на откалиброванном экране, но даёт контраст около 1.2:1. Субъективное ощущение различимости — ненадёжный индикатор; полагайтесь на числа.
5. Применение одного и того же цвета текста на разных фонах
Серый текст (#6b7280) на белом фоне даёт приемлемые 4.6:1. Тот же серый на светло-сером фоне карточки (#f9fafb) — уже 3.8:1, что ниже требуемого порога. Проверяйте каждое сочетание независимо.
Числовые значения контраста должны быть видны дизайнеру в процессе работы, а не только на этапе аудита.
Плагины для Figma и Sketch позволяют проверять контрастность прямо в рабочей среде без переключения между инструментами.
Контраст как дизайн-инструмент
Требование соответствия WCAG AA часто воспринимается как ограничение творческой свободы. На практике оно является дисциплинирующим фактором, который заставляет дизайнера работать с цветом более осознанно.
Когда вы знаете, что основной акцентный цвет должен давать контраст не ниже 4.5:1 на белом фоне, выбор сдвигается в сторону насыщенных, уверенных тонов. Такие цвета, как правило, ощущаются более современными и смелыми, чем пастельные варианты, которые нередко выбираются «на глаз» без учёта контраста.
Более того, работа в рамках контрастных ограничений развивает навык работы с тональными отношениями — понимание того, как светлота и насыщенность взаимодействуют. Это фундаментальное умение, которое поднимает качество любого дизайнерского решения.
"Контраст — это не то, что вы проверяете перед сдачей проекта. Это параметр, который вы задаёте в самом начале, как размер шрифта или модульную сетку."
— Джеймс Флетчер, UX-исследовательПрактический подход: строить цветовую палитру от контрастных требований. Возьмите желаемый тон и определите, какие его оттенки дают нужный коэффициент на предполагаемых фонах. Это сузит палитру до функциональных вариантов, среди которых и следует искать эстетическое решение.
Инструменты для проверки
Экосистема инструментов для работы с контрастностью хорошо развита. Вот проверенный набор:
- WebAIM Contrast Checker — классика, простой онлайн-инструмент с поддержкой форматов HEX, RGB, HSL.
- Colour Contrast Analyser (TPGi) — десктопное приложение с пипеткой для проверки цветов прямо с экрана.
- Figma Plugin: Contrast — встроенная проверка во время работы в Figma; показывает результат для выделенного слоя в реальном времени.
- WAVE (WebAIM) — автоматическая проверка опубликованных страниц с визуализацией нарушений прямо в браузере.
- axe DevTools — расширение для Chrome/Firefox; наиболее точный автоматический аудитор, стандарт в профессиональных командах.
- Adobe Color — Accessibility Tools — анализ цветовых пар с учётом типов цветовой слепоты (протанопия, дейтеранопия, тританопия).
Разборы: до и после
Рассмотрим три типичных сценария, с которыми сталкивается большинство дизайнеров при проверке контраста реального проекта.
Сценарий A: Светло-серый текст на белом
Цвет текста #9ca3af (серый 400 по Tailwind) на белом (#ffffff) даёт контраст 2.85:1. Это ниже минимального 4.5:1 для обычного текста. Решение: использовать #6b7280 (серый 500, контраст 4.6:1) или #4b5563 (серый 600, контраст 7.0:1) — в зависимости от желаемой интенсивности.
Сценарий B: Белый текст на фирменном синем
Фирменный цвет бренда — #3b82f6 (синий 500). Белый текст на нём даёт контраст 3.0:1 — достаточно для крупного текста (18pt+), но недостаточно для обычных кнопок с подписями. Решение для кнопок: затемнить до #1d4ed8 (синий 700, контраст 5.9:1 с белым).
Сценарий C: Тёмный режим
В тёмном режиме белый текст (#ffffff) на тёмно-сером фоне (#1f2937) даёт контраст 16.7:1 — с избытком. Но это создаёт обратную проблему: слишком высокий контраст в тёмной теме вызывает галационный эффект и повышенную усталость. Рекомендуемый подход — использовать не чисто белый, а #e5e7eb или #f3f4f6, давая контраст 13–15:1, что комфортнее при длительном чтении.
