forced-colors

forced-colors е CSS медия заявката, която открива кога потребителят е включил режим на принудителни цветове — обикновено Windows High Contrast Mode (HCM), при който уебсайтовете заменят избраните цветове с малка системна палитра, определена от потребителя (бяло на черно, черно на бяло, жълто на черно или потребителска палитра).

Режимът на принудителни цветове се използва широко от потребители с намалено зрение, по-специално тези с чувствителност към светлина или изключително високи изисквания за контраст. Ползва се и като лично предпочитание от потребители без документирано увреждане, които просто предпочитат висок контраст.

Какво всъщност прави HCM

Когато Windows High Contrast Mode е включен, операционната система заменя цветовете на сайта с малък набор от системни цветове:

• Canvas — фонът на страницата.
• CanvasText — цветът на текста по подразбиране.
• LinkText — цветът на връзките.
• VisitedText — цветът на посетените връзки.
• ButtonText — текстът на бутоните.
• ButtonFace — фонът на бутоните.
• HighlightText / Highlight — цветовете на избрания текст.
• GrayText — деактивиран текст.
• Mark / MarkText — маркиран текст.

Браузърите в режим на принудителни цветове заменят повечето дефинирани от автора цветове с тези системни цветове. Премахват също фоновите изображения и нулират редица визуални свойства до системните стойности по подразбиране.

Това е умишлено: потребителят е избрал палитра с контраст, подходяща за него, и не желае сайтът да я отменя. Задачата на сайта е да съдейства, а не да се противопоставя.

CSS медия заявката

Авторът открива режима на принудителни цветове чрез:

@media (forced-colors: active) {
  /* потребителят е в HCM или еквивалентен режим; адаптирайте CSS тук */
}

Свързаната стойност prefers-color-scheme е независима — потребител може да е в режим на тъмни принудителни цветове (системна палитра бяло на черно) и заявката му prefers-color-scheme все пак да върне light, защото не е избрал изрично „тъмен режим”.

Какво се обърква в production среда

• Фоновите изображения стават невидими. Принудителните цветове премахват фоновите изображения. Ако индикаторът „кликнете за разгъване” е SVG като фоново изображение без резервен текст, потребителят не вижда нищо. Решение: използвайте <svg> или вградени икони с currentColor, за да приемат цвета CanvasText; или предоставете текстов заместител.
• Рамките изчезват. Някои рамки се премахват или се заменят с рамки в цвят CanvasText. Визуалната йерархия, основана на фини цветове на рамките, изчезва. Проверете рамките на компонентите в HCM.
• Индикаторите на фокуса спират да работят. Потребителски пръстени на фокуса, нарисувани с box-shadow, губят цвета си. Използвайте outline (който се запазва) или открийте принудителните цветове и предоставете заместител, съобразен със системните цветове.
• Елементи, видими само при задържане, изчезват напълно. Компоненти тип подсказка, разчитащи на фонови изображения при задържане, се провалят.
• forced-color-adjust: none. Някои дизайнери използват това CSS свойство, за да изключат обработката на принудителните цветове за конкретен елемент. Почти винаги е грешен избор — означава, че потребителят губи цветовете, поискани изрично от него. Прилагайте го пестеливо, само за чисто декоративни елементи, при които идентичността на дизайна е съществена (лога, специфични за марката икони), и никога за текст или интерактивни контроли.

Как да тествате

Windows: Настройки → Достъпност → Теми с контраст → изберете една от вградените палитри (Aquatic, Desert, Dusk, Night sky) и презаредете страницата. Chrome/Edge ще приемат системната настройка; Firefox използва собствен превключвател за принудителни цветове в настройките на браузъра.

Повечето проблеми се установяват при първоначалния преглед: липсващи икони, невидими рамки, счупени индикатори на фокуса. Отстранявайте ги чрез CSS, съобразен със системните цветове, в рамките на медия заявката forced-colors: active.