Пять понятных результатов
Проверка контрастности цветов разделяет AA и AAA обычного и крупного текста, а также ориентир UI 3:1. Порог не применяется к неверной задаче.
Бесплатный инструмент WCAG 2.2
Проверка контрастности цветов WCAG AA и AAA
Эта проверка контрастности цветов измеряет передний план и фон, объясняет пороги, показывает настоящий UI и находит близкий проходящий цвет. Палитра остаётся в браузере.
Обновлено 25 июля 2026 года
проверка контрастности цветов
Что измеряет проверка контрастности цветов?
Проверка контрастности цветов рассчитывает отношение WCAG для двух HEX. Она отдельно показывает AA и AAA для обычного и крупного текста, ориентир 3:1 для UI, живой пример и матрицу палитры. Проверка контрастности цветов также ищет близкий HSB-цвет переднего плана для 4.5:1 или 7:1. Проходящее число не сертифицирует всю страницу.
От числа к решению в дизайне
Проверка контрастности цветов объединяет число, визуальный контекст и исправление.
Предпросмотр настоящего UI
Проверка контрастности цветов применяет пару к заголовку, абзацу, кнопке и метке. Ошибку видно до переноса значений в систему компонентов.
Матрица всей палитры
Добавьте от двух до восьми цветов: проверка контрастности цветов измерит каждую пару и найдёт сочетания, скрытые при одиночном расчёте.
WCAG 2.2 · HEX · HSB
Запустить проверку контрастности цветов
Введите два HEX. Все расчёты мгновенно выполняются в браузере.
Проходит · AA обычный текст
Предпросмотр читаемого UI
Передний план используется для текста, границ и элементов на выбранном фоне.
Найти близкий проходящий цвет
Поиск по возможности сохраняет тон и минимально меняет насыщенность и яркость HSB.
Все вычисления остаются в этом браузере.
:root {
--accessible-foreground: #1F2937;
--accessible-background: #F9FAFB;
}
.your-component {
color: var(--accessible-foreground);
background: var(--accessible-background);
}Матрица контраста палитры
Добавьте от двух до восьми цветов. Ячейка сравнивает строку и столбец.
| Цвет | 1#1F2937 | 2#F9FAFB | 3#2563EB | 4#F59E0B |
|---|---|---|---|---|
1#1F2937 | — | 14.05:1AA | 2.84:1Ниже 3:1 | 6.83:1AA |
2#F9FAFB | 14.05:1AA | — | 4.95:1AA | 2.06:1Ниже 3:1 |
3#2563EB | 2.84:1Ниже 3:1 | 4.95:1AA | — | 2.41:1Ниже 3:1 |
4#F59E0B | 6.83:1AA | 2.06:1Ниже 3:1 | 2.41:1Ниже 3:1 | — |
Пороги контраста WCAG 2.2
Проверка контрастности цветов разделяет пороги текста и нетекстовый ориентир 3:1.
| Применение | Уровень | Минимум | Значение |
|---|---|---|---|
| Обычный текст | AA | 4.5:1 | Текст меньше крупного по определению WCAG. |
| Крупный текст | AA | 3:1 | 24 CSS px обычный или около 18.5 CSS px жирный. |
| Обычный текст | AAA | 7:1 | Усиленная цель для небольшого текста. |
| Крупный текст | AAA | 4.5:1 | Усиленная цель для крупного текста. |
| UI и графика | AA | 3:1 | Нужная визуальная информация к соседним цветам. |
Три шага проверки контраста
Используйте проверку контрастности цветов как повторяемую процедуру.
1. Проверить реальные цвета
Вставьте в проверку контрастности цветов настоящие токены. Не берите пипеткой сжатый скриншот, если есть исходный HEX. Отдельно проверьте обычное состояние, наведение, активацию, фокус, ошибку, выбор и отключение.
2. Выбрать правильный порог
Используйте 4.5:1 для обычного AA и 7:1 для AAA. Пониженный порог крупного текста допустим только при нужном размере и начертании. Важные границы, значки и состояния оценивайте по нетекстовому правилу 3:1.
3. Проверить готовый компонент
После проверки контрастности цветов изучите компонент при увеличении, в обеих темах и с реальным текстом. Проверьте фокус, признаки без цвета и все состояния. Автоматика находит отношение, человек — контекст.
Как работает проверка контрастности цветов
Проверка контрастности цветов переводит каналы sRGB в линейные значения и применяет веса относительной яркости WCAG: 0.2126 для красного, 0.7152 для зелёного и 0.0722 для синего. Затем вычисляется (L1 + 0.05) / (L2 + 0.05). Одинаковые цвета дают 1:1, чёрный с белым — 21:1.
Перестановка переднего плана и фона не меняет число, но меняет контекст. Прозрачность, градиенты, изображения, смешивание и тени создают другие пиксели. Сначала скомпонуйте прозрачный цвет на реальном фоне, затем внесите результат в проверку контрастности цветов.
Почему проходящий результат не является сертификатом
Соответствие WCAG относится к полной странице и процессу. Проверка контрастности цветов не знает, действительно ли текст крупный, несёт ли значок важную информацию и является ли цвет единственным признаком. Клавиатура, роли, имена, порядок фокуса и содержание проверяются отдельно.
Используйте проверку контрастности цветов как одну часть аудита. Запишите компонент, состояние, токены, порог, дату и результат. Такой журнал объясняет изменение и упрощает проверку после смены темы.
Чек-лист выпуска проверки контрастности цветов
Выполните эти пункты, прежде чем считать результат доказательством.
- 01
проверка контрастности цветов: Использовать исходные HEX вместо сжатого скриншота.
- 02
проверка контрастности цветов: Проверить светлую и тёмную темы отдельно.
- 03
проверка контрастности цветов: Проверить обычное состояние, наведение, фокус, выбор, ошибку и отключение.
- 04
проверка контрастности цветов: Применить 4.5:1 к обычному AA-тексту без исключения.
- 05
проверка контрастности цветов: Применить 7:1, если обычный текст должен соответствовать AAA.
- 06
проверка контрастности цветов: Подтвердить размер и начертание крупного текста.
- 07
проверка контрастности цветов: Проверить важные значки, границы и состояния по 3:1.
- 08
проверка контрастности цветов: Скомпоновать прозрачность до ввода видимого цвета.
- 09
проверка контрастности цветов: Измерить самое слабое место изображения или градиента.
- 10
проверка контрастности цветов: Добавить нецветовой признак для ошибок, ссылок и состояний.
- 11
проверка контрастности цветов: Проверить индикатор фокуса на обоих окружениях.
- 12
проверка контрастности цветов: Увеличить страницу и подтвердить работу содержимого.
- 13
проверка контрастности цветов: Использовать реальный текст вместо короткого примера.
- 14
проверка контрастности цветов: Записать компонент, состояние, токены, порог, результат и дату.
- 15
проверка контрастности цветов: Выбрать разрешённые пары, не требуя всех сочетаний.
- 16
проверка контрастности цветов: Повторить тест после изменения общего токена.
- 17
проверка контрастности цветов: Проверить режим принудительных цветов, если он поддерживается.
- 18
проверка контрастности цветов: Совместить число с клавиатурной, экранной и визуальной проверкой.
Первичные источники WCAG
Проверка контрастности цветов следует опубликованной формуле и порогам; официальные документы остаются главным источником.
- WCAG 2.2 1.4.3 задаёт 4.5:1 для обычного AA-текста и 3:1 для крупного. Критерии контраста WCAG 2.2
- WCAG 2.2 1.4.6 задаёт 7:1 для обычного AAA-текста и 4.5:1 для крупного. Критерии контраста WCAG 2.2
- WCAG 2.2 1.4.11 задаёт 3:1 для нужной информации UI и графики к соседним цветам. Нетекстовый контраст WCAG 2.2
Критерий AA для текста гласит:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1
Источники: проверка контрастности цветов
Продолжить работу с цветом
Вопросы о контрасте
Какое отношение контраста считается хорошим?
Для обычного текста проверка контрастности цветов использует 4.5:1 как минимум AA и 7:1 для AAA. Крупный текст использует 3:1 и 4.5:1, важная информация UI — обычно 3:1.
Проходит ли 3:1 уровень WCAG AA?
Для подходящего крупного текста и нетекстовой информации — да, для обычного AA-текста — нет. Проверка контрастности цветов показывает результаты отдельно.
Можно ли проверить прозрачность?
Проверка контрастности цветов принимает сплошные HEX. Сначала скомпонуйте прозрачность на настоящем фоне. Для изображения или градиента измеряйте самое слабое место.
Как работает автоматическая коррекция?
Проверка контрастности цветов перебирает насыщенность и яркость HSB, сохраняя тон по возможности. Она предлагает близкий передний план, который нужно проверить в дизайне.
Делает ли проходящий результат страницу доступной?
Нет. Проверка контрастности цветов подтверждает математическую связь. Структура, клавиатура, фокус, подписи, альтернативы и полный процесс требуют дополнительных тестов.