Как пользоваться: Проверка контраста
- Введите цвет текста и цвет фона (HEX, rgb(), hsl(), oklch() или название CSS) или выберите цвет в палитре.
- Посмотрите коэффициент контраста и результаты AA/AAA для обычного текста, крупного текста и элементов интерфейса.
- Проверьте предпросмотр в реальном времени: заголовки, основной текст, мелкий шрифт, кнопку и границу поля ввода.
- Если какой-то уровень не пройден, нажмите Использовать рядом с ближайшим подходящим цветом, а затем скопируйте новый HEX в свой CSS.
Что такое коэффициент контрастности?
Коэффициент контрастности сравнивает относительную яркость двух цветов по шкале от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом). Рекомендации по доступности веб-контента (WCAG) используют его, чтобы определить, читается ли текст людьми с низким зрением или нарушениями цветовосприятия, а также теми, кто смотрит на телефон при ярком свете. Это также юридический ориентир: законы о доступности, например Европейский акт о доступности и ADA, обычно оценивают по уровню AA стандарта WCAG 2.x.
Требования WCAG 2.2 к контрастности
| Критерий | Уровень | Обычный текст | Крупный текст |
|---|---|---|---|
| 1.4.3 Контрастность (минимальная) | AA | 4.5:1 | 3:1 |
| 1.4.6 Контрастность (расширенная) | AAA | 7:1 | 4.5:1 |
| 1.4.11 Контрастность нетекстовых элементов | AA | 3:1 для границ компонентов интерфейса, индикаторов фокуса и значимых иконок и графики | |
Крупным текстом считается текст размером не менее 18 pt (24 px) обычного начертания или 14 pt (≈18.66 px) полужирного. Логотипы, чисто декоративный текст и текст неактивных элементов управления не обязаны соответствовать требованиям.
Как рассчитывается коэффициент
Каждый канал sRGB линеаризуется (значения ≤ 0.04045 делятся на 12.92, остальные вычисляются как ((c + 0.055) / 1.055)2.4), затем из них вычисляется относительная яркость: L = 0.2126 R + 0.7152 G + 0.0722 B. Коэффициент равен (Llighter + 0.05) / (Ldarker + 0.05). Пороги строгие: #777777 на белом даёт 4.47:1 и не проходит AA, а #767676 даёт 4.54:1 и проходит. Поэтому этот инструмент отбрасывает лишние знаки, а не округляет коэффициент. Полупрозрачный текст сначала смешивается с фоном так же, как его отрисует браузер.
Что такое APCA?
Accessible Perceptual Contrast Algorithm (APCA) — метод оценки контраста, который рассматривается как кандидат для WCAG 3. Он выдаёт значение контраста яркости Lc примерно от 0 до 106 (отрицательное для светлого текста на тёмном фоне) и учитывает полярность: светлый текст на тёмном и тёмный на светлом воспринимаются по-разному. Ориентиры: для основного текста предпочтителен Lc 90, минимум для основного текста — Lc 75, для остального текстового контента — Lc 60. APCA пока остаётся черновиком, поэтому для соответствия требованиям сегодня ориентируйтесь на WCAG 2.x, а APCA используйте как дополнительное мнение, особенно для тёмных тем.
Как исправить неподходящую пару
Таблица предложений находит ближайший подходящий цвет, меняя только яркость (HSL) текста или фона, поэтому фирменный оттенок сохраняется. Для более тёмных или светлых вариантов фирменного цвета создайте полную шкалу тонов и оттенков с помощью Конвертера цветов и проверьте пары здесь. В Webflow Designer режим Vision preview имитирует нарушения цветовосприятия, но не показывает коэффициент, поэтому перед публикацией проверьте точные значения здесь.
Также ищут как: wcag контраст, apca контраст, контрастность цветов a11y, aa aaa wcag.
Инструменты, которые хорошо сочетаются с Проверка контраста
- Генератор CSS-градиентов — Создайте градиент визуально: перетаскивайте цветовые стопы, меняйте угол или тип, начните с готового пресета — и скопируйте готовый CSS с запасным сплошным цветом.
- Проверка alt-тегов — Проверьте все изображения страницы в одной таблице: статус alt-текста, размер файла, атрибуты width и height, формат и ленивую загрузку.
- Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
- Конвертер HEX в OKLCH — Вставьте HEX-цвет и получите его значение OKLCH для CSS.