4,5 к 1 — минимум для обычного текста
Коэффициент контраста между текстом и фоном и проверка на соответствие уровням доступности AA и AAA.
Контраст считается не по разнице цветов, а по относительной яркости с учётом того, что человеческий глаз воспринимает зелёный сильнее красного, а синий слабее всего. Отсюда и странные на вид коэффициенты в формуле WCAG.
Пороги простые: обычному тексту нужно 4,5 к 1 для уровня AA и 7 к 1 для AAA. Крупному тексту — от 18 пунктов или от 14 полужирного — достаточно 3 к 1 и 4,5 к 1 соответственно.
Что показывает калькулятор
- Коэффициент контраста в привычном виде «столько-то к одному»
- Прохождение уровней AA и AAA отдельно для обычного и крупного текста
- Относительную яркость каждого из двух цветов
Что важно учитывать
- Формула из WCAG 2.1: яркость с удалением гамма-коррекции sRGB, затем отношение с добавлением 0,05 к обоим значениям.
- Прозрачность не учитывается — введите фактический цвет после наложения на фон.
Частые вопросы
Какой контраст нужен по закону?
В России ГОСТ Р 52872 и требования к сайтам госорганов опираются на WCAG уровня AA, то есть 4,5 к 1. В Евросоюзе и США уровень AA тоже де-факто обязателен для публичного сектора.
Что считается крупным текстом?
От 18 пунктов обычного начертания или от 14 пунктов полужирного — примерно 24 и 18,66 пикселя. Для него достаточно контраста 3 к 1.
Нужен ли контраст для иконок и границ?
Да, WCAG 2.1 требует 3 к 1 для графических элементов и элементов интерфейса — границ полей ввода, иконок, индикаторов фокуса.
Почему серый текст такой популярный и такой плохой?
Дизайнерам он кажется аккуратнее, но #999999 на белом даёт всего 2,8 к 1 — это провал по всем уровням. На мобильном экране в солнечный день такой текст читается с трудом.
Мини-пример расчёта
Серый текст на белом
Входные данные: #767676 на #ffffff
Результат: Контраст 4,54 к 1 — AA пройден
Комментарий: Это ровно та граница, ниже которой серый текст на белом перестаёт проходить AA. Чуть светлее — #777777 — и проверка уже не проходит.