Pojęcia

forced-colors

Zob. też: High Contrast Mode, HCM, Windows High Contrast, Forced Colors Mode

Zapytanie CSS media wykrywające tryby wysokiego kontrastu skonfigurowane przez użytkownika — głównie Windows High Contrast Mode oraz Chrome/Edge Forced Colors. Autorzy używają go do dostosowania renderowania, gdy systemowe preferencje kolorów zastępują style strony.

forced-colors to zapytanie CSS media wykrywające, że użytkownik włączył tryb wymuszonych kolorów — typowo Windows High Contrast Mode (HCM), który zastępuje kolory strony małą paletą systemową wybraną przez użytkownika (biały na czarnym, czarny na białym, żółty na czarnym lub paleta niestandardowa).

Tryb wymuszonych kolorów jest intensywnie używany przez osoby słabowidzące, szczególnie te z nadwrażliwością na światło lub skrajnymi wymaganiami dotyczącymi kontrastu. Korzystają z niego też użytkownicy bez udokumentowanej niepełnosprawności, którzy po prostu preferują wysoki kontrast.

Co faktycznie robi HCM

Gdy Windows High Contrast Mode jest włączony, system operacyjny zastępuje kolory strony małym zestawem kolorów systemowych:

  • Canvas — tło strony.
  • CanvasText — domyślny kolor tekstu.
  • LinkText — kolor linku.
  • VisitedText — kolor odwiedzonego linku.
  • ButtonText — tekst przycisku.
  • ButtonFace — tło przycisku.
  • HighlightText / Highlight — kolory zaznaczonego tekstu.
  • GrayText — tekst wyłączony.
  • Mark / MarkText — wyróżniony tekst.

Przeglądarki w trybie forced-colors zastępują większość kolorów autorskich tymi kolorami systemowymi. Usuwają też obrazy tła i resetują kilka właściwości wizualnych do wartości systemowych.

To celowy zamysł: użytkownik wybrał paletę kontrastu, która mu odpowiada, i nie chce, by strona to nadpisywała. Zadaniem strony jest współpracować, a nie walczyć.

Zapytanie CSS media

Autor wykrywa tryb forced-colors za pomocą:

@media (forced-colors: active) {
  /* użytkownik jest w HCM lub równorzędnym trybie; dostosuj CSS tutaj */
}

Powiązana wartość prefers-color-scheme jest niezależna — użytkownik może być w ciemnym trybie forced-colors (biała na czarnej paleta systemowa), a zapytanie prefers-color-scheme nadal może zwracać light, ponieważ użytkownik nie wybrał jawnie „trybu ciemnego”.

Co się psuje w produkcji

  • Obrazy tła stają się niewidoczne. Forced-colors usuwa obrazy tła. Jeśli twój „kliknij, by rozwinąć” wskaźnik to SVG jako background-image bez fallbacku tekstowego, użytkownik nie zobaczy nic. Poprawka: używaj <svg> lub ikon inline z currentColor, by pobierały CanvasText; lub zapewnij fallback tekstowy.
  • Obramowania znikają. Niektóre obramowania są usuwane lub zastępowane obramowaniami w kolorze CanvasText. Hierarchia wizualna oparta na subtelnych kolorach obramowań znika. Audytuj obramowania komponentów w HCM.
  • Wskaźniki focusu przestają działać. Niestandardowe pierścienie focusu rysowane przez box-shadow tracą kolor. Używaj outline (który jest zachowany) lub wykrywaj forced-colors i zapewnij fallback w kolorach systemowych.
  • Elementy widoczne tylko przy hover znikają na stałe. Komponenty w stylu tooltipów oparte na stanach hover z background-image zawodzą.
  • forced-color-adjust: none. Niektórzy projektanci używają tej właściwości CSS, by wyłączyć przetwarzanie forced-colors dla konkretnego elementu. To prawie zawsze zły wybór — oznacza, że użytkownik traci kolory, o które jawnie prosił. Używaj oszczędnie, tylko dla elementów czysto dekoracyjnych (logo, ikony brandowe) i nigdy na tekście ani kontrolkach interaktywnych.

Jak testować

Windows: Ustawienia → Ułatwienia dostępu → Motywy o wysokim kontraście → wybierz jeden z wbudowanych motywów (Aquatic, Desert, Dusk, Night sky) i przeładuj stronę. Chrome i Edge pobiorą ustawienie systemowe; Firefox ma własny przełącznik forced-colors w ustawieniach przeglądarki.

Większość problemów wyłapuje się przy pierwszym spojrzeniu: brakujące ikony, niewidoczne obramowania, zepsute wskaźniki focusu. Naprawiaj je za pomocą CSS w świadomości kolorów systemowych wewnątrz zapytania forced-colors: active.