Как это работает
Введите цвет текста и цвет фона, чтобы получить коэффициент контраста, живой предпросмотр и прохождение каждого уровня WCAG. Если пара не проходит, проверка предложит ближайший цвет текста с тем же оттенком, достигающий 4.5:1, — он применяется одним нажатием.
Contrast ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05)
Требования WCAG
- Обычный текст: не менее 4.5:1 для AA и 7:1 для AAA.
- Крупный текст (24 px или 18.66 px полужирный): не менее 3:1 для AA и 4.5:1 для AAA.
- Кнопки, значки и рамки форм: не менее 3:1 относительно окружения.
Советы
- Серый текст на белом часто не проходит — проверяйте также заполнители и подписи.
- Хороший контраст помогает всем, включая тех, кто читает на улице с телефона.
- Используйте кнопку обмена, чтобы проверить светлый текст на тёмном фоне.
Стандарты и источники
- Формула контраста и пороги соответствуют критериям успеха WCAG 2.2 1.4.3, 1.4.6 и 1.4.11 (W3C)
Last reviewed 7 октября 2026 г.
Часто задаваемые вопросы
Какой коэффициент контраста нужен?
Обычному тексту нужно 4,5:1 для WCAG AA и 7:1 для AAA. Крупному тексту нужно 3:1 для AA и 4,5:1 для AAA.
Что считается крупным текстом?
Текст от 24 px или от 18,66 px при жирном начертании.
Что делать, если мои цвета не проходят?
Используйте предложенный цвет. Он сохраняет ваш тон и насыщенность и меняет только светлоту, пока пара не достигнет 4,5:1.
Важен ли контраст для кнопок и значков?
Да. WCAG требует минимум 3:1 между элементами интерфейса, такими как кнопки, значки и рамки полей ввода, и тем, что их окружает.
Влияет ли прозрачность на результат?
Проверка использует сплошные цвета. Для полупрозрачного текста проверяйте цвет, который реально виден поверх фона.