Visual Hierarchy
The quick brown fox jumps over the lazy dog. Legibility is critical for universal accessibility and rigorous design systems.
Проверка контрастности — это инструмент доступности, который измеряет разницу яркости между цветами переднего плана и фона. Он вычисляет коэффициент контрастности и оценивает, соответствует ли ваша цветовая комбинация стандартам WCAG 2.1. Проверка контрастности Color Taste предоставляет мгновенные результаты прохождения/непрохождения для уровней AA и AAA, а также предложения по автоматическому исправлению, когда ваши цвета не соответствуют требованиям.
Проверьте, соответствуют ли ваши цвета стандартам WCAG AA: 4.5:1 для обычного текста и 3:1 для крупного текста и компонентов интерфейса.
Проверьте соответствие более строгому стандарту AAA: 7:1 для обычного текста и 4.5:1 для крупного текста.
Тестируйте контраст для обычного текста, крупного текста (18pt+), кнопок, границ полей ввода, иконок и других элементов интерфейса.
Введите или вставьте цвет текста/переднего плана в формате HEX, RGB или HSL в первое поле ввода.
Введите цвет фона во второе поле. Наблюдайте за обновлением предварительного просмотра в реальном времени.
Коэффициент контрастности рассчитывается автоматически. Зеленые галочки указывают на прохождение, красные крестики — на непрохождение уровней WCAG.
Если ваша комбинация не проходит, нажмите на предложение автоматического исправления, чтобы настроить цвета, сохраняя дизайнерский замысел.
Получайте расчеты коэффициента контрастности в реальном времени с результатами прохождения/непрохождения для стандартов AA и AAA.
При неудачном контрасте получайте умные предложения, которые минимально корректируют ваши цвета для соответствия требованиям доступности.
Увидьте, как ваш текст выглядит на фоне, с предварительным просмотром в реальном времени для разных размеров текста.
Работайте в предпочитаемом цветовом формате. Инструмент автоматически обрабатывает все преобразования.
Проверяйте доступность в процессе проектирования.
Проверяйте контраст в коде перед выпуском.
Убедитесь, что палитры токенов соответствуют стандартам WCAG.
Аудируйте и устраняйте проблемы контрастности в масштабе.
WCAG 2.1 определяет минимальные коэффициенты контрастности для разных типов контента и уровней соответствия:
4.5:1 для обычного текста, 3:1 для крупного текста (18pt или 14pt жирный). Это наиболее распространенная цель соответствия.
7:1 для обычного текста, 4.5:1 для крупного текста. Золотой стандарт максимальной доступности.
Минимум 3:1 для кнопок, границ полей ввода, иконок и любых графических элементов, передающих смысл.
Для WCAG AA: обычный текст требует не менее 4.5:1, крупный текст (18pt или 14pt жирный) — не менее 3:1, а нетекстовые компоненты интерфейса — не менее 3:1.
AAA — более строгий стандарт: 7:1 для обычного текста и 4.5:1 для крупного текста. Большинство дизайн-систем нацелены на AA как минимум, а AAA — как желаемая цель для критически важного контента.
Да. Проверка контрастности Color Taste принимает цветовые форматы HEX, RGB и HSL. Введите цвета в любом формате, и инструмент автоматически выполнит преобразование.
Когда ваша цветовая комбинация не проходит, Color Taste предлагает скорректированные цвета, соответствующие требованиям WCAG, оставаясь максимально близкими к вашему исходному дизайнерскому замыслу. Нажмите на предложение, чтобы применить его мгновенно.
Да, проверка контрастности Color Taste полностью бесплатна. Без регистрации, без водяных знаков, без ограничений по использованию. Проверяйте столько цветовых комбинаций, сколько вам нужно.