Отметим: когда пользователь с пониженным зрением не может прочитать текст на сайте из-за недостаточного контраста — это не просто плохой UX, а прямая угроза судебных исков. WCAG 2.1 AA стал де-факто стандартом (см. Web Content Accessibility Guidelines): минимальное соотношение контраста 4.5:1 для обычного текста и 3:1 для крупного (от 18pt regular или 14pt bold). Контрастность WCAG — одна из самых частых проблем, которую мы исправляем. Размер шрифта и доступность неразрывно связаны: крупный текст допускает меньший контраст. Мы провели более 50 аудитов доступности и знаем, как привести контрастность и шрифты к норме без переписывания всего CSS. Экономия времени на ручных проверках достигает 70%, а стоимость услуги окупается снижением риска штрафов до 50 000 руб. за первое нарушение. Предотвращение одного судебного иска экономит в среднем 150 000 руб.
Проблемы контрастности и шрифтов
Типичная ошибка — использование одного акцентного цвета для текста на всех фонах. Даже дизайнеры крупных брендов допускают контраст 2.8:1 для подсказок в полях ввода или 2.1:1 для неактивных кнопок. Особенно коварны градиенты, полупрозрачные подложки и hover-состояния — автотесты часто их пропускают.
Для проверки комбинируем автоматические (Pa11y, Axe) и ручные методы. Автоматизация ловит до 80% ошибок, но оставшиеся 20% требуют человеческого глаза. Сравним ключевые подходы:
| Метод | Охват | Время на страницу | Пропуски |
|---|---|---|---|
| Авто (Pa11y с WCAG2AA) | 70–80% | 2–5 секунд | Градиенты, текст на изображениях, анимации |
| Ручной (Axe + визуальный осмотр) | 95%+ | 10–15 минут | Редкие состояния, сложные фоны |
Какие инструменты для проверки контрастности самые эффективные?
Для быстрого замера пары цветов подходит WebAIM Contrast Checker — онлайн-инструмент, который показывает соотношение и уровень AA/AAA. Для массового аудита используем Pa11y с кастомным конфигом. В CI-пайплайн встраиваем проверку каждой страницы — если хоть одна не проходит, сборка падает.
npx wcag-contrast "#333333" "#ffffff" # 12.63:1 — отлично Обратите внимание: проверка контраста онлайн должна учитывать не только статические значения, но и состояния элементов. Для этого мы используем Axe Core с настройками под WCAG 2.1 AA.
Как мы добиваемся соответствия WCAG AA за 5 дней
Процесс состоит из пяти шагов:
- Аудит — прогон всех страниц через Pa11y и Axe, визуальная проверка сложных состояний.
- Проектирование — создание семантических CSS-переменных с гарантией контраста.
- Реализация — замена цветов на переменные, коррекция шрифтов и отступов.
- Тестирование — повторный прогон автотестов и мануальная верификация ключевых экранов.
- Деплой и обучение — интеграция CI-проверки, передача документации и конфигов.
Этот подход в 4 раза быстрее хаотичного исправления каждого элемента вручную. Например, на проекте интернет-магазина автотест пропустил карточку с контрастом 4.1:1 на сером фоне — мы затемнили цвет текста и задокументировали новый токен. В результате контраст стал 4.6:1, а вся дизайн-система обновилась за один день.
Дизайн-система и CSS-переменные
Что делать, если контраст не проходит в дизайн-системе?
Типичная ситуация: токен --color-text-muted даёт контраст 4.2:1 вместо 4.5:1. Решение — либо затемнить цвет, либо увеличить размер шрифта до крупного. Мы рекомендуем первое: менять цвет в одном месте, а не размер на всех компонентах.
Пример исправления:
:root { --color-text-primary: #1a1a1a; /* 17.1:1 AAA */ --color-text-secondary: #595959; /* 7.0:1 AA */ --color-text-muted: #767676; /* 4.54:1 AA */ --color-accent: #005EA2; /* 5.9:1 AA */ } Было #808080 (4.0:1) → стало #767676 (4.54:1). Изменение яркости на 10% решило проблему.
Автоматизация проверок в CI
Чтобы контрастность не ломалась при каждом коммите, подключаем Pa11y в GitHub Actions.
// .pa11yrc.json { "standard": "WCAG2AA", "runners": ["axe", "htmlcs"], "ignore": ["color-contrast"] } Pipeline останавливает сборку при падении хотя бы одной проверки — дефект не попадёт в продакшен.
Результаты и гарантии
Системное внедрение WCAG окупается за 3–6 месяцев за счёт экономии на проверках и отсутствия судебных исков. Сравним подходы:
| Подход | Стоимость внедрения | Риск штрафов | Время на поддержку |
|---|---|---|---|
| Хаотичные правки | Низкая | Высокий | Высокое |
| Системный аудит + CI | Средняя | Минимальный | Низкое |
Сроки: от 3 до 5 рабочих дней на проект среднего размера. Конкретные сроки уточняем после знакомства с кодом.
Отметим: Что входит в нашу работу:
- Полный аудит контрастности всех состояний UI (обычный, hover, focus, disabled) по 2–3 разным фонам.
- Аудит размеров шрифтов и межстрочных интервалов на desktop и mobile.
- Создание или доработка дизайн-системы (CSS-переменные, документация).
- Интеграция Pa11y в CI вашего проекта.
- Обучение команды: как проверять контрастность в Figma и DevTools.
- Гарантия: если после внедрения наших токенов новая страница не проходит AA — бесплатно исправляем.
Свяжитесь с нами для аудита вашего проекта. Закажите бесплатную проверку 5 страниц — убедитесь в качестве нашей работы.