Русский
Проверьте контраст WCAG и исправьте проблемные сочетания в один клик.
Последнее обновление
Крупный заголовок — 24px bold
Текст. Быстрая бурая лиса прыгает через ленивого пса. Прочитайте абзац-другой и проверьте, остаётся ли контраст комфортным при долгом чтении.
Подпись — 12px regular. WCAG защищает только 14pt и выше в этом размере, так что мелкому тексту нужен самый строгий контраст.
*Проверка контраста* — то, чем дизайнеры и разработчики пользуются перед публикацией экрана. Она считает **коэффициент контраста** между двумя цветами — текстом и фоном за ним — по формуле Web Content Accessibility Guidelines (WCAG). Чем больше число, тем легче читается текст.
WCAG задаёт три порога. **3:1** — минимум для крупных заголовков (24px+ regular или 18,66px+ bold) и для видимой границы интерактивных компонентов: кнопок, полей форм, иконок. **4,5:1** — минимум AA для основного текста, ориентир большинства команд. **7:1** — AAA, высшая оценка, серьёзно помогающая людям со сниженным зрением.
Контраст **не равен** «насколько яркие» цвета. Два сочных бренд-цвета могут оставаться нечитабельными, если их *светлота* близка. Инструмент применяет формулу WCAG по каждому каналу, показывает точный коэффициент и оценивает каждый контекст, чтобы вам не приходилось гадать.
Введите или вставьте HEX или используйте пипетку. Передний план — это ваш текст или иконка; фон — то, что за ним.
Большое число слева — коэффициент WCAG. Ниже 3:1 — рисково для любой UI; ниже 4,5:1 — провал для основного текста.
Три строки показывают pass/fail для обычного текста (4,5/7), крупного текста (3/4,5) и компонентов UI (3:1). Стремитесь к зелёным галочкам в каждой строке, актуальной для вашего дизайна.
Когда AA не проходит, инструмент сдвигает светлоту переднего плана — сохраняя оттенок — до прохождения. Ещё раз нажмёте — догоните AAA.
Когда оба цвета проходят нужные контексты, скопируйте CSS-сниппет (color: + background:) и вставьте в стиль или в файл дизайн-токенов.
Сопоставьте, что вы стилизуете, с нужным уровнем. Источник: WCAG 2.2 Understanding 1.4.3 и 1.4.11.
| Цель | AA min | AAA min | Заметки |
|---|---|---|---|
| Основной текст (< 18pt regular) | 4.5 : 1 | 7 : 1 | Базовое правило для абзацев, лейблов, подписей |
| Крупный текст (≥ 18pt regular или ≥ 14pt bold) | 3 : 1 | 4.5 : 1 | Заголовки, hero-копия, крупные цитаты |
| UI-компоненты и графика | 3 : 1 | — | Рамки кнопок, поля форм, иконки, focus-обводки |
| Логотип или чистый декор | Исключено | Исключено | Логотипы и эпизодический текст не входят в требование — но удобство всё равно важно |
| Неактивное состояние | Исключено | Исключено | Disabled-контролы исключены, но это не повод выпускать слабые дефолты |
color: #1f2937; /* slate-800 */background: #f9fafb; /* slate-50 *//* Contrast ratio ≈ 14.6:1 */Классический тёмный slate на почти-белом. Проходит AAA для основного текста (≥ 7:1) с запасом. Большинству продуктовых UI стоит метить именно сюда по умолчанию.
color: #3b82f6; /* blue-500 */background: #ffffff;/* Contrast ratio ≈ 4.0:1 */Сочный синий на белом часто оказывается около 4:1 — читаем для крупных заголовков (проходит 3:1 AA Large), но не дотягивает до 4,5:1 для основного текста. Для кнопок и CTA от 18px подходит, для абзацев — нет.
color: #facc15; /* amber-400 */background: #ffffff;/* Contrast ratio ≈ 1.6:1 */Яркий жёлтый на белом — известная ловушка: цвета громкие, но светлота слишком близка. Эту пару берите на тёмные фоны (#facc15 на #1f2937 ≈ 12:1).
