Выберите, чтобы проверить цветовой контраст
Цветовой контраст
4.5:1
Соответствие WCAG
Обычный текст
AA
AAA
Крупный текст
AA
AAA
Графика и интерфейс
AA
Упс! Вы не можете проверить контраст.
Онлайн-проверка контраста работает с
Пока не поддерживается:
Визуальный пример
Крупный текст
Обычный или мелкий текст, текст ниже XY пикселей здесь. Обычный или мелкий текст, текст ниже XY пикселей здесь.
Что такое инструмент выбора цветового контраста?
Используйте наш бесплатный онлайн-проверитель цветового контраста, чтобы мгновенно оценить соотношение контрастности между любыми цветами переднего плана и фона. Разработанный для дизайнеров, разработчиков и создателей контента, он показывает в реальном времени соответствие требованиям 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 |