Проверка контрастности
Вычислите коэффициент контрастности WCAG для двух цветов с вердиктами AA и AAA для обычного и крупного текста и живым предпросмотром. Всё работает в вашем браузере.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG thresholds — normal text: AA ≥ 4.5, AAA ≥ 7; large text (≥ 24 px, or ≥ 18.7 px bold): AA ≥ 3, AAA ≥ 4.5.
Инструмент полностью работает в вашем браузере. Данные не покидают устройство и не загружаются ни на один сервер.
Как пользоваться
- 1Введите hex- или rgb()-значение или воспользуйтесь палитрой для цвета текста.
- 2Сделайте то же для цвета фона.
- 3Прочитайте коэффициент и вердикты AA / AAA или нажмите пресет.
- 4Оцените пару глазами по блоку предпросмотра.
Проверка контрастности
Введите цвет текста и цвет фона — hex вроде #333 или #1F2937, либо rgb()/rgba() — и получите коэффициент контрастности WCAG с двумя знаками после запятой и мгновенными вердиктами по всем четырём порогам: AA и AAA для обычного и крупного текста. Живой предпросмотр показывает абзац и крупный заголовок реальными цветами.
Расчёт ведётся по официальной формуле относительной яркости WCAG 2.x — той же, что и в проверщике W3C: здешние 4.5 равны 4.5 где угодно. Среди пресетов есть серая пара 4.54:1, которая наглядно показывает, насколько узка граница AA.
Частые вопросы
Какой коэффициент контрастности нужен для зачёта?
По WCAG 2.x: обычному тексту нужны 4.5:1 для AA и 7:1 для AAA. Крупному тексту — от 24 px или от 18.7 px жирным — нужны 3:1 для AA и 4.5:1 для AAA. Компонентам интерфейса и графикам нужны 3:1.
Как считается коэффициент?
Каждый цвет линеаризуется из sRGB и сводится к относительной яркости L = 0.2126·R + 0.7152·G + 0.0722·B; коэффициент равен (светлое L + 0.05) / (тёмное L + 0.05). Это точная формула спецификации WCAG 2.x. Альфа rgba() меньше 1 перед расчётом накладывается на белый.
Похожие инструменты
Конвертер цветов
Вставьте цвет в hex, rgb() или hsl() и получите все три формата плюс готовый ряд тонов и оттенков для вашей дизайн-системы.
Все инструменты →
Выбор цвета
Выберите цвет из образца или возьмите его прямо с экрана через EyeDropper API — hex, RGB и HSL копируются одним кликом.
Все инструменты →
Калькулятор оценок
Калькулятор оценок с весами или по баллам: добавляйте задания, следите за текущей оценкой и буквой в реальном времени и узнавайте точно, что нужно написать на экзамене.
Все инструменты →
Встроить этот инструмент
Одна строка — и инструмент на вашем сайте. Он работает в браузере посетителя.
<iframe src="https://zoyku.com/ru/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>