Проверка Контраста Цветов
Проверьте коэффициент контрастности цветов для соответствия WCAG. Тестируйте цвета переднего и заднего плана.
The quick brown fox jumps over the lazy dog
Основной текст размером 16px — именно его будут читать ваши посетители.
Рекомендации по доступности WCAG
AA Normal (4.5:1): Минимальный контраст для обычного текста. Требуется для большинства веб-контента.
AA Large (3:1): Минимальный контраст для крупного текста (18pt+ или 14pt+ жирный).
AAA Normal (7:1): Улучшенный контраст для обычного текста. Высший стандарт доступности.
AAA Large (4.5:1): Улучшенный контраст для крупного текста. Рекомендуется для критического контента.
Пресеты
История
Рекомендации по доступности WCAG
Проверка контраста цветов помогает убедиться, что ваш сайт соответствует стандартам доступности WCAG.
Популярные
О проверке Контраста Цветов
Задайте цвет текста и фона HEX-кодом или через палитру, и инструмент покажет коэффициент контрастности по WCAG 2.1 с отметками «пройдено» и «не пройдено» для AA обычного текста (4.5:1), AA крупного текста (3:1), AAA обычного (7:1) и AAA крупного (4.5:1). Живой образец показывает пару в размере заголовка и основного текста — именно это нужно дизайнеру перед утверждением палитры. Расчёт относительной яркости идёт в вашем браузере, а сохранённые пары остаются в локальном хранилище.
Примеры использования
Как использовать
Задайте цвет текста в поле «Передний план»: используйте палитру или впишите hex-значение, например #4f46e5, в поле рядом.
Так же задайте цвет страницы в поле «Фон»: большой предпросмотр Aa перерисовывается мгновенно, а значок с коэффициентом в его правом верхнем углу обновляется.
Изучите четыре карточки WCAG под предпросмотром — AA для обычного текста, AA для крупного, AAA для обычного и AAA для крупного: на каждой стоит зелёная галочка или красный крестик относительно порогового значения.
Нажмите стрелки обмена между двумя полями цвета, чтобы проверить обратное сочетание, или выберите пресет — например, «Белый на тёмном» или GitHub Dark — чтобы загрузить известную пару.
Нажмите «Копировать» под крупным числом коэффициента, чтобы поместить в буфер обмена сам коэффициент и все четыре результата проверки, или «Сохранить», чтобы оставить пару в ленте истории.
Советы профессионалов
- Вставляйте содержимое напрямую — Проверка контрастности цветов распознаёт типичные форматы ввода и сам подбирает разумные настройки.
- Используйте горячие клавиши (Ctrl/Cmd+A — выделить всё, Ctrl/Cmd+C — скопировать), чтобы работать в Проверке контрастности цветов быстрее.
- Очень большие данные разбивайте на части: вкладка браузера справится и с мегабайтами текста, но разбор огромной нагрузки может ненадолго подвесить интерфейс.
- Проверка контрастности цветов не ведёт журналов и не сохраняет введённые данные. Если нужна история, копируйте важные результаты в локальный файл или в приложение для заметок.
- Сочетайте Проверку контрастности цветов с другими инструментами сайта (форматировщиками, конвертерами, кодировщиками), чтобы выстраивать полные цепочки обработки данных, не выходя из браузера.
Часто задаваемые вопросы
Да, полностью бесплатно: без регистрации, без ключей API, без водяных знаков и без ограничений на использование.
Нет. Проверка контрастности цветов работает полностью на стороне клиента, в вашем браузере. Введённые данные никогда не попадают на наши серверы.
Жёсткого предела нет, но при объёме больше нескольких мегабайт возможны замедления — всё зависит от объёма памяти вашего устройства.
Да. Всё, что вы получаете с помощью Проверки контрастности цветов, можно свободно использовать в любых личных и коммерческих проектах.
Основная логика выполняется в браузере на JavaScript, поэтому после первой загрузки страницы вы обычно можете продолжать работу без подключения к сети.
Никаких. Проверка контрастности цветов работает в вашем браузере, поэтому вы можете обработать столько данных, сколько позволит ваше устройство, — без ключей API и без ограничения скорости.