Контрастность — один из ключевых параметров доступности веб-интерфейсов. По данным ВОЗ, более 2,2 миллиарда человек в мире имеют нарушения зрения. Недостаточный контраст между текстом и фоном делает содержимое нечитаемым не только для людей с ослабленным зрением, но и для любого пользователя в условиях яркого солнечного света или на экране с плохой калибровкой.
Стандарт WCAG (Web Content Accessibility Guidelines) устанавливает чёткие требования к минимальному контрасту цветов. В этом руководстве разберём, как работает формула расчёта, какие уровни соответствия существуют и как проверить контрастность на практике.
Что такое WCAG и зачем нужен стандарт
WCAG — это набор рекомендаций по обеспечению доступности веб-контента, разработанный консорциумом W3C (World Wide Web Consortium). Стандарт определяет, как сделать сайт удобным для людей с различными ограничениями: нарушениями зрения, слуха, моторики и когнитивных функций.
Текущая версия — WCAG 2.1 (опубликована в 2018 году). Она включает три уровня соответствия: A (минимальный), AA (рекомендуемый) и AAA (максимальный). Большинство законодательных актов о доступности (ADA в США, EN 301 549 в ЕС, ГОСТ Р 52872 в России) ссылаются на уровень AA как обязательный.
Уровни контрастности AA и AAA
WCAG определяет минимальные коэффициенты контрастности в зависимости от размера текста и уровня соответствия:
| Элемент | Уровень AA | Уровень AAA |
|---|---|---|
| Нормальный текст (до 18px или до 14px bold) | ≥ 4.5:1 | ≥ 7:1 |
| Крупный текст (от 18px bold или от 24px) | ≥ 3:1 | ≥ 4.5:1 |
| Элементы интерфейса (кнопки, иконки, границы полей) | ≥ 3:1 | — |
Нормальный текст — это основной текст страницы (параграфы, списки, ссылки). Крупный текст — заголовки и выделенные элементы размером от 24px (или от 18px при жирном начертании). Для крупного текста требования мягче, потому что он лучше читается при меньшем контрасте.
Формула расчёта контрастности
Коэффициент контрастности рассчитывается по формуле:
CR = (L1 + 0.05) / (L2 + 0.05)
где L1 — относительная яркость (relative luminance) более светлого цвета, L2 — более тёмного. Результат — число от 1:1 (нет контраста) до 21:1 (максимальный контраст, чёрный на белом).
Как рассчитать относительную яркость
Относительная яркость определяется из RGB-компонентов цвета по формуле:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
где R, G, B — линеаризованные значения каналов (после гамма-коррекции). Для значения канала sRGB ≤ 0.04045 линеаризация: C / 12.92. Для значений > 0.04045: ((C + 0.055) / 1.055) ^ 2.4.
На практике формулу не нужно считать вручную — используйте наш инструмент проверки контрастности, который мгновенно покажет коэффициент и уровень соответствия WCAG.
Примеры хорошего и плохого контраста
| Пара цветов | Контраст | WCAG AA | Оценка |
|---|---|---|---|
| Чёрный (#000) на белом (#FFF) | 21:1 | Проходит | Максимальный контраст |
| Тёмно-серый (#333) на белом (#FFF) | 12.6:1 | Проходит | Отличный |
| Синий (#1D4ED8) на белом (#FFF) | 7.8:1 | Проходит | Хороший |
| Серый (#767676) на белом (#FFF) | 4.5:1 | Проходит | Минимально допустимый |
| Серый (#888) на белом (#FFF) | 3.5:1 | Не проходит | Текст трудно читать |
| Светло-серый (#AAA) на белом (#FFF) | 2.3:1 | Не проходит | Почти не читаемый |
Как исправить низкую контрастность
Если пара цветов не проходит проверку WCAG, есть несколько стратегий:
- Затемнить текст — самый простой способ. Вместо #888 используйте #555 или #333.
- Осветлить фон — если фон тёмный, сделайте его светлее или используйте чисто белый.
- Увеличить размер шрифта — для крупного текста (≥ 18px bold) требования мягче (3:1 вместо 4.5:1).
- Подобрать альтернативный цвет — наш инструмент проверки контрастности предлагает ближайшие цвета, проходящие WCAG AA и AAA.
Помните: доступность — это не ограничение дизайна, а расширение аудитории. Высококонтрастный интерфейс удобен для всех пользователей.
Инструменты для проверки
Проверка контраста — обязательный этап при разработке любого интерфейса. Вот инструменты, которые помогут:
- UseToolz Contrast Checker — мгновенная проверка любой пары цветов по WCAG с предложением доступных альтернатив.
- Color Picker — выбор цветов с конвертацией между HEX, RGB, HSL, CMYK и привязкой к палитре Tailwind CSS.
- DevTools в браузере — вкладка Accessibility → Color Contrast показывает коэффициент для элементов на странице.
Часто задаваемые вопросы
Какой минимальный контраст нужен для текста на сайте?
По стандарту WCAG 2.1, уровень AA требует коэффициент контрастности не менее 4.5:1 для нормального текста и 3:1 для крупного текста (от 18px bold или от 24px). Уровень AAA — 7:1 и 4.5:1 соответственно.
Обязательно ли соблюдать WCAG?
В ряде стран это требование закона. В США — ADA и Section 508, в ЕС — European Accessibility Act (с 2025 года). В России ГОСТ Р 52872-2019 рекомендует соответствие WCAG 2.0 AA для государственных сайтов. Для коммерческих сайтов соблюдение WCAG — лучшая практика, улучшающая пользовательский опыт и SEO.
Как быстро проверить контрастность?
Откройте наш contrast checker, введите два цвета (текст и фон) — и увидите коэффициент контрастности, соответствие уровням AA и AAA, а также рекомендации по исправлению.
Влияет ли контрастность на SEO?
Да. Google учитывает доступность при ранжировании (Core Web Vitals, Lighthouse Accessibility score). Сайты с хорошей контрастностью получают более высокие оценки в аудитах Lighthouse, что косвенно влияет на позиции в поиске.
Что делать, если бренд-цвет не проходит WCAG?
Используйте бренд-цвет для крупных элементов (заголовки, кнопки), где допустимый порог ниже (3:1). Для основного текста подберите более контрастный оттенок из той же цветовой гаммы. Наш инструмент автоматически предложит ближайший подходящий цвет.
Заключение
Контрастность — не абстрактная метрика, а реальный показатель удобства вашего сайта. Проверяйте каждую пару «текст — фон» по стандарту WCAG 2.1, используйте уровень AA как минимум и стремитесь к AAA для основного контента. Начните с нашего инструмента проверки контрастности WCAG — он покажет проблемы и подскажет решения за секунды.
