Цвет и контраст в интерфейсе: палитра и тёмная тема

Почему макет новичка похож на ярмарку

Знаешь, в чём подвох? Хочется засунуть в макет все любимые цвета сразу. Синяя кнопка. Зелёный заголовок. Красная плашка. Фиолетовый фон. И всё орёт одновременно. Глазу не за что зацепиться - когда кричат все, не слышно никого.

Хороший вкус в цвете - это вовсе не «знать сто красивых оттенков». Это умение себя ограничить. Представь группу на сцене: один солист, остальные на подпевке. Запоют все солистами - получится базар. С цветом ровно та же история: один-два акцента-солиста и куча скромных нейтральных на фоне. Вот и весь секрет дорогой палитры.

Что даёт грамотная работа с цветом

Цвет бьёт по глазам первым - ещё до того, как человек прочитал хоть слово. За доли секунды он решает: дорого это или дёшево, спокойно или тревожно. И если ты вайбкодишь интерфейс или собираешь лендинг, цвет либо работает на тебя, либо против тебя - середины тут нет.

• Перестанешь делать «попугайские» макеты, где десять цветов дерутся за внимание.
• Поймёшь, почему твой текст тяжело читать - и починишь это одним правилом.
• Соберёшь тёмную тему, от которой глаза не устают через пять минут.
• Сможешь давать вайбкод-ассистенту Вайбкодинг - сборка приложений и сайтов в связке с ИИ, когда ты описываешь словами, а нейросеть пишет код. Тут особенно важно уметь словами задать палитру, иначе модель навалит дефолтных ярких цветов. внятные команды по цвету, а не «сделай красиво».

Девять из десяти «некрасивых» интерфейсов - это не плохой цвет, а слишком много цветов и слабый контраст. Лечится ограничением, а не добавлением.

Как собрать палитру сайта: солист и хор

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

Нейтральные занимают почти весь экран

Нейтральные - это даже не цвет. Это воздух. Серые разной светлоты, почти-белый для фона, почти-чёрный для текста. Их много, и они незаметны - в этом-то весь смысл. Они держат сцену, чтобы акценту было где блеснуть. На реальном экране нейтральные обычно занимают большую часть площади, а ярких цветов остаётся совсем чуть.

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

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

Контраст и читаемость текста: правило 4.5 к 1

Контраст Контраст - разница в яркости между двумя цветами, например текстом и фоном. Измеряется отношением: чем больше число, тем сильнее текст отделяется от фона и легче читается. - это про яркость, а не про то, «насколько разные цвета». Жёлтый и белый - совсем разные цвета, а яркость у них почти одинаковая, поэтому жёлтый текст на белом не читается вообще. Зато чёрный на белом читается идеально, хотя это, строго говоря, и не цвета.

Есть проверенный ориентир из стандарта доступности WCAG. Его держат в голове все нормальные дизайнеры:

• Обычный текст к фону - минимум 4,5 к 1.
• Крупный текст (большой заголовок, жирный) - можно мягче, 3 к 1.
• Иконки и важные элементы интерфейса - тоже около 3 к 1.

Считать в уме не придётся. Есть куча бесплатных чекеров контраста: вставляешь два цвета - видишь число. Но и без них работает простой тест на глаз, о нём ниже.

Прищурься и посмотри на текст издалека. Буквы расплываются в кашу - контраста мало.
Сделай скриншот и переведи в чёрно-белое. Текст пропал или еле виден - значит, цвет тащил всё на себе, а яркости нет.
Сравни с чёрным текстом на белом - это эталон. Твой вариант должен быть близко по чёткости, а не заметно слабее.
Посмотри на телефоне при дневном свете на улице. Выживает - значит, всё в порядке.

Тёмная тема: фон - не чёрный, а тёмно-серый

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

Профи делают иначе. Material Design (это система дизайна от Google) прямо советует брать за базовый фон тёмной темы очень тёмно-серый, не чёрный - около #121212. Сдвинь его чуть в тепло, в сторону коричневого или petrol, - и глазу станет ещё мягче.

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

Три правила тёмной темы

• Фон - тёплый тёмно-серый, не #000000. Чистый чёрный выглядит как дыра и усиливает вибрацию текста. Тёмно-серый мягче и оставляет место теням.
• Текст - не чисто белый. Бери светло-серый, слегка приглушённый. Идеальный белый на чёрном слепит. Второстепенный текст делай ещё тусклее - так появится иерархия.
• Акценты приглушай. Тот яркий цвет, что круто смотрелся на светлом фоне, на тёмном будет резать. Сделай его менее насыщенным и чуть светлее - чтобы он всё ещё проходил по контрасту, но не орал.

Частые ошибки в цвете и контрасте

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