Начните с выбора пользователя и системы токенов
Используйте системную настройку по умолчанию через prefers-color-scheme. Если вы предлагаете переключатель, сделайте его управляемым с клавиатуры, с доступным именем и программно доступным текущим выбором. Делайте приоритетом ручной выбор в этом контексте браузера; не обещайте, что он сохранится на другом устройстве или в приватном сеансе.
Называйте цвета по роли, а не по внешнему виду: canvas, surface, text, muted text, border, link, accent, error, success, focus и disabled. Отобразите каждую роль в обеих темах. Это предотвратит утечку светлого серого в тёмный режим и сделает исправления переиспользуемыми. Тёмная тема не является по умолчанию более доступной или универсально предпочтительной; это ещё один опыт, который нужно сделать пригодным для использования.
Документируйте порядок, например сохранённый выбор первым и системное предпочтение вторым, чтобы команды тестировали один и тот же результат.
Включите hover, focus, selected, invalid, disabled, loading, empty и visited-link состояния, а не только значения по умолчанию.
Измеряйте контраст в отрендеренной теме
WCAG 2.2 Success Criterion 1.4.3 задаёт минимум 4.5:1 для нормального текста и изображений текста и 3:1 для крупного текста. Не округляйте: 4.499:1 не соответствует 4.5:1. Тонкие начертания могут выглядеть слабее своего вычисленного цвета, поэтому используйте более плотный гарнитур или дополнительный отступ.
Проверяйте каждый отрисованный передний план и соседний фон. Текст поверх фото, градиентов, полупрозрачных панелей или видео имеет меняющиеся фоны, поэтому расчёт по одному токену не докажет читаемость. Используйте непрозрачный фон, достаточный оверлей или другое расположение, затем инспектируйте в реалистичных вьюпортах.
Согласно WCAG 2.1 Success Criterion 1.4.11, визуальная информация, необходимая для распознавания активного элемента управления, обязательного состояния или значимой графики, должна иметь 3:1 по отношению к смежным цветам.
Сопоставляйте изменения цвета с текстом, иконкой, паттерном, положением или другим явным сигналом; состояния ошибки и выбора не должны полагаться на тонкий оттенок.
Защищайте фокус клавиатуры, формы и изменения состояний
Пройдитесь по вкладкам в обеих темах. Фокус должен быть видим на ссылках, кнопках, полях ввода, меню, диалогах, пользовательских виджетах и контроле темы. Не удаляйте outline браузера, если его замена не протестирована на каждой поверхности и в каждом состоянии. Смещённый outline часто яснее, чем расплывчатое свечение.
WCAG 2.2 Focus Appearance — это критерий уровня AAA, а не доказательство соответствия сайту уровню AA. Это полезная цель: индикатор площади по крайней мере такой же, как 2 CSS-pixel периметр, и контраст 3:1 между пикселями в фокусе и вне фокуса. Также проверьте, что состояния error, required, selected и unavailable сохраняют смысл.
Тестируйте подсказку в поле, введённое значение, метку, подсказку помощи, текст ошибки, некорректную границу, отметку чекбокса, выбор радио и состояние отправки отдельно.
Для оформления заказа или другого регулируемого процесса используйте песочницу провайдера и при необходимости получите квалифицированное ревью по доступности и безопасности. Это образовательное руководство, а не оценка соответствия или безопасности.
Обрабатывайте изображения, встроенные ресурсы и UI, предоставляемый браузером
Проверьте логотипы, иллюстрации, скриншоты, диаграммы, иконки и текст, включённый в изображения, в обеих темах. Повторно использованный светлый логотип может исчезнуть, а легенда диаграммы перестать читаться, даже если окружающий HTML проходит. Предоставьте подходящий по назначению актив или стабильный фон. Изображения, которые передают инструкции, статус или данные, должны оставаться понятными.
Объявляйте поддержку светлой и тёмной схем, затем стилизуйте содержимое страницы для выбранной темы. Свойство color-scheme выравнивает канву браузера, полосы прокрутки, элементы форм и другой браузерный UI. Размещайте соответствующие метаданные рано в документе. Встроенный SVG может реагировать на родительскую схему; тестируйте сторонние iframe и виджеты сквозным образом.
Отдавайте предпочтение семантическим HTML-элементам управления. Поведение forced-color использует нативную семантику, а не роль ARIA, добавленную к универсальному элементу.
Проверяйте скачанные, закешированные, медленно загружающиеся и упавшие изображения, особенно там, где текст или подсказки действий располагаются поверх медиа.
Уважайте forced-colors и тестируйте релиз как систему
Forced-colors режим применяет ограниченную палитру, выбранную пользователем, например Windows High Contrast. Браузеры могут заменять цвета, убирать тени и добавлять подложки к тексту. Не блокируйте переопределение. Делайте целевые исправления там, где компонент теряет границу или смысл, например используйте реальную границу там, где за средство взаимодействия отвечала тень. Эмуляция не может представить каждое устройство, браузер, расширение, уровень масштабирования или комбинацию вспомогательных технологий.
Пройдите матрицу маршрутов и взаимодействий в светлой, тёмной и forced-colors настройках до релиза. Chrome DevTools может эмулировать оба состояния; используйте это для ускорения обзора, затем вручную пройдите приоритетные сценарии. Сканеры находят кандидатов, но не могут самостоятельно определить доступность. SIU preflights критические тематические активы и взаимодействия, фиксирует gate релиза и сохраняет проверенный путь отката для серьёзных регрессий представления; это не мониторинг простоя.
Включите посадочные страницы, навигацию, поиск, доступ в аккаунт, формы, страницы ошибок, экраны для аутентифицированных пользователей и потоки конверсии материалов.
Сохраняйте протестированные URL, версии браузеров, настройки, исключения, владельца и триггер отката, чтобы исправление начиналось с фактов.