Проверка контрастности WCAG — бесплатно
Проверяйте, соответствуют ли два цвета стандартам контрастности WCAG AA и AAA для доступности. Предпросмотр при нескольких размерах текста с автоматическими рекомендациями при низком контрасте.
Крупный заголовок
Средний основной текст (18px) для чтения и контента.
Обычный основной текст (16px) для абзацев.
Мелкий основной текст (14px) для подписей и метаданных.
Коэффициент контраста
Требуется 4.5:1 · у вас 14,63:1
Требуется 3.0:1 · у вас 14,63:1
Требуется 7.0:1 · у вас 14,63:1
Требуется 4.5:1 · у вас 14,63:1
Требуется 3.0:1 · у вас 14,63:1
Быстрые пресеты
На основе рекомендаций по контрасту WCAG 2.1. Крупный текст = 18pt (24px) обычный или 14pt (18,66px) жирный. HEX-коды обновляются в обоих направлениях: введите hex или выберите цвет — оба поля остаются синхронизированными.
Частые применения
- Аудит веб-страниц на соответствие WCAGУбедитесь, что цвета текста вашего сайта соответствуют стандартам контрастности WCAG AA или AAA для доступности.
- Проверка комбинаций цветов брендаПротестируйте пары палеток брендовых цветов, чтобы убедиться, что они работают для доступного дизайна пользовательского интерфейса.
- Тестирование палеток цветов темного режимаСветлый текст на темном фоне все еще может не пройти контрастность — проверьте пары палеток темного режима здесь.
- Цветовые пары для печатных материаловПлакаты, вывески и печатные материалы также нуждаются в читаемом контрасте — особенно для пожилых зрителей.
- Проектирование доступных цветов кнопокУбедитесь, что ваши CTA, кнопки действия и ссылки соответствуют WCAG на фоне.
Как это работает
Проверка контраста полностью работает в вашем браузере с использованием алгоритма относительной яркости WCAG 2.1 — без библиотеки, без сервера, просто написанная вручную математика, точно следующая спецификации. Каждый результат обновляется в реальном времени по мере ввода или выбора цвета.
- 1Ввод hex и нормализацияПринимаются как 3-значные (#abc), так и 6-значные (#aabbcc) hex-значения, нормализуемые в полные тройки RGB. Недопустимый ввод немедленно отклоняется, а не тихо переходит к чёрному по умолчанию, так что появляется красная рамка вместо вводящего в заблуждение результата прохождения.
- 2Расчёт яркости WCAGКаждый цвет преобразуется в относительную яркость по формуле WCAG 2.1: значения каналов sRGB линеаризуются с кусочной гамма-коррекцией (деление на 12,92 ниже 0,03928, возведение в степень 2,4 выше), затем взвешиваются как 0,2126R + 0,7152G + 0,0722B.
- 3Коэффициент контраста и проверки соответствияКоэффициент контраста вычисляется как (светлее + 0,05) / (темнее + 0,05) и проверяется по всем пяти порогам WCAG: AA обычный текст (4,5:1), AA крупный текст (3:1), AAA обычный текст (7:1), AAA крупный текст (4,5:1), и компоненты UI (3:1). Результаты обновляются при каждом нажатии клавиши.
- 4Предложения исправления с сохранением тонаКогда пара не проходит WCAG AA, инструмент ищет в пространстве светлоты HSL — шагая наружу от исходной светлоты в обоих направлениях — чтобы найти ближайший вариант каждого цвета, который проходит 4,5:1, сохраняя тот же тон и насыщенность. API EyeDropper (Chromium) также доступен для взятия пробы любого цвета прямо с вашего экрана.
Похожие инструменты
Симулятор цветовой слепоты
Смотрите, как ваш дизайн выглядит для людей с нарушением цветового восприятия. Симулирует протанопию, дейтеранопию, тританопию, ахроматопсию и более слабые аномалии.
Какое у меня разрешение экрана
Посмотрите разрешение экрана в CSS и реальных пикселях, размер окна, пиксельное соотношение, глубину цвета, HDR, поддержку касаний и частоту обновления и скопируйте все это.
Тест на битые пиксели
Проверьте экран на наличие битых или застрявших пикселей с помощью полноэкранной заливки черным, белым, красным, зеленым, синим и серым, а также дополнительного средства исправления застрявших пикселей.