Проверка контраста по WCAG
Красивый серый текст на белом может не читаться людьми со слабым зрением — и не пройти проверку доступности. Введите два цвета — покажем коэффициент контраста и вердикт по стандарту WCAG.
Как читать результат
Коэффициент контраста — число от 1 (цвета совпадают) до 21 (чёрный на белом). Чем выше, тем легче читать. WCAG — международный стандарт доступности — задаёт пороги.
Уровни AA и AAA. AA — обязательный минимум для большинства сайтов: контраст 4.5 для обычного текста и 3.0 для крупного. AAA — повышенный: 7.0 и 4.5 соответственно. Крупным считается текст от 18pt (≈24px) обычный или от 14pt (≈18.5px) жирный — ему прощается меньший контраст, потому что толстые буквы читаются легче.
Нетекстовые элементы — границы полей, иконки, состояния кнопок — требуют контраста 3.0 с фоном. Про них часто забывают, а без контраста интерфейс становится нечитаемым для многих.
Считается по формуле WCAG прямо в браузере, ничего не отправляется. Собрать палитру для картинки поможет конструктор промптов, а проверить читаемость текста — оценка читаемости.