WCAG 2.2: Полный гид
по доступности цвета для разработчиков
Как использовать инструменты Хромали для автоматизации проверки контрастности и соответствия стандартам доступности в ваших дизайн-системах.
Введение в стандарты
Веб-контент должен быть воспринимаемым. Стандарт WCAG 2.2 (Web Content Accessibility Guidelines) устанавливает жесткие требования к соотношению цветов текста и фона. Для большинства текстов это соотношение должно быть не менее 4.5:1, а для крупного текста (bold 18px или обычный 24px) — 3:1.
Проблема возникает не только при выборе «плохих» цветов, но и при сложной конвертации цветовых профилей между устройствами. То, что выглядит контрастно на мониторе калиброванного MacBook Pro, может стать «мыльным» на экране смартфона с другой гамма-коррекцией.
Хромали берет на себя рутину математических расчетов, интегрируя проверку контрастности (Contrast Ratio) прямо в ваш рабочий процесс разработки.
Инструменты в Хромали
Мы автоматизируем контроль доступности на трех уровнях
Real-time Audit
Встроенный плагин подсвечивает пары цветов с недостаточным контрастом (Delta E) еще на этапе проектирования в Figma или в CSS-файлах.
Симуляция дальнозоркости
Быстрое переключение между профилями: протанопия, дейтеранопия и тританопия. Проверьте, как ваш интерфейс видят пользователи с нарушениями восприятия цвета.
CI/CD Guard
Скрипт для Git Hook, который блокирует деплой, если в новом коде обнаружены токены цветов, нарушающие контрастность ниже уровня AA.
Проверка контрастности: как это работает
Контрастность рассчитывается на основе относительной яркости цветов. Хромали использует формулу из спецификации WCAG 2.0 для вычисления коэффициента контрастности (L1 + 0.05) / (L2 + 0.05).
Однако многие разработчики забывают, что полупрозрачные слои (opacity) меняют итоговый цвет. Наш движок рендерит итоговый цвет с учетом фона перед проверкой. Это предотвращает ошибки, когда белый текст на 80% прозрачном черном блоке не проходит проверку, хотя визуально кажется приемлемым.
Мы также проверяем «Focus Indicators». Цвет фокуса должен отличаться от окружающего контента не только обводкой, но и контрастом, чтобы быть видимым для навигации с клавиатуры.
Чеклист для команды
Не полагайтесь на глаз. Скачайте наш PDF-гайд по проверке доступности цвета и внедрите его в ревью дизайна.
Скачать PDF (2.4 MB)Ссылки на ресурсы
Официальная спецификация
Документация W3C по WCAG 2.2. Раздел 1.4.3 Contrast (Minimum). Обязательное чтение для технических лидеров.
Интеграция в пайплайн
Документация по настройке chromali-cli для Node.js и Python окружений. Автоматизация отчета за 5 минут.
База знаний
Статьи о том, как работать с цветами в темных режимах (Dark Mode) без нарушения контрастности и вызова «эффекта вибрации».