Введите HEX-цвета или выберите цвета Pantone для переднего плана и фона.
Проверьте коэффициент контраста и результаты WCAG AA или AAA для обычного текста, крупного текста и UI-компонентов.
Используйте живой предпросмотр, меняйте цвета местами, копируйте CSS или пробуйте доступные предложения Pantone.

Сценарии использования проверки контраста

Проверяйте пары фирменных цветов перед использованием в цифровых макетах.
Проверяйте кнопки, формы, навигацию и другие UI-компоненты на читаемый контраст.
Сравнивайте палитры на основе Pantone перед адаптацией печатных цветов для экранов.
Документируйте результаты WCAG для аудитов доступности и передачи дизайна.

Проверка цветового контраста для процессов WCAG, UI и Pantone

Используйте эту проверку контраста, когда нужно убедиться, что цвет текста, фон, состояние кнопки или фирменная палитра читаемы перед использованием на сайте, в приложении, презентации или дизайн-системе.

Как правильно читать результат WCAG

Инструмент рассчитывает относительную яркость обоих цветов и возвращает коэффициент контраста, используемый WCAG. Обычному тексту обычно требуется 4.5:1 для AA и 7:1 для AAA, а крупному тексту и важным UI-компонентам достаточно более низких порогов.

Свяжите цвета Pantone с цифровой доступностью

Цвета Pantone часто выбирают для бренда и печати, но их экранные эквиваленты тоже нужно проверять на доступность. Ищите названия Pantone или значения HEX, просматривайте пару и сравнивайте доступные альтернативы перед передачей цветов дизайну или разработке.

Практичный процесс для дизайнеров и разработчиков

Начните с точных HEX-значений из дизайн-файла, протестируйте оба направления передний план и фон, скопируйте CSS или отчет и сохраните прошедшую проверку пару вместе с документацией палитры Pantone.

FAQ по проверке контраста

Что измеряет эта проверка контраста?

Она измеряет коэффициент контраста яркости между цветом переднего плана и цветом фона, а затем сравнивает результат с порогами WCAG.

Каковы требования контраста WCAG AA и AAA?

WCAG AA требует минимум 4.5:1 для обычного текста и 3:1 для крупного текста или UI-компонентов. WCAG AAA требует 7:1 для обычного текста и 4.5:1 для крупного текста.

Можно ли проверять цвета Pantone на веб-доступность?

Да. Референсы Pantone можно преобразовать в экранные цветовые значения и проверить цифровой контраст. Всегда проверяйте финальные цвета в той среде, где они будут отображаться.

Предупреждение о контрасте

Результаты рассчитываются по цифровым цветовым значениям и предназначены для планирования доступности. Печать, материалы, освещение и калибровка дисплея могут изменить воспринимаемый контраст.