Проверка согласованности интерфейса
Загрузите design tokens и CSS — инструмент найдёт цвета вне палитры, размеры вне шкалы, неизвестные переменные и пары с низким контрастом. Сравните текущий скриншот с утверждённым baseline и разберите все замечания в одном списке со статусами.
Бесплатно, без регистрации
Всё считается в этом браузере. Текст хранится в localStorage, утверждённый baseline — в IndexedDB этого браузера, текущий скриншот — только в памяти вкладки. Ничего не отправляется.
Design tokens
Вставьте или загрузите токены: W3C DTCG JSON ($value/$type, псевдонимы {group.token}), JSON Style Dictionary / плоский JSON или CSS custom properties (:root и тёмная тема в .dark / [data-theme=dark]).
Формат определяется автоматически. В JSON тёмная тема — верхняя группа "dark".
Для пересчёта rem в px (обычно 16).
Как работает проверка
Токены
W3C DTCG JSON ($value, $type, группы, псевдонимы {group.token} с защитой от циклов), JSON Style Dictionary или CSS custom properties. Тёмная тема — блоки .dark, [data-theme=dark], @media (prefers-color-scheme: dark) или группа "dark" в JSON.
Аудит CSS
Каждое объявление сверяется с токенами: цвет — по перцептивному расстоянию CIEDE2000, отступы, радиусы, кегль и интерлиньяж — по шкале токенов, плюс неизвестные var(--x), плотность !important, z-index и шрифты. У каждого замечания — ID правила, файл:строка, объявление и подсказка.
Контраст
Пары подбираются по именам (text / foreground / on-* против background / surface) и добавляются вручную; контраст WCAG 2.x считается для каждой темы: AA и AAA для обычного и крупного текста, 3:1 для нетекстовых элементов.
Скриншоты
Утвердите baseline (файл или снимок экрана), сравните текущий скриншот: попиксельный diff с допуском, учётом сглаживания и областями игнорирования, картинка различий и список областей изменений с крупным планом.
Разбор и отчёт
Все замечания в одном списке: открыто / исправить / принятое отклонение / ложное срабатывание, ответственный и заметка. Отчёт — Markdown, PDF через печать, CSV; документ — JSON с обратным импортом и версиями.
Правила и пороги
Таблица строится из того же кода, что и проверка. Важность — ориентир для очереди исправлений, а не оценка качества продукта.
UIC-C01
- Правило
- Цвет токена записан литералом
- Важность
- низкая
- Порог
- ΔE00 ≤ 1 до цветового токена: замените литерал на переменную
UIC-C02
- Правило
- Цвет почти совпадает с токеном
- Важность
- средняя
- Порог
- 1 < ΔE00 ≤ 3: вероятно, имелся в виду ближайший токен
UIC-C03
- Правило
- Цвет вне палитры
- Важность
- высокая
- Порог
- ΔE00 > 3 до любого цветового токена
UIC-T01
- Правило
- Почти одинаковые цветовые токены
- Важность
- средняя
- Порог
- Два разных значения одной темы ближе ΔE00 1, токены не ссылаются друг на друга (одинаковые значения у разных ролей — норма)
UIC-S01
- Правило
- Отступ вне шкалы
- Важность
- средняя
- Порог
- margin/padding/gap отличается от всех токенов отступов больше чем на 0.5 px
UIC-S02
- Правило
- Радиус вне шкалы
- Важность
- низкая
- Порог
- border-radius не совпадает с токенами радиусов (кроме % и ≥ 999 px)
UIC-S03
- Правило
- Кегль вне шкалы
- Важность
- средняя
- Порог
- font-size в px/rem не совпадает с токенами кегля
UIC-S04
- Правило
- Интерлиньяж вне шкалы
- Важность
- низкая
- Порог
- line-height не совпадает с токенами интерлиньяжа той же единицы
UIC-S05
- Правило
- Тень не из токенов
- Важность
- низкая
- Порог
- box-shadow/text-shadow не совпадает ни с одной тенью из токенов (после нормализации)
UIC-V01
- Правило
- Неизвестная переменная
- Важность
- высокая
- Порог
- var(--x) не определена ни в токенах, ни в проверяемом CSS
UIC-I01
- Правило
- Частый !important
- Важность
- средняя
- Порог
- ≥ 3 и больше 5 % объявлений файла
UIC-Z01
- Правило
- z-index — «магическое число»
- Важность
- низкая
- Порог
- Число, кроме -1, 0, 1 и значений из токенов слоёв
UIC-F01
- Правило
- Шрифт не из токенов
- Важность
- средняя
- Порог
- Первая гарнитура font-family не совпадает с гарнитурами токенов
UIC-K01
- Правило
- Контраст текста ниже AA
- Важность
- высокая
- Порог
- Обычный текст: меньше 4.5:1 (WCAG 1.4.3)
UIC-K02
- Правило
- Контраст крупного текста ниже AA
- Важность
- высокая
- Порог
- Крупный текст (от 24 px или 18,66 px жирным): меньше 3:1
UIC-K03
- Правило
- Нетекстовый контраст ниже 3:1
- Важность
- средняя
- Порог
- Границы элементов управления, фокус, иконки: меньше 3:1 (WCAG 1.4.11)
UIC-D01
- Правило
- Визуальное отличие от baseline
- Важность
- средняя
- Порог
- Связная область изменённых пикселей (сетка 8 px); от 2 % площади — высокая важность
UIC-D02
- Правило
- Размер скриншота изменился
- Важность
- средняя
- Порог
- Ширина или высота отличается от baseline: сравнивается общая верхняя левая область
- Цвет: ΔE00 ≤ 1 — разница незаметна глазу, это тот же токен, записанный литералом; до 3 — «почти совпадает» (обычно опечатка); больше — «вне палитры». Разница прозрачности учитывается отдельно.
- Литералы внутри var(--x, …) и calc(…), определения переменных (--x: …) и переменные SCSS ($x: …) на литералы не проверяются: это часть системы токенов.
- Если токенов нужного вида нет (например, шкалы отступов), правило пропускается и это видно в отчёте — инструмент не придумывает шкалу за вас.
- Контраст: AA — 4.5:1 для обычного текста и 3:1 для крупного, AAA — 7:1 и 4.5:1, нетекстовый — 3:1. Порог сравнивается без округления: 4,48:1 не проходит AA.
- По умолчанию: допуск канала 24/255, сглаживание и сдвиг на 1 px не считаются изменением, сетка областей 8 px.
Как определяется вид токена
Если у токена есть $type (DTCG), используется он; иначе — значение и имя. Порядок строк важен: первое совпадение выигрывает.
Цвет
- Признаки в имени (если $type не задан)
- $type: color или значение распознаётся как цвет
Тень
- Признаки в имени (если $type не задан)
- shadow, elevation
Радиус
- Признаки в имени (если $type не задан)
- radius, rounded, corner
Интерлиньяж
- Признаки в имени (если $type не задан)
- line-height, leading
Кегль
- Признаки в имени (если $type не задан)
- font-size, text-size, fs, type-scale
Начертание
- Признаки в имени (если $type не задан)
- font-weight, weight
Шрифт
- Признаки в имени (если $type не задан)
- font-family, font, family, typeface
Слой (z-index)
- Признаки в имени (если $type не задан)
- z-index, z, layer
Отступ
- Признаки в имени (если $type не задан)
- spac, gap, gutter, inset, pad, margin, space, size, s, sp
Ограничения
- Проверяется исходный CSS, а не то, что браузер реально применил: каскад, специфичность и неиспользуемые правила не учитываются. Для итоговых стилей нужен браузер и тесты.
- Пары контраста по именам — эвристика: инструмент не знает, какой текст на каком фоне стоит в макете. Неверную пару отметьте «ложным срабатыванием», нужную — добавьте вручную.
- Полупрозрачный фон накладывается на белый (основная тема) или чёрный (тёмная) — если под ним другой цвет, добавьте пару с итоговым цветом.
- Визуальное сравнение попиксельное: скриншоты одного экрана должны быть сняты в одном браузере, масштабе и размере окна. Шрифты и сглаживание разных ОС дают отличия — для этого есть допуск и области игнорирования.
- oklch/oklab переводятся в sRGB с обрезкой по охвату; lab(), lch(), color() и color-mix() не разбираются.
Приватность
- Всё считается в вашем браузере: при проверке токены, CSS и скриншоты не отправляются на сервер и не попадают в адрес страницы.
- Тексты, разбор и версии хранятся в localStorage этого браузера. Утверждённый baseline — в IndexedDB этого браузера, текущий скриншот — только в памяти вкладки. «Очистить всё» удаляет всё это.
- Снимок экрана делается только по вашему нажатию: берётся один кадр, запись сразу останавливается.
- В аналитику уходит только факт сравнения или экспорта и формат файла — без содержимого.
- Результат уходит к нам, только если вы сами оставите заявку и не снимете галочку «Приложить результат» — что именно уйдёт, видно в форме: число токенов, находки по правилам, провалы контраста и доля изменений скриншота. Скриншоты с заявкой не уходят никогда, как и CSS и токены целиком.
Похожие инструменты
Все инструменты · 40
Готовность к релизуМатрица проверок с доказательствами: CI, миграции, резервные копии, план отката, мониторинг, исключения из рисков и согласование → решение GO / NO-GO.
Screenshot → Bug: баг-репорт по скриншотуСкриншот или видео → скрытие приватных данных, разметка проблемы, шаги воспроизведения, проверка человеком и экспорт в GitHub, GitLab или Jira.
User Flow Tester: сценарные E2E-тестыКонструктор пользовательских сценариев → готовые тесты Playwright с защитой от запуска на production, покрытие важных маршрутов и разбор результатов pass/fail.
API Mock Studio: тестовый APIИмпорт OpenAPI или ручные endpoints → тестовые данные, разные HTTP-ответы, задержки и ошибки, журнал запросов, проверка контракта и готовый mock-сервер.
Проверка спроса до разработкиГипотезы с порогами, лендинг и форма заявки, UTM-ссылки, воронка, интервью и отчёт эксперимента → решение продолжать, менять или закрывать идею.
Конструктор коммерческого предложенияШаблоны КП для IT-проектов: состав, этапы, смета, сроки, допущения и исключения, версии с контролем цифр, согласование и PDF.Нужен аудит интерфейса целиком?
Аудит InterLAB — платная проверка вёрстки, доступности, производительности и кода с приоритетами исправлений. Первый короткий разговор о формате бесплатный.
- Первый короткий разговор бесплатный — выбираем формат работы
- NDA — по вашему или нашему шаблону
- Стоимость — после брифа и согласования объёма