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

Контраст между текстом и фоном - не эстетический вопрос, а требование доступности. Если пара цветов не проходит порог WCAG, часть посетителей физически не сможет прочитать текст на сайте.

Открыть инструмент проверки контраста

Как это работает

Как только вы выбираете направление палитры или меняете любой цвет вручную, сервис пересчитывает контраст для каждой значимой пары: текст на фоне, текст на поверхности, текст на кнопке. Результат - число от 1 до 21 и отметка о соответствии уровню AA или AAA.

Что означают уровни

• AA - минимум 4.5:1 для обычного текста, 3:1 для крупного
• AAA - минимум 7:1 для обычного текста, 4.5:1 для крупного

Если пара не проходит проверку

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