Задайте исходные данные
Рассчитайте контраст одной пары HEX переднего плана и фона и проверьте реализованные критерии для текста и UI.
Крупный текст (24px+)
Обычный текст 16px. Пример для оценки читаемости.
Мелкий текст 14px для примечаний и подписей.
Коэффициент контраста
—
Краткий ответ
Рассчитайте контраст одной пары HEX переднего плана и фона и проверьте реализованные критерии для текста и UI. Успех одной пары не означает соответствие всей страницы WCAG или закону. Текущие поля не смешивают полупрозрачный передний план с фоном.
Что делает инструмент
Рассчитайте контраст одной пары HEX переднего плана и фона и проверьте реализованные критерии для текста и UI. Проверьте пару текст/фон или компонент/фон, затем оцените типографику, состояния, фокус и нецветовые сигналы в интерфейсе.
Проверенные возможности
Настройте параметры
Относительная яркость вычисляется из линеаризованных sRGB-каналов и сравнивается с 4,5:1, 3:1 и 7:1. Исправление подбирает светлоту HSL, сохраняя тон и насыщенность.
Проверьте границы точности
Успех одной пары не означает соответствие всей страницы WCAG или закону. Текущие поля не смешивают полупрозрачный передний план с фоном. Перед повторным использованием сравните результат с требованиями целевой системы.
Когда использовать
- Проверьте пару текст/фон или компонент/фон, затем оцените типографику, состояния, фокус и нецветовые сигналы в интерфейсе.
- Относительная яркость вычисляется из линеаризованных sRGB-каналов и сравнивается с 4,5:1, 3:1 и 7:1. Исправление подбирает светлоту HSL, сохраняя тон и насыщенность. В разделе «Когда использовать 2» это уточнение относится именно к «Проверка контраста цветов по WCAG».
- Проверьте пару текст/фон или компонент/фон, затем оцените типографику, состояния, фокус и нецветовые сигналы в интерфейсе. Продолжите с результатом «Проверка контраста цветов по WCAG» в первом связанном инструменте без смены языка.
Как пользоваться
Задайте исходные данные
Рассчитайте контраст одной пары HEX переднего плана и фона и проверьте реализованные критерии для текста и UI. В разделе «Как пользоваться: Задайте исходные данные» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Настройте параметры
Относительная яркость вычисляется из линеаризованных sRGB-каналов и сравнивается с 4,5:1, 3:1 и 7:1. Исправление подбирает светлоту HSL, сохраняя тон и насыщенность. В разделе «Как пользоваться: Настройте параметры» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Проверьте и продолжайте
Проверьте пару текст/фон или компонент/фон, затем оцените типографику, состояния, фокус и нецветовые сигналы в интерфейсе. В разделе «Как пользоваться: Проверьте и продолжайте» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Проверьте границы точности
Успех одной пары не означает соответствие всей страницы WCAG или закону. Текущие поля не смешивают полупрозрачный передний план с фоном. Перед повторным использованием сравните результат с требованиями целевой системы. Перед производственным решением или оценкой доступности учтите указанное ограничение.
Параметры и элементы управления
Задайте исходные данные
Рассчитайте контраст одной пары HEX переднего плана и фона и проверьте реализованные критерии для текста и UI. В разделе «Параметры и элементы управления: Задайте исходные данные» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Настройте параметры
Относительная яркость вычисляется из линеаризованных sRGB-каналов и сравнивается с 4,5:1, 3:1 и 7:1. Исправление подбирает светлоту HSL, сохраняя тон и насыщенность. В разделе «Параметры и элементы управления: Настройте параметры» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Как формируется результат
Относительная яркость вычисляется из линеаризованных sRGB-каналов и сравнивается с 4,5:1, 3:1 и 7:1. Исправление подбирает светлоту HSL, сохраняя тон и насыщенность. В разделе «Как формируется результат» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Точность и ограничения
- Успех одной пары не означает соответствие всей страницы WCAG или закону. Текущие поля не смешивают полупрозрачный передний план с фоном.
- Буфер обмена, декодирование файлов, скачивание и действия с разрешениями зависят от текущего браузера.
Обработка и конфиденциальность
Проверенный процесс выполняется в браузере. Файлы и цвета остаются на странице, если действие явно не открывает сетевой URL.
Практические советы
- Начните с известного образца и меняйте по одному параметру, чтобы эффект оставался понятным.
- Перед производственным решением или оценкой доступности учтите указанное ограничение.
Решение проблем
Ввод или действие не работает
Проверьте диапазон или требования к файлу, сбросьте инструмент и повторите с меньшим или поддерживаемым вводом. Для разрешений может понадобиться secure context.
Точность и ограничения
Успех одной пары не означает соответствие всей страницы WCAG или закону. Текущие поля не смешивают полупрозрачный передний план с фоном. В разделе «Решение проблем: Точность и ограничения» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Проверьте границы точности
Успех одной пары не означает соответствие всей страницы WCAG или закону. Текущие поля не смешивают полупрозрачный передний план с фоном. Сбросьте инструмент и повторите с заведомо поддерживаемым значением, прежде чем считать это ошибкой алгоритма.
Вопросы об инструменте
Что делает «Проверка контраста цветов по WCAG»?
Рассчитайте контраст одной пары HEX переднего плана и фона и проверьте реализованные критерии для текста и UI. В разделе «Что делает «Проверка контраста цветов по WCAG»?» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Какое главное ограничение?
Успех одной пары не означает соответствие всей страницы WCAG или закону. Текущие поля не смешивают полупрозрачный передний план с фоном. В разделе «Какое главное ограничение?» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Где обрабатываются данные?
Проверенный процесс выполняется в браузере. Файлы и цвета остаются на странице, если действие явно не открывает сетевой URL. В разделе «Где обрабатываются данные?» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Какие данные подготовить для «Проверка контраста цветов по WCAG»?
Рассчитайте контраст одной пары HEX переднего плана и фона и проверьте реализованные критерии для текста и UI. Рассчитайте контраст одной пары HEX переднего плана и фона и проверьте реализованные критерии для текста и UI.
Что проверить перед использованием результата «Проверка контраста цветов по WCAG»?
Успех одной пары не означает соответствие всей страницы WCAG или закону. Текущие поля не смешивают полупрозрачный передний план с фоном. Перед повторным использованием сравните результат с требованиями целевой системы. В разделе «Что проверить перед использованием результата «Проверка контраста цветов по WCAG»?» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Какой процесс продолжает «Проверка контраста цветов по WCAG»?
Продолжите с результатом «Проверка контраста цветов по WCAG» в первом связанном инструменте без смены языка. Проверьте пару текст/фон или компонент/фон, затем оцените типографику, состояния, фокус и нецветовые сигналы в интерфейсе.
Продолжить работу с цветом
Проверьте пару текст/фон или компонент/фон, затем оцените типографику, состояния, фокус и нецветовые сигналы в интерфейсе. В разделе «Продолжить работу с цветом» это уточнение относится именно к «Проверка контраста цветов по WCAG».
Перейти к связанному инструменту
Продолжите с результатом «Проверка контраста цветов по WCAG» в первом связанном инструменте без смены языка.
Симулятор дальтонизма для проверки дизайна