Проверка контрастности цветов

Проверяет соотношение контрастности цветов по стандартам доступности WCAG 2.1. Мгновенные результаты AA/AAA.

Цвет переднего плана

Цвет фона

Предварительный просмотр крупного текста (18pt жирный)

Предварительный просмотр обычного текста — The quick brown fox jumps over the lazy dog.

14.05:1коэффициент контрастности

AA — Обычный текст (≥ 4,5:1)Пройдено

AA — Крупный текст (≥ 3:1)Пройдено

AAA — Обычный текст (≥ 7:1)Пройдено

AAA — Крупный текст (≥ 4,5:1)Пройдено

Об этом инструменте

Проверка контрастности цветов вычисляет коэффициент контрастности между цветом переднего плана (текстом) и фоном по формуле относительной яркости WCAG 2.1.

WCAG 2.1 определяет два уровня: AA требует 4,5:1 для обычного текста и 3:1 для крупного. AAA требует 7:1 и 4,5:1.

Как использовать

Выберите цвет переднего плана и фона с помощью палитр или введите hex-коды.
Предварительный просмотр показывает, как выглядит текст нормального и крупного размера.
Коэффициент контрастности и результаты WCAG обновляются мгновенно.
Используйте примеры пар для изучения распространённых паттернов доступности.

Случаи использования

UI-дизайнеры проверяют, соответствуют ли подписи кнопок и текст стандартам WCAG. Frontend-разработчики проверяют комбинации текст-фон в дизайн-системах.

Частые вопросы

Что считается "крупным текстом"? — WCAG определяет крупный текст как минимум 18pt (24px) обычный или 14pt (~18.67px) жирный.
Поддерживается ли прозрачность или rgba? — Нет, инструмент работает только с сплошными hex-цветами.
К какому уровню WCAG стремиться? — AA — минимально рекомендуемый уровень для большинства сайтов. AAA обеспечивает лучшую читаемость.
Достаточно ли всегда 4,5:1? — 4,5:1 удовлетворяет WCAG AA, но пользователи с более серьёзными нарушениями зрения могут получить пользу от более высоких значений.