Режим принудительных цветов

Им пользуются люди со слабым зрением, светочувствительностью, некоторыми нарушениями восприятия цвета, а иногда просто те, кому так удобнее читать. В Windows режим включается в параметрах специальных возможностей, и браузеры применяют его к страницам. Цвета текста, фона, рамок, ссылок и кнопок заменяются системными, тени убираются, и от дизайна остаётся палитра из нескольких цветов.

Для автора сайта это значит, что всё, что держалось только на цвете, может пропасть: кнопка без рамки, нарисованная фоном, превращается в обычный текст, иконка на box-shadow исчезает, выделенная цветом активная вкладка перестаёт отличаться от остальных.

Как адаптировать вёрстку

Режим определяется медиафункцией forced-colors. Внутри можно использовать системные цвета — ключевые слова Canvas, CanvasText, LinkText, ButtonText, Highlight, — которые подставят цвета текущей темы:

.button {
  background: #2a6df4;
  color: #fff;
  border: 2px solid transparent; /* в обычном режиме не видна */
}
@media (forced-colors: active) {
  .tab[aria-selected="true"] {
    outline: 2px solid Highlight; /* активную вкладку видно без цвета */
  }
}

Прозрачная рамка у кнопки — известный приём: в обычном режиме её не видно, а в принудительных цветах браузер окрашивает её системным цветом, и у кнопки появляется контур.

Чего избегать

• Отключить режим целиком. Свойство forced-color-adjust: none отменяет подмену цветов для элемента. Это оправдано для образцов цвета товара или графиков, но не для всего сайта: пользователь включил режим не просто так.
• Иконки без привязки к цвету текста. Тёмный значок может слиться с тёмным системным фоном. Иконки в SVG с fill="currentColor" подхватывают цвет текста и остаются видимыми.
• Не проверить. Режим эмулируется в инструментах разработчика Chromium на вкладке Rendering, так что для проверки Windows не обязателен.

Поддержка режима — часть более широкой задачи доступности интерфейса.