Онлайн-инструмент для проверки контраста цветов WCAG
Введите цвет текста и фона — проверим соотношение контраста по стандарту WCAG 2.1 (AA и AAA).
Результат
Вывод
ИИ-аудит Analito проверяет технические ошибки, мета-теги, скорость и индексацию — за 2 минуты, с конкретными рекомендациями.
Что такое контраст цветов WCAG
WCAG (Web Content Accessibility Guidelines) — стандарт доступности веб-контента. Стандарт определяет минимальные требования к контрасту между текстом и фоном. Уровень AA требует соотношения 4.5:1 для обычного текста, уровень AAA — 7:1. Сайты с плохим контрастом сложно читать людям с нарушениями зрения.
Как рассчитывается контраст
Контраст вычисляется по формуле: (L1 + 0.05) / (L2 + 0.05), где L1 — относительная яркость более светлого цвета, L2 — более тёмного. Относительная яркость рассчитывается по стандарту sRGB с учётом гамма-коррекции.
Зачем проверять контраст текста и фона
Достаточный контраст между цветом шрифта и подложкой — основа читаемости интерфейса. Светло-серый текст на белом фоне, бледные подписи к полям или цветные ссылки на пёстром фоне тяжело воспринимаются на солнце, на дешёвых экранах и людьми со слабым зрением или дальтонизмом. Этот онлайн-проверщик контрастности цветов сразу показывает соотношение в формате X:1 и наглядный предпросмотр текста на выбранном фоне, поэтому ещё на этапе вёрстки видно, проходит ли пара цветов по нормам доступности или текст придётся затемнить.
Как добиться нужного уровня доступности
Если соотношение ниже 4.5:1, повысить контрастность можно несколькими способами: сделать текст темнее, а фон светлее (или наоборот), увеличить размер и жирность шрифта — для крупного текста требования мягче, или подобрать другой оттенок акцентного цвета. Подбирайте основные цветовые пары палитры так, чтобы заголовки, основной текст, кнопки и ссылки проходили хотя бы уровень WCAG AA. Проверка контраста по HEX-кодам — быстрый способ заранее отсеять нечитаемые сочетания и сделать сайт удобнее для всех посетителей, что снижает отказы и улучшает поведенческие факторы.
Частые вопросы
Что такое крупный текст в WCAG?
По стандарту WCAG крупным считается текст размером от 18pt (24px) для обычного начертания или от 14pt (18.67px) для жирного. Для крупного текста требования к контрасту мягче: AA требует 3:1, AAA — 4.5:1.
Обязательно ли выполнять требования WCAG?
В ряде стран (США, Европа) сайты государственных органов и крупных компаний обязаны соответствовать WCAG. Для коммерческих сайтов это требование необязательно, но хороший контраст улучшает читаемость для всех пользователей и положительно влияет на поведенческие факторы.
Чем отличаются уровни WCAG AA и AAA?
AA — базовый уровень доступности, к которому стремится большинство сайтов: 4.5:1 для обычного текста и 3:1 для крупного. AAA — повышенный уровень: 7:1 для обычного и 4.5:1 для крупного текста. AAA выполнить сложнее, особенно для брендовых и акцентных цветов, поэтому его берут как ориентир для самого важного текста.
Как исправить недостаточный контраст текста?
Сделайте текст темнее, а фон светлее (или наоборот), увеличьте размер или жирность шрифта — для крупного текста нормы мягче. Избегайте светло-серого текста на белом фоне и цветных надписей на пёстром фоне. Подбирайте оттенки так, чтобы соотношение контраста было не ниже 4.5:1, и проверяйте каждую пару в инструменте.
Какое соотношение контраста считается хорошим?
Минимально допустимое — 4.5:1 (WCAG AA). Оптимальное — 7:1 и выше (WCAG AAA). Чёрный текст на белом фоне имеет контраст 21:1 — максимально возможный.
Влияет ли контраст на SEO и поведение пользователей?
Напрямую контраст не входит в факторы ранжирования, но плохо читаемый текст увеличивает отказы и сокращает время на сайте. Хорошая читаемость удерживает посетителей, а это уже косвенно помогает позициям в Яндексе и Google через поведенческие факторы.
Учитывается ли прозрачность цвета при проверке?
Стандартный расчёт WCAG ведётся для непрозрачных цветов в формате HEX. Если у текста или фона есть прозрачность (alpha), сначала определите итоговый видимый цвет поверх подложки и проверяйте уже его — иначе результат будет неточным.
ИИ проверит 50+ параметров: SEO, скорость, юзабилити, контент. Конкурентный анализ и план действий.