Крупный текст, 24 px
Обычный текст 15 px. Съешь же ещё этих мягких французских булок да выпей чаю.
Этот инструмент проверяет контраст цвета текста и фона по формуле WCAG 2.1 и сразу показывает коэффициент контрастности с оценкой «проходит» или «не проходит» для уровней AA и AAA при обычном и крупном тексте. Если пара не проходит, он предложит ближайший подходящий цвет того же тона, чтобы исправить дизайн без смены стиля.
Как пользоваться
- Нажмите на большой образец, чтобы открыть палитру, возьмите цвет с экрана пипеткой или введите значение в любое поле.
- Вставьте любой CSS-цвет (#hex, rgb(), hsl(), hwb(), oklch(), lab(), название…) в поле или в любое место страницы.
- Нажмите кнопку копирования рядом с форматом. Ползунок «Непрозрачность» добавляет прозрачность.
- В палитре нажмите на образец, чтобы сделать его текущим; долгое нажатие (или правый клик) копирует HEX. На вкладке «Контраст» задайте цвета текста и фона и нажмите на подсказку, чтобы исправить неподходящую пару.
- WCAG 2.1 требует 4,5:1 для обычного текста (AA) и 7:1 для AAA. Крупному тексту (24 px или 18,66 px жирным) нужно 3:1 для AA и 4,5:1 для AAA. Элементам интерфейса и графике — 3:1.
- Подсказки сохраняют тон и насыщенность и меняют только светлоту (в OKLCH) до ближайшего подходящего значения.
- Полупрозрачные цвета смешиваются с фоном перед расчётом.
- Значения CMYK — упрощённое преобразование; для печати используйте цветовой профиль типографии.
- Недавние цвета хранятся только в этом браузере.
Пороговые значения WCAG
WCAG 2.1 требует контраст не ниже 4,5:1 для обычного текста (уровень AA) и 7:1 для уровня AAA. Крупному тексту — от 24 px или от 18,66 px полужирным — нужно 3:1 для AA и 4,5:1 для AAA. Элементам интерфейса и значимой графике, например рамкам полей и иконкам, нужно 3:1.
Коэффициент меняется от 1:1 (одинаковые цвета) до 21:1 (чёрный на белом).
Как считается контраст
Каждый цвет переводится в относительную яркость: каналы sRGB линеаризуются и взвешиваются с коэффициентами 0,2126 для красного, 0,7152 для зелёного и 0,0722 для синего. Коэффициент равен (L1 + 0,05) / (L2 + 0,05), светлый цвет в числителе. Серый #767676 на белом даёт 4,54:1 и едва проходит AA, а #777777 даёт 4,48:1 и не проходит — граница бывает очень тонкой. Полупрозрачные цвета сначала смешиваются с фоном.
Как исправить пару
Предложения сохраняют тон и насыщенность и меняют только светлоту в OKLCH — до ближайшего проходящего значения. Затемнить текст обычно незаметнее всего. Контраст — лишь часть доступности: толщина, размер шрифта и интервалы тоже важны.
Частые вопросы
Какой контраст нужен для WCAG AA?
4,5:1 для обычного текста и 3:1 для крупного (24 px или 18,66 px полужирным). Кнопкам, рамкам полей и иконкам нужно 3:1 относительно окружения.
Чем AA отличается от AAA?
AA — уровень, которого требует большинство законов и стандартов. AAA строже: 7:1 для обычного текста и 4,5:1 для крупного; его рекомендуют для длинного чтения и людей со слабым зрением.
Проходит ли белый текст на синей кнопке?
Зависит от оттенка синего. Белый на #1E88E5 даёт 3,68:1 — этого хватает только для крупного текста; для подписей кнопок обычного размера нужен синий потемнее.
Что считается крупным текстом?
Текст не меньше 24 px (18 pt) обычного начертания или 18,66 px (14 pt) полужирного. Всё, что меньше, считается обычным текстом.
Как инструмент подбирает предложенный цвет?
Он сохраняет тон и насыщенность и меняет только светлоту в OKLCH, пока пара не достигнет нужного коэффициента, поэтому цвет остаётся в той же гамме.
Это то же самое, что метод APCA?
Нет. Здесь используется коэффициент контрастности WCAG 2.1 — формула, на которую ссылаются действующие стандарты и законы о доступности. APCA — другой, более новый метод.