Колір і контраст в інтерфейсі: палітра та темна тема

Чому макет новачка схожий на ярмарок

Знаєш, у чому пастка? Хочеться запхати в макет усі улюблені кольори одразу. Синя кнопка. Зелений заголовок. Червона плашка. Фіолетовий фон. І все горлає одночасно. Оку немає за що зачепитися - коли кричать усі, не чути нікого.

Хороший смак у кольорі - це зовсім не «знати сто красивих відтінків». Це вміння себе обмежити. Уяви гурт на сцені: один соліст, решта на підспівці. Заспівають усі солістами - вийде базар. З кольором та сама історія: один-два акценти-солісти і купа скромних нейтральних на фоні. Ось і весь секрет дорогої палітри.

Що дає грамотна робота з кольором

Колір бʼє по очах першим - ще до того, як людина прочитала бодай слово. За частки секунди він вирішує: дорого це чи дешево, спокійно чи тривожно. І якщо ти вайбкодиш інтерфейс або збираєш лендинг, колір або працює на тебе, або проти тебе - середини тут немає.

• Перестанеш робити «папужисті» макети, де десять кольорів бʼються за увагу.
• Зрозумієш, чому твій текст важко читати - і полагодиш це одним правилом.
• Збереш темну тему, від якої очі не втомлюються за пʼять хвилин.
• Зможеш давати вайбкод-асистенту Вайбкодинг - збірка застосунків і сайтів у звʼязці зі ШІ, коли ти описуєш словами, а нейромережа пише код. Тут особливо важливо вміти словами задати палітру, інакше модель навалить дефолтних яскравих кольорів. зрозумілі команди щодо кольору, а не «зроби красиво».

Девʼять із десяти «негарних» інтерфейсів - це не поганий колір, а забагато кольорів і слабкий контраст. Лікується обмеженням, а не додаванням.

Як зібрати палітру сайту: соліст і хор

Не обирай кольори по одному, «який подобається». Обирай ролі - а вже під кожну роль підбирай відтінок. Підхід змінюється повністю.

Нейтральні займають майже весь екран

Нейтральні - це навіть не колір. Це повітря. Сірі різної світлоти, майже-білий для фону, майже-чорний для тексту. Їх багато, і вони непомітні - у цьому весь сенс. Вони тримають сцену, щоб акценту було де блиснути. На реальному екрані нейтральні зазвичай займають більшу частину площі, а яскравих кольорів лишається зовсім трішки.

Скільки акцентних кольорів брати

Акцент - це твій фірмовий колір. Кнопка «купити», активне посилання, важлива цифра. Одного основного акценту вже з головою. Другий можна додати як контрапункт - скажімо, теплий до холодного. А от третій майже завжди зайвий: він не підсилює перший, а відбирає в нього увагу. Жадібничати тут невигідно.

Контраст і читабельність тексту: правило 4.5 до 1

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

Є перевірений орієнтир зі стандарту доступності WCAG. Його тримають у голові всі нормальні дизайнери:

• Звичайний текст до фону - мінімум 4.5 до 1.
• Великий текст (великий заголовок, жирний) - можна мʼякше, 3 до 1.
• Іконки та важливі елементи інтерфейсу - теж близько 3 до 1.

Рахувати в умі не доведеться. Є купа безкоштовних чекерів контрасту: вставляєш два кольори - бачиш число. Але й без них працює простий тест на око, про нього нижче.

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

Темна тема: фон - не чорний, а темно-сірий

Найчастіша помилка новачка в темній темі - залити фон у чистий чорний і кинути зверху яскраво-білий текст. Логіка наче залізна: максимальний контраст же. А насправді виходить різка для ока вібрація - білі літери ніби гудуть на чорному, і читати довго неможливо.

Профі роблять інакше. Material Design (це система дизайну від Google) прямо радить брати за базовий фон темної теми дуже темно-сірий, не чорний - близько #121212. Зсунь його трохи в тепло, у бік коричневого або petrol, - і оку стане ще мʼякше.

Темна тема Темна тема (dark mode) - варіант інтерфейсу зі світлим текстом на темному фоні. Хороша темна тема використовує не чистий чорний, а темно-сірий, і приглушені акценти замість яскравих. живе за своїми правилами, і вони дзеркальні до світлої.

Три правила темної теми

• Фон - теплий темно-сірий, не #000000. Чистий чорний виглядає як діра і підсилює вібрацію тексту. Темно-сірий мʼякший і лишає місце тіням.
• Текст - не чисто білий. Бери світло-сірий, злегка приглушений. Ідеальний білий на чорному сліпить. Другорядний текст роби ще тьмянішим - так зʼявиться ієрархія.
• Акценти приглушуй. Той яскравий колір, що круто виглядав на світлому фоні, на темному ріже. Зроби його менш насиченим і трохи світлішим - щоб він усе ще проходив за контрастом, але не горлав.

Часті помилки в кольорі та контрасті

• Кольорів як у коробці фломастерів. Пʼять акцентів - значить жодного. Лиши один-два, решта - нейтральні.
• Слабкий контраст заради естетики. Світло-сірий текст на білому виглядає «повітряно», але не читається. Красиво й нечитабельно - це просто нечитабельно.
• Сенс одним кольором. Показувати «помилка/успіх» лише кольором - значить втратити частину людей. Дублюй текстом або значком.
• Чистий чорний у темній темі. #000000 з білим текстом гуде. Бери теплий темно-сірий і приглушений текст.
• Яскраві акценти на темному фоні. Насичений колір, що блищав на світлому, на темному ріже. Приглушуй і трохи освітлюй.
• Теплі й холодні акценти впереміш без причини. Теплий і холодний можуть сперечатися один з одним. Не впевнений - тримайся однієї температурної родини.