Содержание
Что говорит наука: итоги исследований
Когда в 2019 году Apple и Google одновременно объявили о нативной поддержке тёмного режима в своих операционных системах, это было воспринято как бесспорное благо для здоровья пользователей. Реальность, как обычно, сложнее.
Исследование Университета Миссури (2022) с участием 241 человека показало: при нормальном уровне освещения скорость и точность чтения выше в светлом интерфейсе. Тёмный режим давал преимущество только при крайне низкой освещённости окружающей среды. При этом субъективное предпочтение участников — что комфортнее — не коррелировало с объективными результатами чтения.
Другое исследование, опубликованное в журнале Ergonomics (2023), изучало влияние на астигматиков: для людей с астигматизмом светлые буквы на тёмном фоне создают более выраженный эффект ореола (halation), снижающий резкость воспринимаемого текста. Оценочно, 30–40% взрослого населения США имеет ту или иную степень астигматизма.
Ключевой факт: Meta-анализ 17 независимых исследований (2024) не выявил статистически значимой разницы в утомляемости глаз между светлым и тёмным режимами при соблюдении одинаковых условий контраста. Основным фактором оказалась яркость экрана, а не полярность фона.
Физиология: зрачок, сетчатка и рассеянный свет
Главный физиологический аргумент в пользу светлого режима — размер зрачка. При чтении тёмного текста на светлом фоне зрачок сужается, что увеличивает глубину резкости и снижает аберрации оптики глаза. При тёмном фоне зрачок расширяется — аберрации возрастают, и текст воспринимается менее чётко, особенно при астигматизме.
Эффект halation (ореол вокруг светлых элементов на тёмном фоне) — реальный оптический феномен, вызванный рассеянием света в стекловидном теле. Он особенно заметен при тонких шрифтах и высококонтрастных сочетаниях, таких как чисто белый текст на чёрном фоне.
Именно поэтому профессиональные дизайнеры тёмных интерфейсов, как правило, избегают чисто белого цвета (#ffffff) на чисто чёрном (#000000): соотношение яркостей 21:1 слишком велико. Распространённое решение — использовать оттенки вроде #e8e8e8 на #121212, что даёт 16.5:1 и ощущается более комфортно.
Кому полезна тёмная тема
Несмотря на то что универсальное превосходство тёмного режима не подтверждено, он реально полезен для определённых групп пользователей и сценариев:
- Фоточувствительная мигрень: Для людей с светочувствительностью яркие белые фоны могут быть триггером. Тёмный интерфейс снижает общую интенсивность светового потока с экрана.
- Ночное использование: В тёмной комнате яркий экран вызывает адаптацию зрачка, делая окружающую среду «ещё темнее». Тёмный режим снижает этот контраст между экраном и средой.
- Работа с кодом и профессиональным ПО: Традиция тёмных тем в IDE (integrated development environments) имеет десятилетнюю историю. Многие разработчики и дизайнеры отмечают меньшее утомление при длинных рабочих сессиях.
- OLED-экраны: На дисплеях с органическими светодиодами тёмный режим буквально означает выключение пикселей. Это даёт реальный выигрыш в автономности устройства.
Выбор между тёмным и светлым режимом — это не вопрос правильного или неправильного ответа. Это вопрос контекста использования и аудитории.
Лучший подход — предоставить пользователю выбор и реализовать оба режима с одинаковым уровнем качества.
Правила дизайна для тёмного режима
Тёмный режим — это не инвертирование цветовой схемы. Это отдельная дизайн-система, требующая собственной логики принятия решений.
Правило 1: Избегайте чисто белого текста на чисто чёрном фоне
Максимальный контраст 21:1 — не цель, а проблема. Используйте #e2e8f0 или #f1f5f9 на #0f172a — это даёт 14–16:1 при значительно меньшем эффекте ореола.
Правило 2: Поверхности должны светлеть с иерархией, а не темнеть
В светлых темах более высокий элемент иерархии обычно светлее. В тёмных темах логика инвертируется: основной фон самый тёмный, карточки чуть светлее, модальные окна ещё светлее. Это создаёт ощущение глубины и помогает пользователю ориентироваться.
Правило 3: Насыщенность акцентных цветов требует пересмотра
Яркий акцентный синий, отлично работающий на белом (#3b82f6, контраст 3:1 — нормально для крупных элементов), на тёмном фоне может стать слишком агрессивным. Для тёмных тем акцентные цвета нередко нужно сдвигать в сторону более мягких, «пастельных» для восприятия вариантов с сохранением контраста.
Правило 4: Тени и эффекты нуждаются в пересчёте
В светлых темах тени работают через затемнение. В тёмных темах — через осветление или подсветку краёв (highlight). Буквальное копирование box-shadow из светлой темы в тёмную уничтожает ощущение глубины.
"Тёмный режим — это не про ночь и не про батарею. Это про выбор пользователя. И профессиональный долг дизайнера — реализовать этот выбор так же хорошо, как светлую тему."
— Оливия Кросс, редакционный дизайнерТипографика в тёмном режиме
Светлый текст на тёмном фоне требует корректировки типографических параметров относительно тёмного текста на светлом фоне:
- Толщина шрифта: Тонкие шрифты (weight 300–400) «размываются» на тёмном фоне из-за ореольного эффекта. Для тёмных тем рекомендуется увеличить вес на одну-две ступени.
- Межбуквенный интервал: Небольшое увеличение letter-spacing (0.01–0.02em) улучшает разборчивость светлого текста на тёмном фоне.
- Размер шрифта: Минимальный порог в 16px ещё более актуален для тёмных тем — шрифт воспринимается чуть меньше при светлом тексте на тёмном фоне.
Системная реализация
С точки зрения реализации лучшая практика — использование CSS custom properties (переменных) с переключением через атрибут data-theme или медиазапрос prefers-color-scheme:
Ключевые принципы реализации: тема применяется на корневом элементе (:root или html), переменные охватывают все цветовые токены системы, пользовательское предпочтение сохраняется в localStorage, системный prefers-color-scheme используется как дефолт при первом визите.
Не менее важно тестирование: тёмная тема должна проходить те же проверки контрастности, что и светлая. Автоматические аудиторы вроде axe DevTools работают с тёмными темами корректно при условии, что цвета заданы через переменные, а не зашиты в инлайн-стили.
