Проверка контраста цветов
Введите цвет текста и фона — увидите коэффициент контраста и живой пример.
Как пользоваться
Цвет можно вписать в любом привычном виде: #1a1a1a, rgb(20, 20, 20) или названием вроде teal. Кнопка меняет цвета местами — полезно проверить и светлую, и тёмную тему. Ниже видно, проходит ли пара уровни AA и AAA.
Уровень AA требуют законы о доступности и корпоративные стандарты: коэффициент от 4,5 для обычного текста и от 3 для крупного. Крупным считается текст от 24 пикселей или от 19 пикселей жирным начертанием — для него порог мягче, потому что толстые буквы читаются легче.
Частые вопросы
Что означает коэффициент контраста?
Это отношение яркости светлого цвета к тёмному. Минимум — 1 (цвета совпадают), максимум — 21 (чёрный на белом). Считается по формуле из спецификации WCAG, с поправкой на то, что глаз воспринимает яркость нелинейно.
Чем AA отличается от AAA?
AA — практический минимум, его требуют законодательство и большинство корпоративных стандартов: 4,5 для обычного текста. AAA строже, 7 для обычного текста, и применяется в основном к основному тексту в продуктах, где доступность в приоритете. Требовать AAA от всего интерфейса обычно нереалистично.
Какой текст считается крупным?
От 24 пикселей обычным начертанием либо от 18,66 пикселя жирным. Для такого текста пороги ниже: 3 для AA и 4,5 для AAA.
Проверять ли контраст иконок и рамок?
Да, для элементов интерфейса и графики WCAG требует коэффициент от 3. Введите цвет иконки и цвет фона так же, как для текста, и ориентируйтесь на строку крупного текста.