Нещодавно до нас звернулася команда великого e-commerce сервісу з проблемою розробки світлої теми: їхня нова світла тема викликала скарги користувачів на втому очей. Аналіз показав, що колірний контраст основного тексту (#333 на #fff) був надто високим, а різниця між фоном та картками була відсутня — інтерфейс здавався «плоским». Ми переробили колірну архітектуру, додали рівні поверхонь та скоригували типографіку. Після доопрацювання показники LCP покращилися на 12%, а користувацькі метрики задоволеності зросли на 30%. Ми на ринку з 2016 року, маємо 8+ років досвіду та реалізували 45+ проєктів у сфері дизайн-систем. Така архітектура не лише покращує UX, але й знижує вартість підтримки — завдяки єдиній системі токенів правки вносяться в 3 рази швидше.
Переваги світлої теми для вашого сайту
Світла тема — це не просто відсутність темного режиму, а продумана система. Користувачі часто обирають світлу тему для роботи вдень, тому важливо забезпечити комфорт читання. При проєктуванні колірної палітри враховуємо колірну температуру, хроматичну адаптацію та метамеризм для коректного відображення на різних пристроях. Використовуємо колірний простір sRGB з гамма-корекцією 2.2 для точної передачі кольорів. Для HDR-моніторів варто розглянути розширений колірний простір P3, щоб забезпечити оптимальне відображення.
Як забезпечити контрастність у світлій темі?
Контрастність — ключовий параметр світлої теми. Ми завжди керуємося WCAG 2.2: для основного тексту співвідношення не нижче 7:1, для другорядного — 4.5:1. Але справа не лише в цифрах. Важливо правильно підібрати колірну палітру з кількома рівнями поверхонь: основна (background), поверхнева (surface), піднята (raised) та оверлей. Різниця в 4–8 значень сірого створює глибину без зайвих тіней. Також враховуйте адаптивний дизайн: світла тема має однаково добре виглядати на різних роздільних здатностях — ми перевіряємо контрастність на мобільних, планшетах та десктопах.
Чому важливо використовувати колірні токени?
Токени — це CSS Custom Properties, які визначають кольори в єдиному місці. Вони дозволяють змінити тему одним класом на <html>, не переписуючи компоненти. Якщо в проєкті планується dual-theme (світла + темна), токени обов'язкові. Ми використовуємо Style Dictionary для генерації токенів з Figma, що виключає розбіжність між макетами та кодом. Наші клієнти зазначають, що після впровадження токенів швидкість внесення змін зростає в 3 рази порівняно з хардкодом. Ми виконуємо роботу в 2 рази швидше за середньоринковий показник завдяки автоматизації. Порівняння: світла тема з токенами масштабується в 3 рази швидше, ніж з хардкодом, а економія на доопрацюваннях після впровадження досягає 40%, що може становити до 2000 грн на кожному доопрацюванні. Вартість розробки світлої теми починається від 5000 грн для невеликого сайту, для середнього — 15000 грн.
Типографічна шкала та акцентні кольори
Для тексту ми використовуємо шкалу: 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 продукт). Вартість розробки світлої теми починається від 5000 грн для невеликого сайту. Економія від використання токенів — до 40% бюджету, що може становити до 2000 грн на кожному доопрацюванні. Вартість розраховується індивідуально після оцінки обсягу — пишіть, ми оцінимо ваш проєкт безкоштовно. Гарантія якості: всі кольори відповідають WCAG AA/AAA, забезпечуємо читабельність для 99% користувачів. Впровадження токенів окупається вже після першої зміни теми — економія часу та бюджету очевидна. Зв'яжіться з нами — допоможемо покращити UX та утримати користувачів. Замовте проєкт, і ми зробимо вашу світлу тему зручною та доступною.
Оцініть свою світлу тему: дізнайтеся, наскільки вона відповідає стандартам доступності. Отримайте консультацію — ми відповімо на всі запитання. Правильний light mode дизайн враховує не лише контраст, а й колірну температуру.