Проверка контрастности
Онлайн калькулятор контрастности текста и фона по стандартам WCAG 2.1 (AA и AAA). Идеальный инструмент для UI/UX дизайнеров.
The quick brown fox
Jumped over the lazy dog. Этот текст показывает, как выбранный вами цвет читается на заданном фоне. Проверьте контрастность, чтобы обеспечить доступность интерфейса.
Зачем проверять контрастность цветов?
В современном веб-дизайне читаемость текста — это жесткое требование закона и стандартов доступности. Стандарты WCAG 2.1 (Web Content Accessibility Guidelines) регламентируют соотношение яркости между текстом и фоном. Это необходимо, чтобы ваш контент могли воспринимать люди с нарушениями зрения, а также пользователи смартфонов при ярком солнечном свете.
Уровень AA (Минимум)
Коэффициент должен быть не менее 4.5:1 для обычного текста и 3.0:1 для крупных заголовков. Это стандарт для большинства корпоративных сайтов.
Уровень AAA (Максимум)
Требует контрастности 7.0:1. Этот уровень обязателен для государственных ресурсов и образовательных порталов, где доступность критична.
Используйте наш калькулятор вместе с конвертером цветов для подбора идеальных пар. Помните, что доступный интерфейс повышает конверсию и лояльность аудитории.
Вопросы и ответы по доступности (WCAG)
Влияет ли контрастность на SEO сайта?
Да, напрямую. Поисковые системы, такие как Google, используют метрики Core Web Vitals и алгоритмы оценки удобства пользования (Page Experience). Низкая контрастность текста помечается в отчетах Lighthouse как ошибка доступности, что может негативно сказаться на ранжировании в мобильной выдаче.
Что считается «крупным текстом» в стандартах WCAG?
Согласно WCAG, крупным считается текст размером от 18pt (примерно 24px) при обычном начертании или от 14pt (примерно 18.6px) при полужирном (bold) начертании. Для такого текста требования к контрастности ниже.
Как исправить низкую контрастность?
Самый простой способ — немного затемнить цвет текста или осветлить фон. В нашем инструменте вы можете двигать ползунки яркости в реальном времени, пока индикатор не покажет заветное «Pass» для уровней AA или AAA.