Коротко
- Тёмный фон — инструмент настроения. Он подходит, когда продукт хорошо смотрится на тёмном и аудитория ждёт премиального или «ночного» образа.
- Для длинных текстов, сложных таблиц и аудитории старшего возраста светлая тема обычно удобнее.
- Основной текст должен иметь контраст с фоном не ниже 4,5:1, крупный текст и элементы интерфейса — не ниже 3:1.
- Лучший фон — тёмно-серый или тёмно-синий, текст — белый или слегка приглушённый. Чисто чёрный фон с чисто белым текстом утомляет глаза.
- Переключатель темы нужен, если сайт читают долго и в разное время. Лендингу чаще хватает одной продуманной темы.
Что такое тёмная тема и чем она отличается от тёмного дизайна
Под «тёмной темой» понимают две разные вещи.
Тёмный дизайн сайта. Сайт изначально сделан на тёмном фоне. Это решение по бренду и стилю, другой версии у него нет.
Тёмный режим. У сайта есть светлая и тёмная версии, и посетитель переключается между ними кнопкой или сайт сам подстраивается под настройки устройства. В CSS для этого есть медиазапрос prefers-color-scheme, который сообщает, какую тему выбрал человек в системе: он описан в документации MDN и поддерживается современными браузерами.
Для малого бизнеса чаще актуален первый вариант: решить, будет ли сайт тёмным или светлым. Второй нужен сервисам, блогам, личным кабинетам и сайтам, где человек проводит много времени.
Кому подходит тёмная тема сайта
| Ниша | Подходит ли | Почему |
|---|---|---|
| Рестораны, бары, кальянные | Да | Атмосфера вечера, фото блюд и интерьера выигрывают на тёмном |
| Премиальные услуги: ремонт под ключ, мебель на заказ, ювелирка | Часто да | Тёмный фон подчёркивает дорогие материалы и фото |
| IT, разработка, кибербезопасность | Да | Привычная эстетика для аудитории |
| Фото- и видеопродакшн, музыканты | Да | Работы выглядят как в кино или на экране монтажа |
| Тюнинг, детейлинг, мотосервис | Часто да | Глянец, свет фар и блики лучше читаются на тёмном |
| Мероприятия, концерты, клубы | Да | Ассоциация с вечером и сценой |
| Медицина, стоматология | Осторожно | Тёмное может читаться как тревожное; чаще выбирают светлые чистые цвета |
| Детские центры, клининг, бытовые услуги | Обычно нет | Аудитория ждёт лёгкости, чистоты и дружелюбия |
| Юристы, бухгалтерия, B2B со сложными тарифами | Осторожно | Много текста и таблиц; светлое удобнее читать |
| Интернет-магазины с большим каталогом | Редко | Фото товаров на белом привычнее, фильтры и таблицы читаются легче |
Главный вопрос — как выглядит ваш продукт. Если на фото преобладают тёмные интерьеры, металл, вечерний свет, тёмный фон их усилит. Если продукт светлый и «чистый», тёмный фон будет спорить с ним.
Второй вопрос — сколько на сайте текста. Длинные статьи и подробные описания на светлом фоне читать проще большинству людей, особенно днём и на ярком солнце. Если тёмный сайт содержит много текста, особенно важно соблюдать контраст и размер шрифта.
Плюсы и минусы тёмного дизайна
| Плюсы | Минусы |
|---|---|
| Выделяет сайт среди светлых конкурентов | Длинный текст читать сложнее, особенно людям с астигматизмом и слабым зрением |
| Фото и видео выглядят глубже и ярче | Плохие фото на тёмном фоне выглядят ещё хуже |
| Легко сделать акцент: яркая кнопка сразу видна | Ошибки контраста заметнее: серый текст на чёрном почти не читается |
| Ассоциируется с премиальностью и технологиями | В некоторых нишах вызывает тревогу или ощущение «тяжести» |
| Меньше слепит в темноте и вечером | На ярком солнце экран с тёмным фоном бликует сильнее |
На экранах OLED тёмные пиксели расходуют меньше энергии, но для посетителя сайта это скорее приятный бонус, чем довод в пользу тёмного дизайна.
Контраст и цвета: требования, которые нельзя нарушать
Если на тёмном сайте трудно читать текст, заявок будет меньше, каким бы красивым он ни был. Ориентир — требования доступности WCAG, по ним работают дизайнеры по всему миру. По критерию минимального контраста соотношение для обычного текста должно быть не ниже 4,5:1, а для крупного текста — не ниже 3:1. Для кнопок, полей ввода и иконок есть отдельный критерий: не ниже 3:1 с окружающим фоном.
Проверить контраст можно бесплатными онлайн-калькуляторами или прямо в инструментах разработчика браузера: выделите текст и посмотрите показатель контраста.
Палитра для тёмной темы
| Элемент | Что выбрать | Чего избегать |
|---|---|---|
| Фон | Тёмно-серый, графитовый, тёмно-синий | Чисто чёрный #000000: с белым текстом даёт резкий контраст и «вибрацию» букв |
| Карточки и блоки | На 1–2 тона светлее фона | Тот же цвет, что фон: блоки сливаются |
| Основной текст | Белый или слегка приглушённый светло-серый | Тёмно-серый: красиво в макете, не читается на телефоне |
| Второстепенный текст | Светло-серый с проверенным контрастом | Серый, который проходит только для крупного текста |
| Акцент и кнопка | Один яркий цвет бренда, немного приглушённый | Несколько ярких акцентов, неоновые цвета на весь экран |
| Ошибки и подсказки в формах | Красный и зелёный, осветлённые для тёмного фона | Насыщенный тёмно-красный, который сливается с фоном |
Хороший пример палитры — когда фон, карточки и кнопка различаются по яркости, а не только по оттенку. Проверьте макет в чёрно-белом режиме: если блоки и кнопка различимы без цвета, контраст выстроен правильно.
Подбор акцентного цвета под нишу мы разбирали в статье цветовая гамма для лендинга, а выбор шрифтов — в статье шрифты для сайта. На тёмном фоне тонкие начертания читаются хуже, поэтому основной текст лучше набирать нормальным или средним весом.
Как сделать тёмный сайт без потери заявок: пошагово
- Проверьте продукт. Разложите 10–15 лучших фото на тёмном и на светлом фоне. Где они выглядят сильнее, тот фон и берите.
- Соберите палитру из 4–5 цветов: фон, фон карточек, основной текст, второстепенный текст, акцент. Проверьте каждую пару по контрасту.
- Сделайте кнопку самым заметным элементом экрана. На тёмном фоне лучше всего работает светлая или яркая кнопка с тёмным текстом.
- Проверьте формы. Поля ввода должны быть видны до клика: светлая рамка или фон поля чуть светлее страницы. Подсказки в полях, ошибки и галочка согласия должны читаться.
- Подготовьте логотип и иконки в светлой версии. Логотип, сделанный под белый фон, на тёмном может пропасть.
- Проверьте фото. Картинки на белом фоне, вырезанные товары с белой подложкой и схемы будут выглядеть как белые прямоугольники. Их нужно переснять, вырезать на прозрачном фоне или поставить в светлые карточки.
- Протестируйте на телефоне на улице днём и в темноте на минимальной яркости. Это два худших сценария для тёмного сайта.
- Запустите и сравните. Если сайт уже работает, сравните заявки до и после или проведите A/B-тест. Как его настроить, мы описали в статье A/B-тест лендинга.
Если вы решаете, каким быть вашему сайту, проще один раз увидеть свой первый экран в двух вариантах, чем спорить об этом абстрактно.
Переключатель темы: нужен ли и как сделать
Переключатель светлой и тёмной темы полезен, когда:
- на сайте много текста: блог, база знаний, документация;
- человек проводит на сайте много времени: личный кабинет, сервис, онлайн-обучение;
- аудитория заходит в разное время суток, в том числе поздно вечером.
Для лендинга услуги или небольшого сайта компании переключатель обычно не нужен. Посетитель проводит на нём пару минут, и ему важнее найти цену и кнопку, чем выбрать тему. Две темы — это двойная работа: каждый блок, фото и состояние формы нужно проверить дважды.
Если переключатель всё же нужен, вот как это обычно устроено:
- Цвета сайта задаются переменными: фон, текст, акцент. Тёмная тема переопределяет значения переменных, а не перекрашивает каждый элемент вручную.
- По умолчанию сайт берёт тему из настроек устройства через
prefers-color-scheme. - Кнопка переключения меняет тему и запоминает выбор человека, чтобы при следующем визите не сбрасывать его.
- Для элементов, которые по-разному выглядят в двух темах (логотип, схемы, иллюстрации), готовятся две версии.
- Свойство
color-schemeподсказывает браузеру, какие цвета использовать для полос прокрутки и стандартных полей формы.
На конструкторах вроде Тильды тёмный сайт собирается из блоков с тёмным фоном без кода. Переключатель тем обычно требует собственного кода, поэтому заранее решите, стоит ли он затрат на вашем сайте. Подробнее о том, что можно и что нельзя сделать в конструкторе, мы писали в статье дизайн лендинга.
Частые ошибки тёмного дизайна
| Ошибка | Что видит посетитель | Как исправить |
|---|---|---|
| Серый текст на чёрном фоне | Текст сливается, особенно на телефоне | Проверять контраст, основной текст не темнее светло-серого |
| Тонкий шрифт мелким кеглем | Буквы «рассыпаются» | Нормальный вес, кегль основного текста от 16 px |
| Поля формы без рамки | Непонятно, куда вводить телефон | Видимая рамка или светлый фон поля |
| Белые фото и схемы | Яркие прямоугольники режут глаз | Прозрачный фон, светлые карточки, пересъёмка |
| Неоновые акценты повсюду | Глаза устают, непонятно, что главное | Один акцент — на кнопке и ключевых цифрах |
| Логотип под белый фон | Логотип пропадает в шапке | Светлая версия логотипа |
| Длинные тексты мелким шрифтом | Человек не дочитывает | Короче абзацы, больше межстрочный интервал |
| Тёмная тема ради моды | Сайт не совпадает с продуктом и аудиторией | Начинать с вопроса, как выглядит продукт |
Ещё одна ошибка — забыть про доступность. Людям со слабым зрением тёмные сайты с низким контрастом читать особенно тяжело. Если сайт должен быть доступным для всех, подумайте о версии для слабовидящих и о проверке контраста по WCAG.
Тёмный или светлый: как решить за 10 минут
Ответьте на пять вопросов. Если больше трёх ответов «да», тёмный дизайн, скорее всего, подойдёт.
- Ваш продукт хорошо выглядит на тёмных фото: интерьер, металл, свет, еда вечером, техника?
- Ваша аудитория ценит атмосферу и стиль больше, чем подробные таблицы?
- На сайте немного текста, основная работа — фото, видео и короткие блоки?
- Ваши конкуренты почти все на светлом фоне, и вам нужно выделиться?
- У вас есть качественные фото или бюджет на съёмку?
Если вы ответили «нет» на третий и пятый вопрос, лучше остаться на светлом фоне и сделать акцент через цвет кнопок и типографику.
Условный пример
Пример условный, не кейс студии. Студия мебели на заказ в Казани делает кухни из шпона и тёмного камня. Фото кухонь сняты вечером, с подсветкой. На белом фоне сайт выглядит как каталог фабрики, на графитовом — как журнал об интерьерах. Тёмный дизайн с белым текстом, светлой кнопкой «Рассчитать кухню» и формой в светлой карточке здесь логичен. Прайс и сравнение материалов можно вынести в отдельный светлый блок, чтобы таблицы читались легко.
Если хотите обсудить свой сайт и посмотреть, как он будет выглядеть на тёмном и на светлом фоне, оставьте контакты.
Частые вопросы
Тёмная тема сайта снижает конверсию?
Сам по себе тёмный фон конверсию не снижает и не повышает. Её снижают ошибки, которые на тёмном фоне встречаются чаще: низкий контраст текста, незаметные поля формы, белые фото. Если сделать сайт по правилам контраста и проверить формы, решающими станут предложение, цена и первый экран.
Какой цвет фона лучше для тёмного сайта?
Тёмно-серый, графитовый или тёмно-синий. Чисто чёрный фон с белым текстом даёт слишком резкий контраст, буквы начинают «дрожать» при чтении. Карточки и блоки делают на один-два тона светлее основного фона.
Нужна ли сайту тёмная тема, если у телефона включён тёмный режим?
Не обязательно. Системный тёмный режим не перекрашивает сайты автоматически, если сайт этого не поддерживает. Переключатель стоит делать для сайтов, где люди проводят много времени: блоги, сервисы, личные кабинеты.
Какой контраст текста нужен на тёмном фоне?
По рекомендациям WCAG — не ниже 4,5:1 для обычного текста и не ниже 3:1 для крупного текста, кнопок и полей ввода. Проверить можно в бесплатных калькуляторах контраста или в инструментах разработчика браузера.
Можно ли сделать тёмный сайт на Тильде?
Да, тёмный дизайн собирается из стандартных блоков: у них настраивается цвет фона и текста. Переключатель между светлой и тёмной темой потребует собственного кода, поэтому для небольшого сайта обычно выбирают одну тему.
10+ лет делаю сайты и запускаю рекламу, вместе с командой запустили больше 500 проектов. Пишу о том, что проверили на практике.
Задать вопрос в Telegram →
