Дизайн 8 минут
Тёмный сайт: как не превратить его в чёрный прямоугольник
Тёмная страница выглядит дорого ровно до тех пор, пока в ней есть свет. Убери источники — и остаётся чёрный прямоугольник, на котором ничего не разобрать. Разбираем, где именно это ломается.
Главная ошибка: чёрное на чёрном
Полированная поверхность отражает то, что вокруг неё. Если вокруг ничего нет, зеркало показывает пустоту и выглядит матовым куском пластика.
Ровно то же происходит с интерфейсом. Тёмная страница без источников света — это набор невидимых прямоугольников. Глубина в ней возникает не от цвета фона, а от того, чем этот фон освещён: градиентами, бликами на краях, свечением активных элементов.
Приём первый: свет должен быть направленным
Равномерная заливка тёмным читается как выключенный экран. Работает мягкое световое пятно, смещённое от центра: оно задаёт направление и делает плоскость объёмной.
Правило простое: один источник главный, остальные подчинённые. Два равных по силе света взаимно уничтожают форму.
Приём второй: контровой свет
Тёмный объект на тёмном фоне сливается с ним. Отделяет его тонкая светлая кромка по краю — свет, поставленный позади. В вебе это делается либо настоящим освещением в сцене, либо просто светлой границей в один пиксель.
Если элемент не читается, чаще нужен не более светлый фон, а более светлый край.
Приём третий: текст поверх картинки
Самая частая поломка тёмных страниц. Светлый текст лежит поверх изображения, и в какой-то момент под букву попадает яркое пятно — буква исчезает.
Мы замеряли это на живой сцене: самый светлый пиксель под заголовком имел яркость 0,97 при почти белом тексте. Контраст в этой точке падал до единицы, то есть до полной нечитаемости.
Решение — подслой: мягкое затемняющее пятно под текстовым блоком, без видимой границы. Оно гасит фон только там, где буквы. После него контраст в той же точке стал 14,7 к 1 при строгой норме доступности в 7 к 1.
| Точка под заголовком | Яркость фона | Контраст |
|---|---|---|
| Без подслоя | 0,97 | ≈ 1 : 1 |
| С подслоем | 0,10 | 14,7 : 1 |
Приём четвёртый: сдержанный акцент
На тёмном фоне любой насыщенный цвет кричит вдвое громче, чем на светлом. Поэтому акцента должно быть мало: тонкая линия, кромка, подпись. Заливка акцентным цветом больших площадей мгновенно удешевляет страницу.
Тёплый акцент на холодном тёмном фоне работает надёжнее холодного: он читается как источник света, а не как краска.
Приём пятый: не бояться пустоты
Тёмная страница выдерживает гораздо больше пустого места, чем светлая. Там, где на белом фоне пауза выглядит недоделкой, на тёмном она читается как воздух вокруг предмета в витрине.
Короткий чек-лист
- Есть ли на странице направленный свет или это ровная заливка?
- Отделяются ли тёмные элементы от фона кромкой?
- Что происходит с текстом в самом светлом месте подложки?
- Сколько площади занимает акцентный цвет? Если больше пяти процентов — много.
- Проверена ли страница на светлом мониторе при дневном свете, а не только в тёмной комнате?