01
Определить видимые слои
Введите HEX из трёх или шести знаков. Прозрачность задаётся отдельно; восьмизначный HEX не обрезается молча до шести знаков.
Color & Accessibility
проверка контрастности цветовдля читаемого текста
Введите два HEX-цвета, укажите непрозрачность и параметры шрифта, затем сравните пять порогов WCAG.
проверка контрастности цветов
Образец текста
Коэффициент контраста
4.48:1
Результат для текста: Не проходит · AA · Порог 4.5:1
Проверка как обычного текста · Итоговый цвет текста: #777777
Обычный текст AA · 4.5:1Не проходит
Обычный текст AAA · 7:1Не проходит
Крупный текст AA · 3:1Проходит
Крупный текст AAA · 4.5:1Не проходит
Интерфейс/графика AA · 3:1Проходит
Предпросмотр цветов
Эта фраза показывает выбранные цвета и размер шрифта.
Подходящие варианты цвета
Изменить цвет текста
#767676 · 4.54:1
Изменить цвет фона
#060606 · 4.52:1
Расчёт идёт в браузере; значения цветов не загружаются.
Условия текста
Результат актуален.
Серый текст может казаться читаемым в макете, но на белой карточке немного не дотягивать до AA. Проверка контрастности цветов показывает эту границу до публикации интерфейса.
Калькулятор контраста WCAG должен учитывать видимый, а не исходный цвет полупрозрачной надписи. Проверка контрастности цветов сначала смешивает текст с фоном, а затем вычисляет яркость.
Зачем нужна проверка контрастности цветов
Расчёт опирается на видимый цвет и предлагает два независимых исправления.
Учитывать прозрачность перед расчётом
Тёмный текст с непрозрачностью 50% становится светлее на белом фоне. Проверка контрастности цветов показывает итоговый HEX и только потом считает коэффициент контраста по относительной яркости.
Сравнить изменение текста и фона
Если цель не достигнута, отдельно показаны варианты изменения цвета текста и фона вместе с новыми коэффициентами. Исходный брендовый цвет сохраняется до явного применения; действие можно один раз отменить.
Три условия правильной интерпретации
Один коэффициент даёт разные выводы для разных размеров текста.
02
Указать размер и насыщенность
Обычный текст считается крупным от 24px, полужирный — примерно от 18,67px. Автопроверка запускается после короткой паузы; её можно отключить.
03
Проверить вывод без ошибки округления
На экране две цифры после запятой, но порог сравнивается с полным значением. Пока результат устарел, копирование и применение рекомендаций недоступны.
Пять выводов по одной паре
Число не меняется; меняется требование к конкретному виду текста.
Смешивание полупрозрачного текста
Непрозрачность от 0 до 100% применяется к цвету переднего плана на сплошном фоне. Итоговый HEX объясняет измеренный коэффициент контраста.
Порог для размера шрифта
Для обычного текста AA требует 4,5:1, а для крупного — 3:1. Обычная надпись 20px ещё не считается крупной.
AA, AAA и значимые элементы UI
Проверяются обычный и крупный текст для AA и AAA, а также графические элементы для AA. Выбор целевого уровня меняет главный вывод, но не сам коэффициент.
Отдельные обратимые предложения
Можно изменить светлоту цвета текста либо фона. Перед применением видны новый HEX и коэффициент; после применения доступна отмена.
Границы проверки одной пары цветов
Прошедшая пара не подтверждает доступность всей страницы.
- Нужен непрозрачный однотонный фон
- Прозрачный фон зависит от нижнего слоя. Фотографии и градиенты меняются по пикселям, поэтому два HEX-значения не описывают их полностью.
- Только трёх- и шестизначный HEX
- Допускается знак # или ввод без него. CSS-имена, rgb(), hsl(), OKLCH и восьмизначный HEX не преобразуются автоматически.
- Не аудит сайта
- Проверка контрастности цветов касается одной пары и выбранного текста. Клавиатура, фокус, семантика и другие состояния интерфейса требуют отдельной проверки.
- Без смешения с APCA
- Статусы AA и AAA относятся к WCAG 2.x. У APCA другая формула и шкала, поэтому её результат здесь не выдают за тот же стандарт.
Вопросы: проверка контрастности цветов
Минимумы, крупный текст, изображения и прозрачность в одной таблице ответов.
Какой минимальный контраст нужен для сайта?
Обычному тексту для AA нужно не менее 4,5:1, крупному — 3:1. Проверка контрастности цветов сравнивает исходное число без округления.
В чём разница между AA и AAA?
AA требует 4,5:1 для обычного текста, AAA — 7:1. Для крупного текста пороги составляют 3:1 и 4,5:1 соответственно.
Какой текст считается крупным по WCAG?
Крупным считается обычный текст от 24px либо полужирный от примерно 18,67px. Размер меняет нужный порог, а не сам коэффициент двух цветов.
Распространяется ли требование на изображения?
Текст на изображении также может требовать контраста, но фотография имеет разные цвета под каждой буквой. Этот инструмент оценивает только один сплошной фон.
Как учитывать прозрачность цвета при расчёте?
Полупрозрачный текст сначала смешивается с непрозрачным фоном. При 0% непрозрачности оба видимых цвета совпадают и коэффициент равен 1:1.
Нашли неверную оценку пары цветов?
Начать проверку контрастности цветов
Проверка контрастности цветов поможет оценить подписи форм и цвета дизайн-системы до выпуска.
Скопируйте актуальные цвета и коэффициент или сравните предложенный вариант перед применением.
Локальный расчёт одной пары по WCAG 2.x.