Нужно проверить весь интерфейс
Тёмная тема — не просто негатив светлой страницы. Изменение фона влияет на текст, границы, карточки, изображения, тени, элементы управления и все их состояния.
Распространённая ошибка: основной фон становится тёмным, а одна секция сохраняет фиксированный светлый цвет. Другая ошибка — белый текст на поверхности, которая тоже стала светлой. Это похоже на небольшую проблему CSS, но содержание может стать трудным или невозможным для чтения.
Контраст нужен не только основному тексту
WCAG 2.2 устанавливает минимальный контраст для текста. Для обычного текста требуется не менее 4,5:1, для крупного — не менее 3:1. W3C также объясняет требования к важным нетекстовым элементам: границам и визуальным сигналам, необходимым для понимания и использования элементов управления.
Числа — отправная точка, а не вся проверка качества. Кнопка может пройти один тест, но иметь почти незаметное состояние hover или focus. Нужно проверять все состояния: обычное, наведение, фокус, активное и отключённое.
Практический пример с samthomas.no
Во время работы над тёмной темой этого сайта мобильные снимки показали секции со светлым фоном и уже белым текстом. Основной фон изменился, но часть цветовой системы осталась прежней.
Так появилась конкретная задача: проверить текст и поверхности секций вместе. Этот опыт объясняет, почему при настройке тем я проверяю целые страницы и состояния компонентов.
Это пример из разработки моего сайта, а не пользовательское исследование или подтверждение соответствия всем требованиям доступности.
Практическая проверка
Просмотрите весь сайт в обеих темах, компонент за компонентом. Найдите поверхности с фиксированными светлыми или тёмными цветами. Проверьте текст, ссылки, иконки, формы, меню, карточки и изображения.
Затем используйте клавиатуру и мышь. Хорошо ли видны фокус и hover? Проверьте маленький экран и увеличенный текст. Тёмная тема готова тогда, когда работает вся задача, а не только изменился фон.