Что такое forced colors — режим, в котором Windows перекрашивает твой сайт

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

Никто ничего не взломал. Это режим принудительных цветов — forced colors. И включают его чаще, чем кажется: в опросе WebAIM 2018 года среди 248 слабовидящих людей каждый второй (51,4%) сказал, что пользуется каким-то режимом высокой контрастности. Из них 71% выбирают светлый текст на тёмном фоне.

Что это такое простыми словами

Forced colors — режим, в котором браузер игнорирует твои цвета и рисует страницу палитрой, которую человек выбрал в системе.

Самый известный пример — контрастные темы Windows: «Параметры» → «Специальные возможности» → «Контрастные темы». Microsoft даёт и быструю комбинацию: левый Alt + левый Shift + Print Screen.

Палитра в таком режиме маленькая: фон, текст, ссылки, кнопки, выделение, неактивные элементы. Зато контраст гарантирован. Человек сам выбрал цвета, которые ему читаются.

Как это работает: что именно браузер отбирает

MDN перечисляет свойства, чьи значения браузер подменяет прямо в момент отрисовки. Это color, background-color, border-color, outline-color, цвета подчёркиваний и SVG-атрибуты fill и stroke.

Ещё несколько свойств ведут себя особо:

• box-shadow и text-shadow становятся none;
• background-image становится none, если это градиент, а картинка по ссылке остаётся;
• за текстом браузер рисует подложку, чтобы надпись на фото читалась.

Цвет браузер выбирает по смыслу элемента. Текст кнопки станет системным цветом кнопок ButtonText, ссылка — LinkText, обычный текст — CanvasText.

Тут ловушка, особенно для сгенерированного кода. Смысл берётся из настоящего тега, а не из ARIA. MDN пишет прямо: div с role="button" цвет кнопки не получит. Для браузера это просто текст.

Что обычно ломается

Все частые поломки — про то, что держалось только на цвете.

1. Кнопка из одной заливки. Рамки нет, от страницы кнопка отличалась только фоном. Фон стал системным — и граница исчезла. Остался текст посреди текста.
2. Фокус и выбор тенью. Рамку фокуса или «выбранную» карточку нарисовали через box-shadow? В этом режиме тени нет. Человек с клавиатуры не видит, где он.
3. Иконки картинками. Файл-иконка остаётся как есть, а фон под ней меняется. Тёмная иконка на тёмном системном фоне просто растворяется.
4. Самодельные чекбоксы и переключатели. Если «включено» показывалось заливкой квадратика из div, в этом режиме оба состояния выглядят одинаково. Человек не понимает, поставил он галочку или нет. Настоящий <input type="checkbox"> браузер нарисует системными цветами сам — в документации Tailwind для такого случая даже есть пример с forced-colors:appearance-auto.

Как проверить за минуту и починить

Windows для проверки не нужен. В Chrome открой DevTools → меню ⋮ → More tools → Rendering. Найди «Emulate CSS media feature forced-colors» и выбери forced-colors: active. Теперь пройди страницу клавишей Tab. Проверь и тёмную, и светлую контрастную тему: у одних людей фон чёрный, у других — белый, и ломаются в них разные места.

Чинится обычно без отдельного дизайна.

Прозрачная рамка. Дай кнопкам и карточкам border: 2px solid transparent. В обычном режиме её не видно. А в forced colors цвет рамки браузер заменит системным — и граница вернётся. Тот же приём команда Microsoft Edge советует для фокуса: рядом с тенью оставить прозрачный outline.

Иконки через currentColor. Рисуй SVG с fill="currentColor". Иконка возьмёт цвет окружающего текста — в светлой теме, в тёмной и в контрастной.

Точечные правки в медиа-запросе:

@media (forced-colors: active) {
  .card--selected {
    border-color: Highlight;
  }
}

Highlight, CanvasText, ButtonText — системные цвета. Ты не знаешь, какими они окажутся у человека. И не должен: браузер подставит его выбор.

MDN предупреждает: не рисуй в этом запросе отдельный дизайн. Его задача — мелкие подпорки там, где автоматика не справилась. В Tailwind для этого есть готовый вариант forced-colors: — чем он удобнее голого CSS, разобрано в статье Tailwind или CSS.

Соседняя системная настройка, которую сайт тоже обязан уважать, — prefers-reduced-motion, просьба убрать лишнее движение.

Можно ли просто выключить этот режим для своего сайта?

Технически да: forced-color-adjust: none. Но так ты отнимаешь у человека настройку, без которой он не может читать. MDN разрешает это только там, где цвет и есть смысл: образцы цветов товара, палитра в редакторе.

Какие системные цвета брать для своих правок?

Бери по смыслу элемента. Canvas и CanvasText — фон и текст страницы. LinkText — ссылки. ButtonFace и ButtonText — кнопки. Highlight и HighlightText — выделенное. GrayText — неактивные элементы. Полный список есть на MDN.

Это то же самое, что тёмная тема?

Нет. В тёмной теме цвета выбираешь ты, а в forced colors — человек. Но связь есть: если системный фон тёмный, браузер сам включит твою тёмную тему через prefers-color-scheme.

Работает ли это на Mac и телефоне?

Медиа-запрос понимают Chrome, Firefox и Safari, но сам режим прежде всего живёт в Windows. Для просьбы «побольше контраста» без подмены цветов есть соседний запрос prefers-contrast: more.