Как правильно сделать тёмную тему и доступную палитру

Коэффициент контрастности измеряет относительную разницу яркости между цветом текста и цветом фона; 1:1 означает отсутствие разницы, 21:1 так же резко, как чёрное на белом. Стандарт WCAG считает 4.5:1 минимумом для обычного текста и 3:1 для крупного текста (жирный шрифт от 18 пунктов или обычный от 24 пунктов) (W3C WCAG 2.1).

Считать это вручную не нужно; проверка контраста в инструментах разработчика браузера или любой из бесплатных онлайн-инструментов мгновенно показывает коэффициент после ввода цветов. Тёмно-серый фон со средне-серым текстом частая ошибка в тёмной теме сайта производителя генераторов; коэффициент обычно оказывается ниже 3:1, а читаемость от этого страдает.

Фирменный цвет, который выглядит ярко на светлом фоне, на тёмном может казаться тусклым или, так же часто, слепяще ярким; одно и то же значение цвета не воспринимается одинаково на обоих фонах. Поэтому тёмной теме нужен собственный вариант фирменного цвета, а не точная копия того же кода.

Красный фирменный цвет спортивного клуба, чётко читающийся на белом, на чёрном может выглядеть как неоновая вывеска и утомлять глаза; вариант с немного сниженной насыщенностью сохраняет узнаваемость бренда без этой утомляемости.

Тёмная тема не заканчивается на цвете фона и текста; тени, границы, иконки и фоны за изображениями тоже заслуживают повторного взгляда. Карточка, отделённая тонкой тенью на светлом фоне, на тёмном может исчезнуть полностью; тонкая граница тогда берёт на себя работу, которую выполняла тень.

Изображения это отдельный вопрос: фотография товара на белом фоне может смотреться как неуместная белая коробка на тёмной странице; решение, либо версия с прозрачным фоном, либо мягкая рамка вокруг.

Перед публикацией каждая пара текст-фон требует собственной проверки контраста, и функциональные элементы вроде кнопок, подписей форм и сообщений об ошибках нельзя пропускать. Если сообщение об ошибке формы окрашено в красный с низким контрастом, посетитель может вовсе его не заметить и отправить форму несколько раз, не понимая причины.

• Каждая пара текст/фон проверяется через инструмент проверки контраста
• Отдельный вариант фирменного цвета для тёмной темы определён заранее
• Изображения и иконки проверены отдельно в обоих режимах
• Протестировано автоматическое переключение по системной настройке (prefers-color-scheme)

Не каждому сайту она нужна; но у аудитории, использующей технический продукт (программу, приложение, панель управления), ожидания высоки. Сайт-визитка может оставить тёмную тему в низком приоритете, и в этом случае усилия лучше направить на правильный контраст в светлом режиме, ведь доступность касается не только тёмной темы.

Отметить некорректное поле только красным цветом может ничего не значить для посетителя с цветовой слепотой; заметная часть населения имеет ту или иную форму красно-зелёной цветовой слепоты. Цвет всегда должен подкрепляться значком или текстом, а не нести сообщение в одиночку.

Если индикатор наличия показывает «в наличии» зелёным и «распродано» красным без сопровождающей подписи, эта информация вовсе не доходит до некоторых посетителей; добавление небольшого значка или короткой текстовой метки избавляет цвет от роли единственного сигнала.

Как только посетитель вручную переключается с тёмной темы на светлую, этот выбор должен сохраняться при следующем визите; возврат к системной настройке при каждой загрузке страницы это простой способ раздражать посетителя. Настройка хранится в локальном хранилище браузера и считывается оттуда при каждой загрузке страницы.

Без такого запоминания на сайте игровой студии посетителю приходится заново повторять ту же настройку при каждом визите; мелкая техническая деталь, но повторяющаяся точка трения.

Вместо того чтобы полагаться только на локальное хранилище, настройку можно хранить и как параметр аккаунта на сервере; для авторизованного посетителя это переносит выбор между разными устройствами.