Проверка контраста цветов

АвторOleh Soloninобновлено 5 октября 2026 г.

Цвет текста

Цвет фона

Результат

Как это выглядит
Съешь ещё этих мягких французских булок
Коэффициент контраста4,54
Обычный текст, AAпроходит
Обычный текст, AAAне проходит
Крупный текст, AAпроходит
Крупный текст, AAAпроходит
Яркость текста0,1812
Яркость фона1

4,5 к 1 — минимум для обычного текста

Коэффициент контраста между текстом и фоном и проверка на соответствие уровням доступности AA и AAA.

Контраст считается не по разнице цветов, а по относительной яркости с учётом того, что человеческий глаз воспринимает зелёный сильнее красного, а синий слабее всего. Отсюда и странные на вид коэффициенты в формуле WCAG.

Пороги простые: обычному тексту нужно 4,5 к 1 для уровня AA и 7 к 1 для AAA. Крупному тексту — от 18 пунктов или от 14 полужирного — достаточно 3 к 1 и 4,5 к 1 соответственно.

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

Выберите цвет текста и цвет фона.
Читайте вердикт отдельно для обычного и крупного текста: пороги у них разные.
Если не хватает, меняйте сначала цвет текста: фон обычно держит весь дизайн.

Как близко проходит граница

Между «проходит» и «не проходит» часто один шаг в шестнадцатеричном коде. #767676 на белом даёт 4,54 к 1 и годится для основного текста; #777777 даёт 4,48 и уже не годится — на глаз разницы нет.

Поэтому серые оттенки лучше не подбирать на глаз. #767676 — самый светлый серый, который ещё проходит на белом; всё светлее проваливается, как бы хорошо это ни читалось на мониторе дизайнера.

Все строки получены проверкой этой страницы. Четвёртая и пятая различаются одним шагом кода и лежат по разные стороны границы; шестая — популярный «аккуратный» серый, который не проходит ни на одном уровне.
Текст на фоне	Контраст	Обычный текст, AA	Крупный текст, AA
#000000 на #ffffff	21	проходит	проходит
#ffff00 на #000000	19,56	проходит	проходит
#0000ff на #ffffff	8,59	проходит	проходит
#767676 на #ffffff	4,54	проходит	проходит
#777777 на #ffffff	4,48	не проходит	проходит
#999999 на #ffffff	2,85	не проходит	не проходит

Пороги и к чему они относятся

Требование зависит от размера шрифта. Крупный текст начинается с 24 пикселей обычного начертания или с 18,66 пикселя полужирного; для него порог ниже. Графические элементы интерфейса — рамки полей, иконки — имеют собственный порог.

Уровень AA — тот, на который ссылаются стандарты и закупочные требования. AAA — рекомендация: он отсекает много вариантов оформления, которые при AA читаются без труда.

С этими порогами проверка сверяет каждую пару и выносит отдельный вердикт по четырём строкам. Наибольшее возможное значение — 21 к 1, чёрное на белом; наименьшее — 1 к 1, когда цвета совпадают.
Для чего	AA	AAA
основной текст	4,5 к 1	7 к 1
крупный текст — от 24 px или 18,66 px полужирный	3 к 1	4,5 к 1
элементы интерфейса и графика	3 к 1	отдельного уровня нет
логотипы и декоративная графика	не требуется	не требуется

Что показывает калькулятор

Коэффициент контраста в привычном виде «столько-то к одному»
Прохождение уровней AA и AAA отдельно для обычного и крупного текста
Относительную яркость каждого из двух цветов

Что важно учитывать

Формула из WCAG 2.1: яркость с удалением гамма-коррекции sRGB, затем отношение с добавлением 0,05 к обоим значениям.
Прозрачность не учитывается — введите фактический цвет после наложения на фон.

Частые вопросы

Какой контраст нужен по закону?

В России ГОСТ Р 52872 и требования к сайтам госорганов опираются на WCAG уровня AA, то есть 4,5 к 1 для основного текста. В Евросоюзе и США на тот же уровень ссылаются требования к государственным сайтам.

Что считается крупным текстом?

От 18 пунктов обычного начертания или от 14 пунктов полужирного — примерно 24 и 18,66 пикселя. Для него достаточно контраста 3 к 1.

Нужен ли контраст для иконок и границ?

Да, WCAG 2.1 требует 3 к 1 для графических элементов и элементов интерфейса — рамок полей ввода, иконок, индикаторов фокуса.

Почему серый текст такой популярный и такой плохой?

Дизайнерам он кажется аккуратнее, но #999999 на белом даёт всего 2,85 к 1 — провал на всех уровнях. На мобильном экране в солнечный день такой текст становится по-настоящему нечитаемым.

Относится ли требование к тексту-подсказке в полях?

Да. Плейсхолдер — это текст, и порог для него тот же; просто его особенно часто делают слишком светлым, чтобы отличить от введённого. Если различие нужно, темнее делают введённый текст, а не светлее подсказку.

Проверяет ли это дальтонизм?

Нет: контраст считается только по яркости, оттенок в формулу не входит. Красный и зелёный одинаковой яркости дают 1 : 1 и порог не пройдут, но и прошедшая порог пара может хуже различаться при нарушениях цветового зрения — например, при протанопии красный воспринимается темнее, чем учитывает формула. Поэтому правила требуют ещё, чтобы цвет никогда не был единственным способом что-то обозначить.

Мини-пример расчёта

Серый текст на белом

Входные данные: #767676 на #ffffff

Результат: Контраст 4,54 к 1 — AA пройден

Комментарий: Среди серых в шестнадцатеричной записи это самый светлый, который проходит AA на белом: 4,54 к 1 при пороге 4,5 к 1. Чуть светлее — #777777 — и проверка уже не проходит.

Полезные переходы

Все инструменты раздела Инструменты разработчика

Проверка контраста цветов

Результат

Связанные инструменты

Конвертер цветов HEX/RGB/HSL

Генератор CSS-градиента

Индекс читаемости текста

Полезные переходы