Обзор Сетка контраста
Матрица WCAG N×N для списка цветов
Как использовать
Проверьте всю палитру сразу, отобразив каждую пару цветов с её контрастом в одной сетке.
Ограничения
Матрица сравнивает только введённые цвета и не знает ни размеров шрифта, ни реальных сочетаний.
Сетка контраста
Нажмите на ячейку, чтобы скопировать пару текста и фона.
Как читать матрицу
Строки — цвет текста, столбцы — фон. В каждой ячейке показано отношение WCAG для пары и метки AA и AAA для обычного текста.
Диагональ сравнивает цвет с самим собой, поэтому всегда даёт 1:1 и служит только ориентиром.
Когда использовать
Проверяйте сетку перед релизом набора токенов. Она выявляет пары, которые выглядят нормально по отдельности, но проваливаются в сочетании, особенно средние брендовые цвета для текста и фона одновременно.
Частые вопросы
Что означают метки?
AA требует 4,5:1, AAA — 7:1 для обычного текста. Крупный текст использует 3:1 и 4,5:1.
Почему диагональ помечена?
Цвет против самого себя всегда даёт 1:1, поэтому это ориентир, а не ошибка.
Можно ли вставить больше пяти цветов?
Да. Добавляйте по цвету в строке, и матрица вырастет.