ImageColorPicker.com

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

Проверьте коэффициент контраста между передним и фоновым цветами для обеспечения доступности.

Проверьте свои цвета

Проверьте цветовые комбинации, чтобы убедиться, что они соответствуют стандартам доступности WCAG для читаемости текста.

1.00:1
Контраст
Не пройдено
Очень плохо

Обычный текст

AA (4.5:1)
Не пройдено
AAA (7:1)
Не пройдено

Крупный текст

AA (3:1)
Не пройдено
AAA (4.5:1)
Не пройдено

Быстрые исправления

Aa
Заголовок предпросмотра

Быстрая коричневая лиса перепрыгивает через ленивую собаку

Пример маленького текста (12px)

Текст
#ffffff
Фон
#156082

Стандарты WCAG

Уровень AA

Минимальный коэффициент контраста 4.5:1 для обычного текста и 3:1 для крупного текста. Требуется для большинства веб-сайтов.

Уровень AAA

Улучшенный коэффициент контраста 7:1 для обычного текста и 4.5:1 для крупного текста. Рекомендуется для оптимальной доступности.

Недостаточная контрастность для всех размеров текста - не соответствует стандартам WCAG.

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

Рассчитайте коэффициент контраста текста и фона.

Выберите цвет с помощью селектора цвета для текста и фона или введите цвет в формате RGB шестнадцатеричного кода (например, #259 или #2596BE). Вы можете настроить ползунок для выбора цвета. Руководство по доступности веб-контента (WCAG) содержит конкретные рекомендации, чтобы определить, читаем ли текст для зрячих пользователей. Этот критерий использует определенный алгоритм для сопоставления цветовых комбинаций с сопоставимыми коэффициентами. Согласно этой формуле, WCAG утверждает, что коэффициент контраста 4.5:1 между текстом и его фоном является достаточным для обычного текста, а для крупного текста (18+ pt обычный или 14+ pt жирный) должен быть как минимум 3:1.

Ключевые особенности

  • Расчет контрастности в реальном времени
  • Проверка соответствия WCAG AA и AAA
  • Ползунки HSL для точной настройки
  • Несколько форматов предпросмотра

Расширенные инструменты

  • Автоматическая коррекция цвета
  • Образцы текста и фона
  • Определение названия цвета
  • Экспорт результатов

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

Для соответствия WCAG AA обычный текст требует коэффициент контраста не менее 4,5:1, а крупный текст (18pt или 14pt жирным) требует 3:1.

WCAG AAA требует более высокого коэффициента контраста: 7:1 для обычного текста и 4,5:1 для крупного текста, тогда как AA требует 4,5:1 и 3:1 соответственно.

Воспользуйтесь функцией автоматического исправления, чтобы изменить цвет текста или фона и сохранить замысел дизайна, или вручную настройте цвета ползунками HSL с визуальными индикаторами, которые показывают оптимальные зоны для соответствия AA/AAA.

Зелёные зоны и маркеры AA/AAA показывают оптимальные диапазоны для соответствия WCAG. Подсказки направления (Светлее/Темнее) помогут улучшить контраст с учётом вашей текущей цветовой комбинации.

Да, вы можете ввести любые HEX-коды или выбрать цвета с помощью инструмента выбора. URL обновляется автоматически, поэтому вы можете поделиться конкретной цветовой комбинацией.