Проверка по пикселям

Почему списка пар не хватает

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

Стопку прозрачных слоёв текстовая проверка не поймает и в принципе. Бейдж с тоном внутри выделенной строки таблицы даёт 4,15 при норме 4,5: под ним панель, поверх неё 14% акцента от выделения, и уже поверх — 16% тона самого бейджа. Пара «текст на фоне» тут не одна, а столько, сколько раз эти слои встретятся в разной глубине вложенности, — и заранее такой список не составить.

Отсюда главное свойство проверки: она запускается на вашем экране, а не на примерах из справочника. Примеры писал тот же человек, что и кит, и той композиции, в которой кит ломается, у него в голове не было.

Как запустить

Откройте свой экран, вставьте tools/audit.js в консоль браузера и вызовите:

kitAudit.run()          // вся страница: 6 тем и 3 плотности
kitAudit.run('#main')   // только часть
kitAudit.contrast()     // один прогон в текущей теме
kitAudit.targets()      // один прогон в текущей плотности

run() печатает сводку таблицей и раскрывает нарушения по темам. Их же возвращает объектом, если результат нужно разобрать программой.

Что она меряет

Чего она не видит

Зелёный результат легко принять за гарантию, поэтому границы стоит назвать сразу.

Когда результату не стоит верить

Проверка смотрит на нарисованное, а значит зависит от момента замера. Пять случаев дают ложные нарушения, и все пять стоит узнавать в лицо.

Замер во время анимации. Смена темы в ките анимирована, и цвет, прочитанный в том же кадре, — это интерполяция, а не итог. Первый же прогон дал так шестнадцать несуществующих нарушений в тёмных темах. Узнаётся легко: браузер возвращает цвет как oklab(…) вместо oklch(…). run() глушит переходы сам, но contrast(), вызванный руками сразу после переключения темы, застанет середину перехода.

Дробные ширины. Кнопка сегментированного контрола в плотном режиме — это 22px высоты и 2px зазора, ровно 24 и ни йотой больше. При дробной ширине браузер отдаёт зазор 1,9999, и норма формально падает. Допуск в 0,1px это гасит, но помнить стоит другое: запаса там нет, и приложение, которое чуть сожмёт этот зазор, сломает WCAG молча.

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

Липкая шапка над прокруткой. Расстояние меряется в координатах окна, поэтому элемент, проезжающий над другим, читается как стоящий вплотную: логотип в липкой шапке обнулял зазор карточке под ним. Пересекающиеся коробки — это слои, а не соседи, и проверка их не сравнивает.

Видимо скрытые контролы. Ссылка «Перейти к содержимому» и подписи для скринридеров живут коробкой в пиксель с clip-path, а настоящей целью становятся только в фокусе. Отличать их по размеру не выйдет: собственная ссылка кита объявлена в 1px, а рисуется в 2px, потому что элемент с border-box не может стать тоньше своих рамок. Проверка смотрит на обрезку — clip-path: inset(50%) и есть признак «скрыто визуально». Пока признаком был размер, такая ссылка не только падала сама, но и обнуляла зазор соседу, и кнопка рядом падала вместе с ней.

Что она нашла первым делом

Прочерк «значения нет» в справочнике API был покрашен --text-faint — это декоративный ярус кита с порогом 3:1, а стоял он на тексте, которому положено 4,5. Получилось 3,63 в пяти темах из шести.

Текстовый гейт не увидел бы этого никогда: docs.css — стили сайта, а не кита, и в tokens.css они не входят.

Связанное

Цвет Плотность Конституция