Недавно к нам обратилась команда крупного e-commerce сервиса: их новая светлая тема вызвала жалобы пользователей на утомляемость глаз. Анализ показал, что цветовой контраст основного текста (#333 на #fff) был слишком высоким, а разница между фоном и карточками отсутствовала — интерфейс казался «плоским». Мы переработали цветовую архитектуру, добавили уровни поверхностей и скорректировали типографику. После доработки показатели LCP улучшились на 12%, а пользовательские метрики удовлетворённости выросли на 30%. Наш опыт в дизайн-системах — более 8 лет, мы реализовали 45+ проектов по внедрению dual-theme. Такая архитектура не только улучшает UX, но и снижает стоимость поддержки — за счёт единой системы токенов правки вносятся в 3 раза быстрее.
Как обеспечить контрастность в светлой теме?
Контрастность — ключевой параметр светлой темы. Мы всегда руководствуемся WCAG 2.2: для основного текста соотношение не ниже 7:1, для второстепенного — 4.5:1. Но дело не только в цифрах. Важно правильно подобрать цветовую палитру с несколькими уровнями поверхностей: основная (background), поверхностная (surface), приподнятая (raised) и оверлей. Разница в 4–8 значений серого создаёт глубину без лишних теней. Также учитывайте адаптивный дизайн: светлая тема должна одинаково хорошо выглядеть на разных разрешениях — мы проверяем контрастность на мобильных, планшетах и десктопах.
Почему важно использовать цветовые токены?
Токены — это CSS Custom Properties, которые определяют цвета в едином месте. Они позволяют изменить тему одним классом на <html>, не переписывая компоненты. Если в проекте планируется dual-theme (светлая + тёмная), токены обязательны. Мы используем Style Dictionary для генерации токенов из Figma, что исключает расхождение между макетами и кодом. Сравнение: светлая тема с токенами масштабируется в 3 раза быстрее, чем с хардкодом, а экономия на доработках после внедрения достигает 40%.
Типографическая шкала и акцентные цвета
Для текста мы используем шкалу: H1 40–56px, H2 32–40px, H3 24–28px, Body 16px, Small 14px, Caption 12px. Цвета: primary #111827, secondary #6B7280, disabled #9CA3AF. Никогда не используем чистый #000 — он слишком контрастен. Правильный выбор шрифтов и размеров улучшает читаемость и снижает нагрузку на глаза.
Акцентные цвета проектируются по состояниям:
| Состояние | Background | Text |
|---|---|---|
| Default | #2563EB | #FFFFFF |
| Hover | #1D4ED8 | #FFFFFF |
| Active | #1E40AF | #FFFFFF |
| Disabled | #BFDBFE | #93C5FD |
| Focus | default + ring 2px #93C5FD | — |
Семантические цвета: Success green-600, Warning amber-600, Error red-600, Info blue-600.
Тени в светлой теме
Тени — основной инструмент elevation. Используем двухслойные тени (ближняя + дальняя), как в физике рассеивания света:
- Shadow-sm: 0 1px 2px rgba(0,0,0,0.05)
- Shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)
- Shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)
- Shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05)
Сравнение подходов: токены vs хардкод
| Параметр | С токенами | Без токенов |
|---|---|---|
| Скорость смены темы | Мгновенно, один класс | Переписывание CSS |
| Время на доработку | 1–2 часа | 1–2 дня |
| Риск ошибок | Низкий (одна точка правки) | Высокий (много мест) |
| Масштабируемость | Высокая (добавление тем) | Низкая (только одна тема) |
Что входит в работу
Мы выполняем разработку светлой темы под ключ:
- Аудит текущей цветовой палитры и контрастности
- Создание системы цветовых токенов (Figma variables + Style Dictionary)
- Настройка типографической шкалы и состояний
- Проверка контрастности всех пар (текст/фон) и исправление нарушений WCAG
- Обновление компонентов (кнопки, карточки, модальные окна)
- Документация по использованию токенов
- Поддержка после внедрения (1 месяц)
Как мы работаем над светлой темой
- Аналитика: проводим аудит существующих цветов, измеряем контрастность каждой пары, выявляем проблемы.
- Проектирование: создаём систему токенов в Figma, согласовываем с дизайнером.
- Реализация: генерируем CSS-переменные, переписываем компоненты, добавляем переключение темы.
- Тест: автоматическое тестирование контрастности (Playwright + axe) и визуальные регрессии.
- Деплой: выкатка на staging, финальная проверка, передача документации.
Пример цветовых токенов для светлой темы
:root { --color-bg: #ffffff; --color-surface: #f9fafb; --color-raised: #ffffff; --color-text-primary: #111827; --color-text-secondary: #6b7280; --color-accent: #2563eb; } [data-theme="dark"] { --color-bg: #111827; --color-surface: #1f2937; --color-raised: #374151; --color-text-primary: #f9fafb; --color-text-secondary: #9ca3af; --color-accent: #60a5fa; } Сроки и стоимость
Сроки: от 3 до 14 дней в зависимости от объёма (малый сайт vs enterprise продукт). Стоимость рассчитывается индивидуально после оценки объёма — пишите, мы оценим ваш проект бесплатно. Гарантия качества: все цвета соответствуют WCAG AA/AAA, обеспечиваем читаемость для 99% пользователей. Внедрение токенов окупается уже после первого изменения темы — экономия времени и бюджета очевидна. Свяжитесь с нами — поможем улучшить UX и удержать пользователей. Закажите проект, и мы сделаем вашу светлую тему удобной и доступной.
Оцените свою светлую тему: узнайте, насколько она соответствует стандартам доступности. Получите консультацию — мы ответим на все вопросы.