Проверка контраста цветов WCAG онлайн: как сделать правильно и онлайн-инструмент

Контраст — это разница между самым светлым и самым тёмным оттенком на экране. В веб-доступности его измеряют числом, которое показывает, насколько хорошо текст читается на фоне. Если контраст низкий, люди с дальтонизмом, катарактой или просто при ярком солнце не смогут разобрать слова.

WCAG (Web Content Accessibility Guidelines) — международный стандарт, к которому привязаны законы многих стран, в том числе российский ГОСТ Р 52872-2019 (с изменениями 2025 года). Он определяет три уровня:

• AA — минимальный для большинства сайтов, коэффициент ≥4.5:1 для обычного текста, ≥3:1 для крупного.
• AAA — повышенный, ≥7:1 для обычного текста, ≥4.5:1 для крупного.
• A — устарел, не рекомендуется.

Проверка контраста нужна не только для текста, но и для иконок, кнопок, границ полей ввода — любых элементов, несущих информацию.

Чтобы не гадать на глаз, WCAG использует математику. Сначала вычисляем относительную яркость цвета по формуле:

Где R_linear, G_linear, B_linear — это sRGB-каналы после гамма-коррекции:

• Если значение канала (0–255) перевести в диапазон 0–1, то для каждого v: если v ≤ 0.04045, то linear = v / 12.92; иначе linear = ((v + 0.055) / 1.055) ^ 2.4.

Затем контрастное отношение:

CR не может быть меньше 1 (тогда цвета одинаковые) и больше 21 (чёрный на белом). Пример: чёрный (#000) L=0, белый (#FFF) L=1, CR = (1+0.05)/(0+0.05) = 21.

Допустим, текст #3366CC (синий), фон #FFFFFF. Считаем:

1. Переводим hex в RGB: #3366CC → R=51, G=102, B=204.
2. Нормируем: 51/255≈0.2, 102/255≈0.4, 204/255≈0.8.
3. Гамма-коррекция: для каждого канала v: v>0.04045? ((v+0.055)/1.055)^2.4 : v/12.92.
   • R: 0.2 → (0.255/1.055)^2.4 ≈ 0.0331
   • G: 0.4 → (0.455/1.055)^2.4 ≈ 0.1390
   • B: 0.8 → (0.855/1.055)^2.4 ≈ 0.5697
4. Яркость синего: 0.2126*0.0331 + 0.7152*0.1390 + 0.0722*0.5697 ≈ 0.0070 + 0.0994 + 0.0411 = 0.1475.
5. Яркость белого: 1.0 (все каналы 1 → после коррекции 1).
6. Контраст: (1+0.05)/(0.1475+0.05) = 1.05/0.1975 ≈ 5.32. Это >4.5:1, значит, для AA по обычному тексту — проходит. Для AAA (7:1) — не проходит.

Если бы текст был #3366CC на #E0E0E0 (светло-сером), CR получился бы ниже — 3.8, что не годится для AA обычного текста, но подходит для крупного.

Формула WCAG не учитывает:

• Цветовое зрение пользователя: люди с дейтеранопией (красно-зелёная слепота) видят иначе. Для них лучше дополнительно проверить через симуляторы (например, Colour Contrast Analyser).
• Текстуры и градиенты: если фон не сплошной, расчёт сложнее — берите наихудший участок (самый похожий на текст цвет).
• Анимацию: движущийся текст временно может стать нечитаемым, контраст должен быть ≥3:1 в любой момент (крупный) или ≥4.5:1.

Также помните: контраст считается для всех состояний элемента — hover, focus, active. Если кнопка при наведении меняет цвет, проверяйте и это сочетание.

Ошибка 1: Игнорируют крупный текст.
Крупный текст (≥18px bold или ≥24px regular) требует CR≥3:1 (AA). Многие думают, что 3:1 — это «для всего», но для обычного текста нужно 4.5:1.

Ошибка 2: Путают уровни AA и AAA.
AAA — не обязателен для всех, но для госсайтов и банков часто требуется в РФ. Уточните в техзадании.

Ошибка 3: Проверяют только текст/фон, забывая про иконки и границы.
Иконки (если несут смысл, например, лайк/дизлайк) должны иметь CR≥3:1 к фону.

Ошибка 4: Используют альфу (прозрачность).
Если цвет задан через rgba, берите результирующий цвет после наложения на фон — онлайн-калькуляторы не всегда считают это корректно.

Ошибка 5: Доверяют пипетке в Photoshop.
Photoshop показывает контраст по своей формуле, она может отличаться от WCAG. Используйте специализированные инструменты.

Наш фаворит — Проверка контраста цветов WCAG онлайн. Просто введите hex-коды или выберите цвета через палитру — и получите:

• Коэффициент контраста с точностью до сотых;
• Вердикт по каждому уровню (AA/AAA) отдельно для обычного и крупного текста;
• Визуальный предпросмотр текста на фоне.

Другие полезные инструменты для проверки устройств:

• Проверить монитор онлайн — для калибровки цветопередачи, точность важна при выборе цветов.
• Проверить камеру онлайн — если вы верстаете сайт под мобильные устройства, проверьте, как реально выглядит экран.

Все сервисы бесплатны, не требуют регистрации.

Ситуация 1: Текст на фото.
Фото может менять яркость по области. Решение: наложите полупрозрачный фон (overlay) или тень под текст — так вы управляете результирующим цветом.

Ситуация 2: Логотип в подвале.
WCAG не требует контраста для логотипов, которые не являются частью контента (стандартный логотип компании). Но если логотип — интерактивный элемент (ссылка на главную), то контраст текста внутри должен соответствовать.

Ситуация 3: Градиентный фон.
Измерьте контраст в наихудшей точке градиента. Если он меняется плавно, возьмите цвет, ближе всего к тексту по оттенку.

Ситуация 4: Цветовые пары, проходящие AA, но не проходящие AAA.
В коммерческих проектах часто достаточно AA. AAA обязателен для государственных информационных систем (постановление Правительства РФ № 1092).

Разработчикам удобно встраивать проверку в CI/CD. Но для разового аудита подойдут браузерные расширения:

• axe DevTools — сканирует страницу, выдаёт список нарушений контраста с указанием элементов.
• WAVE — накладывает на страницу иконки ошибок, в том числе по контрасту.
• Chrome DevTools (вкладка «Issues») — находит проблемы автоматически при открытии страницы.

Не забывайте проверять не только статику, но и динамические состояния (hover, focus). Для этого включите эмуляцию состояния в DevTools.

Также полезно Проверить клавиатуру онлайн — убедиться, что по всем элементам можно перемещаться табом и видеть фокус (фокус должен иметь контраст ≥3:1).