Проверка цветового контраста

Бесплатная программа проверки цветового контраста WCAG. Проверьте цвета текста и фона на соответствие специальным требованиям AA и AAA с помощью коэффициента контрастности в реальном времени и предварительного просмотра, шестнадцатеричного или RGB.

Создан и поддерживается Shehzad Munir. ·

Проверка цветового контраста
Loading Loading Contrast Checker
Share

Сделайте ваш текст читабельным для всех

Проверьте коэффициент контрастности между цветом текста и фона в соответствии со стандартами WCAG AA и AAA с помощью предварительного просмотра в реальном времени и шестнадцатеричного или RGB-входа.

Низкоконтрастный текст — одна из наиболее распространенных проблем доступности. Эта программа проверки вычисляет точный коэффициент контрастности между цветами вашего текста и фона, используя официальную формулу относительной яркости WCAG, а затем сообщает вам, соответствует ли он AA (4,5:1 для обычного текста, 3:1 для большого текста) и более строгому AAA (7:1 и 4,5:1). Предварительный просмотр в реальном времени показывает реальный текст выбранных вами цветов.

Функции

  • Результаты WCAG AA и AAA (пройден/не пройден)
  • Расчет коэффициента контрастности в реальном времени
  • Шестнадцатеричный и RGB-вход с палитрами цвета
  • Предварительный просмотр текста в реальном времени в ваших цветах
  • Нормальные и большие текстовые пороги
  • Запускается локально в вашем браузере

Как использовать Проверка цветового контраста

  1. 1

    Выберите цвет текста

    Выберите или введите цвет переднего плана.

  2. 2

    Выберите фон

    Выберите или введите цвет фона.

  3. 3

    Прочитайте соотношение

    Посмотрите коэффициент контрастности и результаты AA/AAA.

  4. 4

    Регулировать

    Настраивайте цвета, пока они не исчезнут.

Распространенные случаи использования

  • Убедитесь, что текст пользовательского интерфейса соответствует требованиям WCAG.
  • Проверьте кнопку и ссылку на контрастность
  • Аудит цветовой палитры бренда
  • Исправьте низкоконтрастный маркетинговый текст

Подробное руководство

Введите цвета любым удобным для вас способом

Используйте палитры цветов или введите шестнадцатеричные коды и значения rgb() напрямую, инструмент анализирует оба. Когда вы настраиваете любой цвет, соотношение и значки «прошел/не прошел» мгновенно обновляются, поэтому вы можете подталкивать оттенок до тех пор, пока он не будет соответствовать требованиям. Все работает локально, что делает его быстрым помощником при разработке пользовательского интерфейса, тем и маркетинговых страниц.

Что означают уровни контрастности WCAG

WCAG 2 измеряет контрастность как соотношение от 1:1 (нет контраста) до 21:1 (черное на белом). Уровень AA, обычный юридический и отраслевой базовый уровень, требует не менее 4,5:1 для обычного текста и 3:1 для крупного текста, что означает обычный размер 24 пикселя или жирный шрифт примерно 18,66 пикселя и выше. Уровень AAA повышает их до 7:1 и 4,5:1. Части пользовательского интерфейса, такие как границы ввода, кольца фокусировки и значки, несущие смысл, должны быть как минимум 3:1 относительно их окружения. Соотношение рассчитывается на основе относительной яркости каждого цвета, поэтому два цвета, которые выглядят по-разному, все равно могут потерпеть неудачу, если они одинаково яркие, что характерно для красного на зеленом.

Исправление неудачной цветовой пары

Если пара не подходит, измените яркость, а не оттенок: затемняйте текст или осветляйте фон небольшими шагами, пока соотношение не будет соответствовать, и цвет по-прежнему будет соответствовать вашему бренду. Фирменные цвета средних тонов, такие как средний оранжевый или бирюзовый, часто не могут сочетаться с белым текстом при АА. В этом случае используйте цвет бренда для больших заголовков, границ или фона и установите основной текст в более темный оттенок. Также проверьте текст-заполнитель и отключенные состояния, поскольку они часто слишком тусклые. Помните, что соотношение не учитывает тонкие шрифты и текст на изображениях, поэтому в таких случаях оставляйте дополнительный запас.

Часто задаваемые вопросы

Какой коэффициент контрастности мне нужен для прохождения WCAG?

Для АА обычный текст требует соотношения 4,5:1, а крупный текст — 3:1. Для более строгого формата AAA обычному тексту требуется соотношение 7:1, а большому — 4,5:1. Крупный текст имеет размер примерно 18 пт или 14 пт жирный.

Как рассчитывается коэффициент контрастности?

Он использует формулу относительной яркости WCAG для обоих цветов, затем делит более светлую яркость (плюс 0,05) на более темную (плюс 0,05), получая значение от 1:1 до 21:1.

Могу ли я ввести RGB, а также шестнадцатеричный формат?

Да: введите шестнадцатеричные коды, например #1e293b или rgb(30, 41, 59), или воспользуйтесь палитрой цветов. Оба формата анализируются мгновенно.

Это бесплатно?

Да, совершенно бесплатно, без регистрации и полностью работает в вашем браузере.

Как проверить, доступны ли два цвета вместе?

Введите шестнадцатеричные значения текста и фона; программа проверки вычисляет коэффициент контрастности и показывает, соответствует ли он требованиям WCAG AA и AAA для обычного и большого текста.

Почему цветовой контраст важен для доступности?

Низкая контрастность затрудняет чтение текста людьми с плохим зрением или дальтонизмом. Соблюдение коэффициентов WCAG обеспечивает разборчивость контента для всех и является общим требованием доступности и SEO.

Из журнала

All articles →
How to Remove EXIF Metadata From Your PhotosTool Guides

How to Remove EXIF Metadata From Your Photos

Photos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.

SM
Shehzad Munir
Aug 19, 2026 · 3 min
What Is CPS? How to Test and Improve Your Click SpeedTool Guides

What Is CPS? How to Test and Improve Your Click Speed

CPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.

SM
Shehzad Munir
Aug 17, 2026 · 3 min
How to Merge PDF Files for Free (Without Uploading Them)Tool Guides

How to Merge PDF Files for Free (Without Uploading Them)

Combine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.

SM
Shehzad Munir
Aug 14, 2026 · 2 min