Документация

Elements: проверьте цветовую палитру на настоящих UI-компонентах

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

Открыть Elements

Что такое режим Elements?

Elements - это лаборатория компонентов. В отличие от мокапов страниц в Explore, здесь нет макета страницы вообще: только элементы, которые должна красить палитра, в ключевых состояниях, рядом с живой проверкой контраста. Когда вокруг компонентов ничего нет, слабой паре цветов негде спрятаться.

Проверка на уровне компонентов: проблемы с контрастом видны на той кнопке, поле или бейдже, где они есть, а не где-то на перегруженной странице.
Все состояния сразу: обычное, hover, focus и disabled показаны рядом, а не по одному.
Мгновенная обратная связь: меняете цвет в панели цветов - и каждая проверка пересчитывается сразу.

Что внутри лаборатории

Лаборатория разделена на пять групп, в каждой набор настоящих компонентов:

Группа	Что показано
Типографика	Заголовок, основной текст, вторичный текст и ссылка - на фоне и на поверхности
Кнопки	Primary, secondary, outline, ghost и destructive кнопки в состояниях default, hover, focus и disabled
Элементы форм	Текстовое поле в состояниях default, focused, interactive, disabled и error, а также textarea, select, checkbox, radio и switch
Бейджи	Нейтральный и primary бейджи
Статусные бейджи и алерты	Бейджи и алерты success, warning, error и info

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

Виды Lab и Mockup

Одни и те же компоненты можно смотреть двумя способами:

Lab - изолированная таблица компонентов и состояний. Лучший вид для проверки деталей по одной.
Mockup помещает те же компоненты в небольшой макет страницы - навигация, первый экран, форма приглашения, карточка статуса и таблица команды, - чтобы оценить, как они работают вместе в контексте.

Пошагово

Откройте Elements. Режим работает на вашей текущей палитре, поэтому начинается с тех цветов, что уже стоят в панели цветов.
Измените палитру в панели цветов или сгенерируйте новую. Компоненты перекрасятся мгновенно.
Посмотрите сводку контраста вверху. Она показывает либо «All pass», либо число провальных пар.
Нажмите на строку с провалом, чтобы перейти к компоненту с проблемой, и наведите на индикатор контраста, чтобы увидеть точное значение и предлагаемое исправление.
Примените исправление - или Fix all - и переключитесь на Mockup, чтобы увидеть исправленную палитру в контексте.

Уровни контраста, которые использует режим

Каждая пара цветов текста, границ и иконок измеряется как коэффициент контраста и сравнивается с порогами WCAG для своего типа:

Пара	AA	AAA
Обычный текст	4.5:1	7:1
Крупный текст (от 24px, или от 19px в жирном начертании)	3:1	4.5:1
Элементы интерфейса: границы, иконки	3:1	4.5:1

Пара считается проваленной, если не достигает порога AA. Во всплывающей подсказке индикатора также указано, достигает ли она AAA.

Как читать сводку контраста

Сводка собирает все проверенные пары в одном месте, сначала провальные:

Каждая строка называет пару, например «Secondary text on surface» или «Primary button on hover», и показывает её коэффициент.
Клик по строке прокручивает лабораторию к компоненту, которому принадлежит пара.
У каждой провальной строки есть своя кнопка Fix, а Fix all исправляет сразу все исправимые провалы.
Состояния hover тоже проверяются: кнопка может проходить в обычном состоянии и всё равно проваливаться, когда применяется цвет hover.

Как работает Fix

Исправление сдвигает цвет, вызвавший провал, ровно настолько, чтобы достичь порога AA, а подсказка показывает цвета «было» и «станет» до клика. Исправления бывают двух видов:

Исправление палитры меняет одну из ролей палитры - текст, вторичный текст, primary или accent, - поэтому затрагивает этот цвет везде, где он используется, а не только на этом компоненте.
Локальное исправление относится только к одному статусному бейджу или алерту и палитру не меняет.

Поскольку роль может встречаться в нескольких парах, исправление подбирается так, чтобы удовлетворять всем из них, включая состояния hover, - чтобы починка одной пары не сломала другую.

Почему статусные цвета не следуют палитре

Цвета success, warning, error и info зафиксированы намеренно, чтобы зелёный, жёлтый и красный сохраняли смысл при любом фирменном цвете, - то же соглашение используют дизайн-системы вроде shadcn/ui, Linear и Stripe. Под вашу палитру подстраивается тонированный фон вокруг них. Когда статусный алерт не проходит контраст, исправление меняет эту тонировку (а если ни одна тонировка не подходит - слегка оттенок), не трогая вашу палитру.

Советы, чтобы палитра проходила проверку

Сначала проверьте вторичный текст: светло-серый на белом - самая частая причина провала по контрасту.
Следите за ссылками и outline-кнопками: они красят текст цветом primary, поэтому бледный primary проваливается и на фоне, и на поверхности.
Если текст на цвете accent не проходит, accent, скорее всего, средний тон, не подходящий ни чёрному, ни белому тексту; сделайте его светлее или темнее.
Не пропускайте строки hover. Фоны hover у secondary и outline смещаются к цвету текста, поэтому контраст может отличаться от обычного состояния.
Переключайтесь между светлой и тёмной темой: у статусных цветов есть варианты для каждой, поэтому палитра может проходить в одной теме и проваливаться в другой.

Связанные руководства: проверка контраста · генератор типографической шкалы

Часто задаваемые вопросы

Режим Elements бесплатный?

Да, он бесплатный и не требует регистрации. Откройте его, меняйте палитру - и каждая проверка обновляется вживую.

Чем Elements отличается от других режимов Explore?

Products и Styles показывают палитру внутри целых макетов страниц. Elements показывает только сами компоненты в их состояниях с проверкой контраста - он создан для поиска проблем, а не для оценки общего настроения.

По какому уровню WCAG идёт проверка?

Отметка прохождения - AA: 4.5:1 для обычного текста, 3:1 для крупного текста и элементов интерфейса вроде границ и иконок. В подсказке для каждой пары также указано, достигает ли она AAA (7:1 для обычного текста).

Изменит ли Fix всю мою палитру?

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

Можно ли проигнорировать провальную пару?

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

Заменяет ли это проверку контраста?

Нет, они дополняют друг друга. Проверка контраста измеряет одну выбранную пару цветов; Elements проверяет сразу все пары, которые даёт ваша палитра на настоящих компонентах.

Готовы проверить палитру на настоящих компонентах? Открыть Elements