Проверка контраста
Задаёте два цвета — получаете коэффициент и вердикт для каждого размера, который WCAG оценивает отдельно. Если пара не проходит, инструмент находит ближайший цвет, который проходит, не сдвигая оттенок, так что правка остаётся в рамках бренда. Рядом стоит более новая величина APCA, ясно помеченная как ещё не стандарт.
| Где применяется | Требуется | AA | AAA |
|---|
Крупный текст, от 24 px
Основной текст обычного размера — тот случай, который реально приходится проходить почти любой странице.
Что на самом деле измеряет коэффициент
Каждый цвет переводится в относительную яркость — взвешенную сумму красного, зелёного и синего каналов после снятия гамма-кривой sRGB, причём зелёный весит больше всех, потому что к нему глаз чувствительнее. Коэффициент — это более светлая яркость плюс небольшая константа, делённая на более тёмную плюс та же константа. Именно константа не даёт шкале уйти в бесконечность на чистом чёрном, и она же объясняет, почему формула снисходительнее к тёмным фонам, чем глаз большинства людей.
Почему у одной пары несколько вердиктов
WCAG не оценивает пару цветов один раз. Крупному тексту разрешена планка ниже, чем основному, потому что размер берёт на себя часть работы, которую иначе делал бы контраст, а элементы интерфейса — рамка чекбокса, кольцо фокуса — оцениваются ещё и отдельно. Палитра, проваленная для основного текста, может быть совершенно правильной для заголовка, поэтому таблица даёт все случаи, а не один общий вердикт.
Как сохранить оттенок при исправлении
Обычное решение для непроходящей пары — взять серый потемнее, и цвет незаметно вымывается из бренда. Подсказка здесь двигает только светлоту, минимальным шагом, который берёт порог, а оттенок и насыщенность оставляет там, где вы их поставили. Это тот же цвет, просто отодвинутый ровно настолько, чтобы его можно было читать.
О числе APCA
APCA — модель контраста, которую готовят для следующей версии руководства. Она учитывает то, чего коэффициент WCAG 2 не видит: полярность, насыщенность начертания, то, как воспринимаемый контраст падает на тёмном фоне, — и обычно сходится с вашими глазами там, где старая формула расходится. Здесь она показана потому, что действительно информативна, и помечена ясно потому, что проверяют вас не по ней. Соответствие сегодня — это коэффициент, а не Lc.
Часто задаваемые вопросы
Что считается крупным текстом?
18 пунктов, примерно 24 пикселя, или 14 пунктов полужирным, примерно 18,66 пикселя полужирным. Всё, что ниже, — обычный текст, и ему нужен коэффициент повыше.
Мои серые проходят на белом, но не на тёмном. Почему?
Формула WCAG 2 несимметрична так, как несимметрично восприятие. Светлый текст на тёмном фоне читается глазом как менее контрастный, чем говорит коэффициент, — это один из пробелов, которые APCA и создавалась закрывать. Если на тёмном пара проходит впритык, доверьтесь глазам и добавьте ещё немного.
Действует ли коэффициент для значков и рамок?
Да, 3:1, по правилу о контрасте нетекстовых элементов. Оно охватывает те части элемента управления, которые нужно видеть, чтобы им пользоваться, — контур поля, переключатель, индикатор фокуса, — но не декоративную графику и не логотип.
Отправляется ли куда-нибудь то, что я здесь ввожу?
Нет. Цвета никогда не покидают страницу, ничего не отправляется и не сохраняется.
Сделано командой GO AI. Конвертер OKLCH · Наше заявление о доступности · Все бесплатные инструменты