Найкращі практики для колірних палітр темної теми

Перша темна тема, яку я випустив, була, з висоти прожитого, катастрофою. Я взяв наш світлий UI, прогнав кожен колір через фільтр «інверсії», вручну підправив кілька значень і на цьому заспокоївся. У Figma все виглядало нормально. Потім пішли тікети підтримки: текст, який «дзижчав», фірмові кнопки, що світилися, наче радіоактивні цукерки, картки, що зливалися в один плаский аркуш темряви. Урок засів міцно. Хороша палітра для темної теми — це не світла палітра, вивернута навиворіт. Це окрема дизайнерська задача зі своїми правилами, і більшість із них іде проти ваших інстинктів.

Ось що я хотів би почути перед тією першою спробою.

Темна тема — це не інверсія

Коли ви інвертуєте світлу тему, кожне співвідношення, що робило її робочою, перемішується. Білий текст на темно-синій кнопці може бути ідеальним за контрасту 8:1 у світлій темі; переверніть його — і ви ризикуєте отримати блідаву кнопку із сірим текстом, що повністю провалює доступність. Тіні, які несуть більшу частину глибини у світлих інтерфейсах, на темному фоні фактично зникають — 10% чорна тінь поверх майже чорної поверхні невидима. Насичені кольори, які на білому читаються як упевнені й привітні, на чорному стають агресивними й вібрують.

Тож ментальна модель, якою я користуюся, така: темна тема — це окремий набір дизайнерських рішень, який лише ділить спільні макет і бренд. Ви наново розв'язуєте контраст, ієрархію, глибину й акцентний колір з нуля, на темному полотні. Якщо ваш інструментарій дозволяє підтримувати два набори кольорів (семантичні токени — чистий спосіб це зробити, але про це більше в нашому матеріалі про колірні токени дизайн-систем), то саме тут це окупається.

Беріть темно-сірий, а не чистий чорний

Це найпоширеніша помилка, і варто зрозуміти чому чистий чорний не працює, а не просто почути «уникайте його».

