Проверка контраста цветов 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 к контрасту распространяются на текст — обычный и в виде изображений. Декоративные элементы и логотипы исключены из требований.

Инструмент бесплатный?

Да, полностью бесплатно. Без ограничений и без регистрации.

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

Что такое WCAG

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

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

Другие инструменты