Инструменты › Контраст WCAG

Проверка контраста
цветов по WCAG

Введи цвет текста и фона — получи коэффициент контраста и проверку по стандартам доступности WCAG AA и AAA. Бесплатно, без регистрации.

Текст
Фон
Крупный текст (18px+)
Обычный текст (14px). Жирный текст (14px). Это пример того как выглядит контент на выбранном фоне с выбранным цветом текста.
21 : 1
Коэффициент контраста
Требования WCAG 2.1
📝AA — обычный текст: минимум 4.5:1
🔤AA — крупный текст (18px+ или 14px жирный): минимум 3:1
✨AAA — обычный текст: минимум 7:1
⭐AAA — крупный текст: минимум 4.5:1

Что такое WCAG

WCAG (Web Content Accessibility Guidelines) — международный стандарт доступности веб-контента. Уровень AA — базовый, обязательный для большинства сайтов. AAA — расширенный, для максимальной доступности.

Как считается контраст

Коэффициент контраста рассчитывается по формуле WCAG на основе относительной яркости (luminance) двух цветов. Максимальный контраст — 21:1 (чёрный на белом), минимальный — 1:1 (одинаковые цвета).

Зачем это важно

Низкий контраст затрудняет чтение для людей с нарушениями зрения. Во многих странах соответствие WCAG AA — юридическое требование для государственных и коммерческих сайтов.

Часто задаваемые вопросы
Какой минимальный контраст нужен для сайта?
Для обычного текста — минимум 4.5:1 (уровень AA). Для крупного текста (18px и выше или 14px жирный) — 3:1. Это базовые требования WCAG, которые нужно соблюдать для доступности.
В чём разница между AA и AAA?
AA — стандартный уровень доступности, достижимый для большинства дизайнов. AAA — расширенный уровень с более высокими требованиями к контрасту. Соответствие AAA желательно, но не всегда обязательно.
Распространяется ли требование на изображения?
Требования WCAG к контрасту распространяются на текст — обычный и в виде изображений. Декоративные элементы и логотипы исключены из требований.
Инструмент бесплатный?
Да, полностью бесплатно. Без ограничений и без регистрации.