Тёмный режим стал стандартом почти для каждого сайта и приложения — пользователям он нравится, он экономит заряд батареи на OLED-экранах, и иногда его даже считают «более доступным». Но переход на темную цветовую палитру, если он сделан без тщательного обдумывания, может на самом деле ухудшить доступность. В этой статье объясняется, как это сделать правильно.
Короче — о чем эта статья
Когда темный режим помогает доступности
Для пользователей с чувствительностью к свету (фотофобией), мигренью или цифровым напряжением глаз темный фон может значительно уменьшить дискомфорт при длительном использовании, особенно в темноте. Некоторые пользователи с дислексией также сообщают о более комфортном чтении на темном фоне.
Когда действительно больно
С другой стороны, для пользователей с астигматизмом (распространенным нарушением зрения) светлый текст на темном фоне создает эффект «ореола», из-за которого буквы выглядят размытыми — иногда им удобнее читать светлый фон с темным текстом. В результате не существует единого правильного ответа для всех, поэтому лучшее решение — предоставить пользователю возможность выбора, а не навязывать ему один режим.
💡 Важный момент
Самое важное: никогда не полагайтесь исключительно на автоматическую настройку системы («prefers-color-scheme»), не предоставляя пользователю возможность переключаться вручную на самом сайте — не все, чья система находится в темном режиме, хотят, чтобы сайт был темным, и наоборот.
Контраст в темном режиме отличается от светлого.
Распространенная ошибка: брать те же цвета текста из светлого режима и просто менять фон на темный, без перепроверки коэффициента контрастности. Чистый черный (#000000) на чистом белом дает максимальный контраст 21:1, но обратный вариант: чистый белый на чистом черном создает особенно сильный эффект «ореола», утомляющий глаза. Лучше использовать темно-серый фон (например, #121212) вместо чисто черного и не совсем белый текст (например, #e8e8e8) вместо чисто белого — это по-прежнему соответствует требованиям контрастности WCAG (подробно объяснено в нашем руководстве по цветовой контраст), но значительно приятнее для глаз.
Практические правила
- Проверьте контрастность отдельно в каждом режиме — светлом и темном — не по одному разу.
- Избегайте особенно насыщенных цветов (ярко-красный или синий) на темном фоне — они визуально «вибрируют» и затрудняют чтение.
- Оставьте переключатель вручную на сайте, а не просто полагаться на настройки системы.
- Проверьте изображения и логотипы предназначен для светлого фона — иногда им нужна отдельная версия для темного режима, чтобы он оставался разборчивым.
Ваши документы тоже готовы к работе в темном режиме?
Многие PDF-файлы сегодня открываются в темном режиме приложений для чтения — наш инструмент проверяет, соответствует ли контрастность текста в ваших документах стандарту в каждом режиме.
Сканируйте ваш сайт бесплатно ←После сканирования вы также можете сделать найденные документы доступными напрямую и бесплатно через AccessiDoc.