Контраст текста и интерактивных элементов — один из базовых критериев доступности. WCAG (Web Content Accessibility Guidelines) задаёт минимальные коэффициенты контрастности для разных уровней соответствия. В этой статье рассмотрены требования, формулы расчёта и способы проверки.
Уровни WCAG
| Уровень | Обычный текст | Крупный текст |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Крупный текст — минимум 18px обычного начертания или 14px полужирного.
Формула контрастности
Коэффициент контрастности вычисляется по относительной яркости (luminance):
(L1 + 0.05) / (L2 + 0.05)
где L1 — яркость более светлого цвета, L2 — более тёмного. Результат от 1:1 (нет контраста) до 21:1 (чёрный на белом).
Примеры сочетаний
| Фон | Текст | Контраст |
|---|---|---|
| #ffffff | #000000 | 21:1 |
| #ffffff | #333333 | 12.6:1 |
| #ffffff | #666666 | 5.7:1 |
| #ffffff | #999999 | 2.8:1 (не проходит AA) |
| #3b82f6 | #ffffff | 4.5:1 (на границе AA) |
| #2563eb | #ffffff | 5.1:1 |
Проверка контраста
Ручной расчёт
Используйте формулу относительной яркости. Для sRGB:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
где R, G, B — линейные значения каналов (гамма-коррекция применяется к каждому каналу).
Инструменты
Сервис Color Contrast на rechecker.ru позволяет ввести цвета (HEX, RGB, HSL) и получить коэффициент контрастности, а также рекомендации по WCAG.
Для конвертации между форматами цветов используйте Color Converter.
Требования к интерактивным элементам
Кнопки, ссылки и элементы форм должны иметь контраст минимум 3:1 с фоном. Для состояний :focus и :hover также рекомендуется соблюдать контраст.
Декоративные элементы
Элементы, не несущие информации (декоративные линии, иконки без смысловой нагрузки), не подпадают под требования контраста. Но если иконка передаёт смысл, контраст обязателен.
Логотипы
Требования контраста не распространяются на логотипы и фирменные знаки. Остальной текст на странице должен соответствовать WCAG.
Градиенты и сложные фоны
При градиентном или сложном фоне выбирайте самый проблемный участок (минимальный контраст) и проверяйте его. При необходимости добавьте полупрозрачный overlay под текст.
Практические рекомендации
- Проверяйте контраст на этапе дизайна, а не только при вёрстке
- Учитывайте тёмную тему: пары цветов могут отличаться
- Тестируйте на реальных устройствах — калибровка экранов различается
- Не полагайтесь только на автоматические проверки: визуальная оценка важна
Контраст и прозрачность
При наложении полупрозрачного текста на фон эффективный контраст зависит от фона под ним. Проверяйте итоговый цвет после композитинга. Для overlay-текста на изображениях используйте затемнение или размытие фона.
Контраст в компонентных библиотеках
Библиотеки вроде Material UI, Chakra UI задают цвета по умолчанию. Проверяйте кастомные темы на соответствие WCAG. Переопределение цветов может нарушить контраст.
Дополнительные материалы
Создание доступных палитр с нуля — в Как создать доступную цветовую палитру для сайта.
Расчёт относительной яркости
Для ручной проверки контраста можно использовать формулу WCAG. Сначала преобразуйте sRGB в линейные значения:
R_lin = R <= 0.03928 ? R/12.92 : ((R+0.055)/1.055)^2.4
Аналогично для G и B. Затем относительная яркость:
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
Коэффициент контрастности: (L1 + 0.05) / (L2 + 0.05), где L1 — светлый, L2 — тёмный.
Текст на изображениях
При наложении текста на изображение контраст меняется в зависимости от области. Варианты:
- Наложить полупрозрачный overlay (тёмный или светлый) под текст
- Добавить text-shadow для читаемости
- Размыть участок фона под текстом (backdrop-filter)
Увеличенный текст
Текст 18px и выше (14px полужирный) может иметь контраст 3:1 для уровня AA. Это не освобождает от проверки — некоторые пользователи увеличивают размер шрифта в браузере, и контраст может измениться.
Неинформативные изображения
Декоративные изображения (фон, иллюстрации без смысловой нагрузки) не подпадают под требования контраста. Но если изображение содержит текст или важную информацию — контраст обязателен.
Логотипы и фирменные знаки
Исключение WCAG: логотипы и фирменные знаки не требуют минимального контраста. Остальной контент на странице должен соответствовать.
Автоматизация проверки
Инструменты вроде axe, WAVE, Lighthouse проверяют контраст автоматически. Они не заменяют ручную проверку: автоматика может пропустить сложные случаи (градиенты, overlay, динамический контент).
Рекомендации по дизайну
- Выбирайте сочетания с запасом: 4.5:1 — минимум, 7:1 — комфортнее для многих пользователей
- Проверяйте контраст на этапе дизайна, до вёрстки
- Документируйте одобренные пары цветов в гайдлайнах
Графические объекты и UI-компоненты
WCAG 2.2 уточняет: графические объекты и компоненты интерфейса должны иметь контраст минимум 3:1 с соседними цветами. Иконки, кнопки, чекбоксы, границы — всё подпадает под это требование. Если иконка передаёт важную информацию, контраст должен быть не ниже 3:1.
Контраст и возраст
С возрастом контрастная чувствительность снижается. Пользователи 40+ и 60+ лет хуже различают низкоконтрастный текст. Рекомендация AAA (7:1) особенно полезна для аудитории с возрастными изменениями зрения.
Инструменты проверки
Помимо Color Contrast на rechecker.ru, используйте:
- WebAIM Contrast Checker — ввод цветов, расчёт коэффициента
- axe DevTools — расширение для браузера, проверка всей страницы
- Lighthouse — вкладка Accessibility, отчёт по контрасту
Контраст в печати
Требования WCAG ориентированы на экран. Для печатных материалов действуют свои стандарты (например, ISO 9241), но принцип достаточного контраста сохраняется.
Часто задаваемые вопросы
Нужно ли соблюдать контраст для placeholder в полях ввода? Рекомендуется. Placeholder с низким контрастом затрудняет чтение. Многие гайдлайны рекомендуют контраст не ниже 4.5:1 или хотя бы 3:1.
Что делать, если бренд-цвет не проходит проверку? Используйте его для крупных элементов, фона, декора. Для текста и мелких элементов подберите контрастный цвет из палитры или затемнённый/осветлённый вариант.
Как проверить контраст в Figma? Плагины Contrast и Stark позволяют проверять контраст между выбранными слоями. Интегрируйте проверку в процесс дизайна.
Контраст и мобильные устройства
На мобильных экранах яркость и угол обзора влияют на восприятие контраста. На улице при ярком солнце низкоконтрастный текст становится нечитаемым. Рекомендуется запас по контрасту для мобильной версии.
Интеграция в CI/CD
Добавьте проверку контраста в пайплайн: axe-core, pa11y или Lighthouse в headless-режиме. Падение сборки при нарушении контраста предотвращает регрессии.
Контраст для фокуса
Элементы в состоянии :focus должны быть видимы. Контур фокуса (outline) должен иметь контраст минимум 3:1 с фоном. Не удаляйте outline без замены на видимую альтернативу.
Ссылки и подчёркивание
Ссылки, отличающиеся только цветом от основного текста, должны иметь контраст 4.5:1 с фоном. Дополнительное подчёркивание улучшает восприятие и удовлетворяет критерию «не только цвет».