Тёмная тема уместна там, где продукт визуальный: у фотографов, event-агентств, дизайн-студий и премиальных B2B-услуг, где посетитель приходит смотреть портфолио. В нишах, которые продают через доверие и понятность - медицина, юридические услуги, клининг, ремонт, - тёмный фон чаще снижает конверсию, чем поднимает её.
Что тёмный фон меняет в восприятии страницы
За два года ко мне тёмную тему просят раз в месяц-полтора. Обычно причина одна: клиент увидел похожий лендинг у конкурента и решил, что это выглядит дороже. Отчасти это правда: тёмный фон убирает лишний визуальный шум, крупные фото и продукт на нём читаются контрастнее. Но это инструмент, а не украшение, и работает он не в любой нише.
Тёмная тема меняет три вещи одновременно: контраст текста, восприятие цвета фотографий и общую температуру страницы. Светлый лендинг воспринимается как офис с окнами, тёмный - как витрина вечернего города. Для одних ниш это плюс, для других создаёт неверное первое впечатление ещё до чтения заголовка.
В каких нишах уместна тёмная тема?
В моей практике тёмный фон почти всегда заходит в трёх типах бизнеса: фотографы и видеографы, event-агентства и премиальные B2B-услуги вроде дизайн-студий и архитектурных бюро. Общее у них одно: продукт визуальный, а не текстовый. Посетитель приходит смотреть портфолио, а не читать длинное описание услуги.
На тёмном фоне фотографии из портфолио выглядят как в печатном альбоме: границы кадра пропадают, взгляд не отвлекается на белую рамку вокруг снимка. Для лендинга фотографа это прямая выгода: на одном экране помещается больше кадров без ощущения простыни из картинок.
- барбершопы и премиальные интерьерные студии;
- IT-продукты и сервисы для айтишной аудитории;
- лендинги мероприятий и концертов.
Для архитектурного бюро я делал тёмный лендинг в 2025 году: на первом экране крупный рендер фасада, ниже портфолио объектов на тёмно-графитовом фоне. Клиент сравнивал заявки с прошлой светлой версией сайта два месяца - цена заявки не изменилась, но выросла доля заявок с адекватным бюджетом. Заказчики сами описывали ощущение от сайта как "дорого и по делу", хотя тексты почти не менялись.
В каких нишах тёмная тема мешает?
Медицина, стоматология, юридические услуги и финансы живут на доверии, а тёмный фон читается как что-то закрытое и нишевое, а не как поликлиника или бухгалтерия. Я делал тёмный вариант для стоматологии один раз, по прямому требованию заказчика, и после недели рекламы конверсия оказалась в 1,6 раза ниже светлой версии с той же структурой блоков. Заявок стало меньше не из-за дизайна как такового, а потому что часть аудитории 45+ считывала страницу как что-то несерьёзное.
То же самое с клинингом, ремонтом и бытовыми услугами: заказчик ищет ощущение чистоты и порядка, а тёмный фон работает против этого посыла ещё до того, как человек прочитал текст.
Если сомневаетесь, к какой группе относится ваша ниша, самый дешёвый способ проверить - показать оба варианта, тёмный и светлый, десяти реальным клиентам или подписчикам в соцсетях и спросить прямо, куда бы они обратились. Ответ обычно расходится с личным вкусом заказчика на удивление сильно.
Читаемость текста: контраст и размер
Белый текст на чёрном фоне физически читается тяжелее, чем чёрный на белом. Глаз быстрее устаёт от яркого текста на тёмном поле, особенно на длинных абзацах. Решение простое: не брать чистый белый #ffffff для основного текста, а использовать светло-серый в диапазоне #d0d0d8-#e0e0e8. Контраст остаётся достаточным для чтения, но глаз не бьёт яркостью.
Минимальный размер основного текста на тёмном фоне я держу не ниже 16px, межстрочный интервал не ниже 1,5. На светлом фоне те же 14px ещё читаются нормально, на тёмном уже утомляют. Подробнее о размерах и интервалах разобрано в статье Типография для лендинга.
Кнопка-призыв на тёмном фоне
Главная ошибка тёмных лендингов - кнопка того же тёмного оттенка, что и фон, только на пару тонов светлее. Она читается глазами дизайнера, который час смотрел на макет, и пропадает для человека, который зашёл на страницу впервые. Кнопка обязана быть контрастной по всем параметрам: яркости, насыщенности и, если это не мешает бренду, цветовому тону.
Рабочая связка, которую я использую чаще всего: тёмно-серый фон #1a1a1f, акцентный оранжевый или жёлтый для кнопки, светло-серый для текста. Соотношение яркости кнопки к фону должно быть не ниже 4,5 к 1 по стандарту WCAG AA, проверяется это бесплатным инструментом WebAIM Contrast Checker за пару секунд. Правила подбора текста и цвета кнопки разобраны отдельно в статье CTA-кнопка на лендинге.
Отдельная история - вторичные кнопки, вроде "Подробнее" рядом с основным призывом. На светлом фоне их часто делают контурными, только с обводкой без заливки. На тёмном фоне тонкая светлая обводка сливается с текстом вокруг неё, и кнопка теряется. Здесь лучше работает заливка на тон-два светлее фона плюс чёткая подпись, а не тонкая линия по краю.
Чистый чёрный или тёмно-серый
Чистый чёрный #000000 рядом с ярким акцентным цветом даёт эффект баннера, а не сайта: перепад слишком резкий, глаз считывает страницу как рекламу. На практике тёмно-серый в диапазоне #111318-#1c1e24 выглядит дороже чистого чёрного и меньше давит на глаза при долгом просмотре.
Есть и техническая причина: на OLED-экранах смартфонов чистый чёрный экономит заряд, но одновременно подчёркивает мелкие цветовые артефакты сжатия JPEG на фото. Слишком агрессивное сжатие ради скорости загрузки к тому же бьёт по LCP, если фото стоит на первом экране. Тёмно-серый фон эти артефакты маскирует лучше.
Фото и видео на тёмном фоне
Фотографии, снятые для светлого макета и без обработки под тёмную тему, на чёрном фоне выглядят блёкло: студийный белый фон кадра спорит с фоном страницы. Перед переносом в тёмный макет фото стоит слегка притемнить по краям или добавить лёгкую виньетку, чтобы кадр визуально сливался со страницей, а не выглядел вставленной вырезкой.
С видео та же логика: превью с ярким белым интерфейсом плеера будет светящейся дырой в макете. Подробнее о подборе и обработке визуала под формат страницы - в статье Фото и видео на лендинге.
Иконки достаются в наследство от старого светлого макета едва ли не чаще, чем фото. Чёрная линейная иконка на тёмном фоне попросту не видна, а перекрашивать набор иконок вручную по одной - долгая работа. Проще сразу закладывать в бюджет перегенерацию иконок под тёмную палитру или брать готовый набор, у которого есть версия под оба фона.
Тёмная тема не делает сайт дороже сама по себе. Она делает дороже то, что и так хорошо снято и хорошо написано, и обнажает то, что снято и написано слабо.
Мобильный экран и солнечный день
На мобильном тёмная тема ведёт себя иначе, чем на десктопе. При ярком солнце экран смартфона отражает свет, а тёмный фон превращается в зеркало: контраст текста падает, читать страницу на улице становится тяжелее, чем светлую версию. Это не теория, а частая жалоба в переписке с клиентами: на телефоне на улице ничего не видно.
Если основной трафик идёт с мобильных объявлений, которые открывают на улице - доставка еды, курьерские услуги, локальный сервис, - тёмная тема добавляет риск именно там, где решается конверсия за первые три секунды.
Проверить это несложно: выкрутить яркость экрана на минимум, выйти на улицу в солнечный день и попробовать прочитать страницу с телефона в руке. Если текст читается с трудом даже вам, при известном содержании страницы, случайный посетитель бросит попытку раньше.
Ошибки, которые встречаю чаще всего
| Ошибка | Почему мешает | Как исправить |
|---|---|---|
| Белый текст #ffffff на чёрном фоне | Глаз устаёт на длинных абзацах | Светло-серый #d8d8e0, не чистый белый |
| Кнопка на тон светлее фона | Не видна на первом экране | Контраст 4,5:1 и акцентный цвет |
| Фото без обработки под фон | Белые рамки спорят с макетом | Лёгкая виньетка по краям кадра |
| Тёмная тема в нише доверия | Читается как закрытый или несерьёзный сайт | Светлая версия или тёмный только один блок |
| Нет проверки на солнце | Провал конверсии по мобильному трафику с улицы | Тест на реальном экране при ярком свете |
Частые вопросы
Можно ли сделать тёмным только часть лендинга, а не всю страницу?
Да, и часто это лучшее решение: например, блок с портфолио или ценами делают тёмным, а первый экран и форму оставляют светлыми. Так получают эффект контраста без риска потерять аудиторию, которая ищет понятный и надёжный сайт с первого взгляда.
Почему кнопка на тёмном лендинге теряется, хотя на макете она была заметна?
Дизайнер долго смотрит на макет и привыкает к слабому контрасту, а посетитель видит страницу впервые и не находит кнопку взглядом. Спасает проверка контраста инструментом, а не собственным восприятием на глаз.
Нужно ли по-разному обрабатывать фотографии для светлой и тёмной версии лендинга?
Да. Фото, снятые под белый фон, на чёрном выглядят как вставленная вырезка. Перед переносом в тёмный макет их слегка притемняют по краям или добавляют лёгкую виньетку, чтобы кадр визуально слился со страницей.
Как проверить, что тёмная версия лендинга не роняет конверсию?
Запустите обе версии по очереди на одинаковом объёме трафика и сравните конверсию по цели в Метрике за одинаковый период. Также можно быстро спросить мнение будущей аудитории напрямую, показав оба варианта десяти реальным клиентам.
Коротко
Тёмная тема - решение для ниши, а не эстетический выбор по вкусу заказчика. Она работает там, где продукт визуальный и аудитория воспринимает тёмный фон как признак премиальности: портфолио, мероприятия, дизайн, часть IT. В нишах, которые продают через доверие и понятность - медицина, юридические услуги, бытовые услуги, - тёмный фон чаще снижает конверсию, чем поднимает.
Если сомневаетесь, сделайте тёмным один блок, а не всю страницу: например, портфолио или блок с ценами, а первый экран и форму оставьте светлыми. Так получаете эффект контраста без риска потерять аудиторию, которая ищет понятный и надёжный сайт с первого взгляда.
