Проверка контрастности цветов (WCAG)

Проверьте, соответствует ли пара цветов текста и фона стандартам доступности WCAG AA и AAA. Инструмент отображает коэффициент контрастности и статус прохождения проверки в реальном времени.

Студия · нейтральное окружение
Коэффициент контрастности
: 1

AA · основной текст ≥ 4.5
AA · крупный текст ≥ 3.0
AAA · основной текст ≥ 7.0
AAA · крупный текст ≥ 4.5
Исправление в один клик · тон сохраняется

Возможности

Показ коэффициента контраста
Соответствие WCAG AA/AAA
Живой предпросмотр текста
Обычный и крупный текст

Как использовать

1. Задайте цвета текста и фона — образец и вердикт WCAG обновляются мгновенно.

2. Переключайте образцы (шрифт / статья / интерфейс), чтобы оценить пару в реальном применении; клавиша S меняет цвета местами.

3. Если уровень не пройден, используйте исправление в один клик — меняется только светлота, тон сохраняется — или скопируйте отчёт WCAG.

Об этом инструменте

Текст, яркость которого слишком близка к яркости фона, трудно читать всем, а некоторым людям — невозможно. Руководство по доступности веб-контента (WCAG) измеряет это коэффициентом контрастности от 1:1 до 21:1, основанным на относительной яркости двух цветов. Уровень AA требует не менее 4,5:1 для основного текста и 3:1 для крупного (24 px или около 18,66 px жирным); уровень AAA повышает требования до 7:1 и 4,5:1. Этот инструмент считает коэффициент на лету, показывает, пройдены ли все четыре порога, и выводит настоящий образец шрифта, статью и интерфейс, чтобы оценить пару цветов в контексте. Если уровень не пройден, он предлагает ближайший цвет текста, который проходит, меняя только светлоту.

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

Как рассчитывается коэффициент контрастности?
Каждый цвет переводится в относительную яркость по формуле sRGB из WCAG 2, затем коэффициент равен (L1 + 0,05) ÷ (L2 + 0,05), где L1 — более светлый цвет. Чёрный на белом даёт максимум 21:1, одинаковые цвета — 1:1.
Какой текст считается крупным?
WCAG считает крупным текст не менее 18 пунктов (24 CSS-пикселя) обычного начертания или 14 пунктов (около 18,66 CSS-пикселя) жирного. Крупному тексту достаточно 3:1 для AA и 4,5:1 для AAA, потому что крупные буквы легче читать.
Если AA пройден, значит ли это, что дизайн доступен?
Контраст — лишь одно требование из многих. Тонкие шрифты, текст поверх фотографий, мелкий кегль и цвет как единственный сигнал всё равно могут создавать проблемы, поэтому проверяйте реальные экраны и дополняйте контраст другими проверками доступности.
Как работает предлагаемое исправление?
Оно сохраняет тон цвета текста и перебирает более светлые или тёмные варианты, пока не будет достигнут нужный коэффициент. Если ни одно значение светлоты не подходит для вашего фона, инструмент сообщит об этом — тогда менять нужно фон.
Применяются ли требования к контрасту к иконкам и кнопкам?
Да. WCAG 2.1 требует не менее 3:1 для значимых нетекстовых элементов, таких как иконки, границы полей ввода и индикаторы фокуса. Чисто декоративная графика и отключённые элементы управления освобождены от этого требования.

Похожие инструменты

Генератор цветовых палитр
Генерируйте гармоничные цветовые палитры на основе базового цвета — комплементар...
Генератор CSS-градиентов
Создавайте линейные, радиальные и конические CSS-градиенты визуально. Добавляйте...
Генератор CSS border-radius
Визуально настройте CSS border-radius — управляйте всеми четырьмя углами по отде...
CSS Flexbox-песочница
Изучайте и экспериментируйте с CSS Flexbox. Настраивайте свойства контейнера и н...
Генератор CSS Grid
Визуально создавайте CSS Grid-макеты. Задайте строки, столбцы, отступы и скопиру...
Калькулятор соотношения сторон
Рассчитайте соотношение сторон и найдите недостающие размеры. Включает популярны...
Калькулятор процентов
Решайте типичные задачи на проценты: сколько составляет X% от Y, X — это сколько...
Обычный калькулятор
Простой онлайн-калькулятор с поддержкой сложения, вычитания, умножения и деления...