Чистий чорний (#000000) у парі з чистим білим (#FFFFFF) текстом технічно набирає 21:1 — максимально можливе контрастне співвідношення. Здавалося б, максимальний контраст — це і є мета. Це не так. Цей надмірний розрив за яскравістю спричиняє гало-ефект: на темному фоні зіниця розширюється, щоб впустити більше світла, і світлий текст розпливається й розмазується по краях. Для людей з астигматизмом — а це чимала частина населення — ефект перетворює абзаци на світну, втомливу кашу. Тривале читання стає по-справжньому некомфортним.

Є й друга, практичніша проблема. Якщо ваш базовий шар — #000000, вам нема куди йти вниз. Ви не зробите поверхню темнішою за чорний, тож будь-яке відчуття заглибленої глибини зникає, а тіням нема на що падати.

Рішення — починати з дуже темно-сірого. Material Design від Google рекомендує #121212 як базову темну поверхню, і після років роботи з цим я вважаю, що це майже ідеал. Він достатньо темний, щоб читатися як «темна тема», але лишає запас в обох напрямках. Для тексту відмовтеся від чистого білого на користь приглушено-білого в діапазоні #E0E0E0 — #F2F2F2. Білий на #121212 на такому рівні все одно комфортно бере планку WCAG, водночас убиваючи світіння гало-ефекту.

Нейтральна стартова палітра, до якої я часто звертаюся:

• Базовий фон: #121212
• Основний текст: #E6E6E6 (високий акцент)
• Вторинний текст: #A8A8A8 (середній акцент, усе ще впевнено вище 4.5:1)
• Неактивний / підказковий текст: близько #6E6E6E

Один тонкий прийом: ледь-ледь тонуйте свої темно-сірі в бік фірмового відтінку замість чистих нейтральних сірих. База #131316 з краплею синього або #14110F з ноткою теплоти відчувається навмисною та брендованою, а не як стандартна тема за замовчуванням. Тримайтеся стримано — щонайбільше кілька пунктів насиченості.

Передавайте глибину світлішими поверхнями, а не тінями

У світлій темі картка ширяє над сторінкою завдяки своїй тіні. У темній темі тіні майже непомітні, тож ми перевертаємо логіку: що вище розташована поверхня, то світліша вона стає. Модальне вікно світліше за картку, яку воно перекриває, а та світліша за сторінку позаду.

Material формалізує це як накладку рівня — напівпрозорий білий шар, накладений поверх базової поверхні, який стає щільнішим зі зростанням рівня (приблизно від 0% на базі до близько 16% на найвищому рівні). Вам не обов'язково реалізовувати буквальну математику накладки; можна просто «запекти» результати в дискретні токени. Шкала, яку я випускав і якій довіряю:

• Рівень 0 (сторінка): #121212
• Рівень 1 (картки): #1E1E1E
• Рівень 2 (меню, підняті панелі): #242424
• Рівень 3 (діалоги, модальні вікна): #2C2C2C
• Рівень 4 (попапи, верхні шити): #333333

Кожен крок лише на жменьку пунктів світліший, і ця стриманість важлива — переходи мають відчуватися, а не оголошуватися. Застосована послідовно, вона дає інтерфейсу справжню глибину без жодної тіні й розв'язує скаргу «усе зливається докупи», яка псувала мою першу спробу. Ви все ще можете накласти зверху ледь помітну тінь для додаткового відокремлення, але саме зсув яскравості робить основну роботу.

Приглушуйте акцентні кольори

Візьміть героїчний колір вашого бренду — скажімо, насичений SaaS-синій на кшталт #2563EB — і киньте його на фон #121212. Він вібрує. Високонасичені кольори на темному полі породжують оптичне дзижчання, і вони часто провалюють контраст для тексту чи іконок, навіть якщо виглядають гучно.

Рішення контрінтуїтивне: тягніть насиченість вниз, а яскравість — угору. Настанова Material — використовувати світліші відтінки (думайте про діапазон 200–50 колірної шкали) і приглушувати їх, доки вони не пройдуть 4.5:1 на темній поверхні. На практиці я приглушую фірмові кольори приблизно на 20–40% для темної теми й освітлюю їх, а потім перевіряю число.

Конкретно, той #2563EB може стати чимось на кшталт #7AA2F7 у темній темі — м'якшим, світлішим і значно читабельнішим на темній поверхні. Ваш світлий акцент і ваш темний акцент — родичі, а не одне й те саме значення. Це саме той вид парного дослідження світлого/темного, для якого створено генератор колірних палітр: оберіть відтінок, а потім підкручуйте насиченість і яскравість, спостерігаючи, як число контрасту оновлюється наживо.

Кілька чесних застережень:

• Тримайте семантичні кольори впізнаваними. Червоний помилки, зелений успіху й бурштиновий попередження все одно мають читатися як червоний, зелений і бурштиновий після того, як ви їх приглушите. Освітлюйте й пом'якшуйте, але не зсувайте відтінок настільки далеко, щоб помилка перестала виглядати як небезпека.
• Великі колірні заливки відрізняються від тексту. Великий насичений героїчний банер витримає більше насиченості, ніж дрібна підпис-мітка, бо ви не просите нікого читати з нього дрібний текст.
• Не застосовуйте накладки рівня до кольорових поверхонь. Кнопка фірмового кольору зберігає свій колір на всіх рівнях; світлішають із підняттям лише ваші нейтральні поверхні.

Тримайте контраст WCAG — в обох напрямках

Цільові показники доступності в темряві не змінюються. WCAG 2.1 вимагає 4.5:1 для звичайного основного тексту й 3:1 для великого тексту (а також для значущих елементів інтерфейсу та іконок). Змінюється те, що провали стають підступнішими.

Пастка, яку я бачу найчастіше, — текст сірого середнього тону, щось на кшталт #888888 на #121212, який виглядає елегантно й тихо провалюється для вторинного тексту. Завжди прораховуйте конкретні числа. Офіційне джерело — настанова WCAG щодо контрасту від W3C, і будь-який перевіряч контрасту (зокрема вбудований у наш генератор колірних палітр) дасть вам співвідношення за лічені секунди.

Дві речі, які варто знати під час тестування. По-перше, «більше контрасту завжди краще» в темній темі хибне — чистий білий максимізує число, але запускає той гало-ефект, який я описав, тож ви оптимізуєте під комфортну читабельність, а не під найвище можливе співвідношення. По-друге, наступне покоління стандарту, WCAG 3.0, замінює просте співвідношення на APCA (Advanced Perceptual Contrast Algorithm), який моделює, як око насправді сприймає темний і світлий текст, і значно краще опрацьовує полярність. Він усе ще в чернетці, тож сьогодні випускайте під WCAG 2.1, але якщо хочете підготуватися на майбутнє, прогоніть свою темну палітру через перевіряч APCA як перевірку на здоровий глузд — він помітно чесніший щодо темних фонів.

Тестуйте там, де люди справді ним користуються

Темна палітра може пройти кожну перевірку у Figma й усе одно провалитися в реальному житті. Змінна, яку я найбільше недооцінював на початку, — сам екран: OLED-панелі відображають #000000 як по-справжньому вимкнені пікселі з брутальним контрастом до підсвіченого тексту, тоді як дешевші LCD підіймають чорний і змивають ваші ретельно налаштовані кроки рівнів. Палітра, що виглядає нашарованою на вашому моніторі, може здаватися пласкою на чиємусь бюджетному ноутбуці.

Мій чек-лист тестування, здобутий важким шляхом:

• Подивіться на реальному OLED-телефоні за низької яскравості, уночі. Саме тут проявляються гало-ефект і перенасиченість. Якщо тут комфортно — комфортно всюди.
• Перевірте кроки рівнів на дешевому LCD. Якщо ваші картки зникають у фоні — кроки надто тонкі.
• Перемикайтеся між світлою й темною наживо. Різкі спалахи яскравості зазвичай означають, що ваша темна база надто світла, а світла база — надто сіра.
• Подивіться на нього із зображеннями й користувацьким контентом. Реальні фото, аватарки й вбудовані медіа лягають на ваші поверхні й можуть конфліктувати так, як чистий макет ніколи не покаже.
• Переконайтеся, що стани фокусу й рамки виживають. Тонкі рамки 1px, які визначали поля вводу у світлій темі, у темряві часто зникають і потребують світлішого значення.

Коротка версія

Якби довелося стиснути все до жменьки ходів: починайте з #121212, ніколи з #000000. Беріть приглушено-білий текст, а не чистий білий. Показуйте глибину, освітлюючи підняті поверхні, бо тіней тут майже не існує. Приглушуйте й освітлюйте акценти, доки вони не перестануть дзижчати й не почнуть проходити контраст. Тримайте планку 4.5:1 для основного тексту, але опирайтеся спокусі гнатися за максимумом. І тестуйте на реальному OLED-екрані в темній кімнаті, бо це те єдине середовище, яке ваші макети ніколи не зможуть змоделювати.

Зроблена правильно, темна тема — це не просто ввічлива опція для нічних сов, а спокійніша, зосередженіша версія вашого продукту. Просто треба ставитися до неї як до окремої дизайнерської задачі, якою вона насправді і є.