Что такое инструмент выбора цветового контраста?

Используйте наш бесплатный онлайн-проверитель цветового контраста, чтобы мгновенно оценить соотношение контрастности между любыми цветами переднего плана и фона. Разработанный для дизайнеров, разработчиков и создателей контента, он показывает в реальном времени соответствие требованиям WCAG AA/AAA для обычного текста, крупного текста и графических/интерфейсных элементов. Просто выберите цвета, поменяйте их местами и получите мгновенную обратную связь «пройдено/не пройдено» по порогам доступности (например, 4.5:1 для обычного текста и 3:1 для крупного текста). Интуитивно понятный интерфейс помогает настроить палитры для лучшей читаемости и инклюзивного веб-дизайна — загрузка не требуется. Оптимизируйте цветовые решения вашего сайта, чтобы повысить удобство использования, соответствовать стандартам доступности и предоставить более дружелюбный опыт для пользователя.

Соответствие WCAG

Элемент Что Требование AA Требование AAA
Обычный текст

Обычный основной текст AA

ниже 18pt (24px) или

ниже 14pt (18.66px) жирный

4.5:1 7:1
Крупный текст

Заголовки, крупные метки

выше 18pt (24px) или

выше 14pt (18.66px) жирный

3:1 4.5:1
Графика и интерфейс

Значимые нетекстовые элементы

Иконки, границы форм, кнопки

3:1