ГлавнаяИнструментыПродуктовый дизайн
Инструменты для продуктового дизайнера: контраст, цвет и типографика
Проверки, которые нужны дизайнеру между Figma и передачей в разработку: проходят ли цвета WCAG, как собрать доступную палитру и типографическую шкалу на CSS clamp(), успевают ли пользователи прочитать подсказки и шаги тура. Палитры и шкалы выгружаются в CSS, Tailwind или токены.
Инструменты в подборке
- Проверка контраста цветов
Проходит ли пара цветов текста и фона WCAG AA или AAA?
- Генератор доступной палитры
Как получить доступную палитру, где контраст проверен для каждого оттенка?
- Палитра интерфейса для сайта
Какие цвета интерфейса вывести из фирменного цвета, чтобы весь текст прошёл контраст?
- Генератор типографической шкалы
Какие размеры шрифта дают стройную адаптивную типографическую шкалу?
- Время чтения подсказок и тура
Успеет ли пользователь прочитать подсказку или шаг тура?
- Проверка текста подсказки
Достаточно ли подсказка короткая, понятная и ведёт ли к действию?
- Калькулятор SUS
Какой балл SUS у интерфейса и хорошее ли у него юзабилити?
Когда они нужны
Доступный визуальный дизайн
Проверьте контраст текста и фона по WCAG AA и AAA, сгенерируйте палитру с известным контрастом каждого оттенка и соберите модульную шкалу с адаптивными размерами.
Интерфейс онбординга и юзабилити
Оцените, сколько времени занимает чтение подсказки или шага тура, проверьте её текст и измерьте юзабилити опросом SUS.
Частые вопросы
Какой контраст требует WCAG?
WCAG AA требует 4,5:1 для обычного текста и 3:1 для крупного текста и элементов интерфейса; AAA — 7:1 и 4,5:1. Проверка контраста показывает все уровни и предлагает ближайший проходящий цвет.
Как сгенерировать доступную цветовую палитру?
Выберите фирменный цвет — генератор построит оттенки 50–900 в OKLCH, измерит контраст по WCAG для каждого шага и перечислит пары, проходящие AA.
Что такое fluid-типографика?
Набор размеров шрифта, построенный от коэффициента (например, 1,25), где каждый размер плавно растёт между минимальной и максимальной шириной экрана с помощью CSS clamp(). Генератор выдаёт готовый CSS.
Сколько подсказка должна оставаться на экране?
Столько, чтобы её успели прочитать: взрослые читают с экрана примерно 150–200 слов в минуту по-русски, плюс время найти элемент. Калькулятор времени чтения предлагает длительность для каждой подсказки и шага тура.
Как дизайнеры измеряют юзабилити?
System Usability Scale — опрос из 10 вопросов с баллом от 0 до 100; 68 — средний результат. Калькулятор SUS обрабатывает сразу много ответов и показывает доверительный интервал, перцентиль, оценку и словесную характеристику.
Можно ли использовать результаты в дизайн-системе?
Да. Палитры выгружаются в CSS, Tailwind или JSON, типографические шкалы — в CSS, Tailwind или токены.
Смежные подборки
UX-райтинг
Текст подсказок, читаемость, время чтения, темы писем и сниппеты.
Инструментов: 6Открыть →UX-исследования
Размер выборки опроса и расчёт NPS, CSAT, CES, SUS и модели Кано.
Инструментов: 5Открыть →Продакт-менеджмент
Приоритизация роадмапа, использование функций, time to value и оценки пользователей.
Инструментов: 15Открыть →