Begrepp

forced-colors

Se även: High Contrast Mode, HCM, Windows High Contrast, Forced Colors Mode

CSS-mediafrågan som detekterar användarkonfigurerade högkontrastlägen — främst Windows High Contrast Mode samt Chrome/Edge Forced Colors. Utvecklare använder den för att anpassa renderingen när systemets färginställningar åsidosätter sidans stilar.

forced-colors är CSS-mediafrågan som detekterar när användaren har aktiverat ett tvingat färgläge — typiskt Windows High Contrast Mode (HCM), som åsidosätter webbplatsens färgval med en liten systempalett vald av användaren (vitt på svart, svart på vitt, gult på svart eller en anpassad palett).

Tvingat färgläge används i hög grad av användare med nedsatt syn, särskilt de med ljuskänslighet eller extrema kontrastkrav. Det används också som en personlig preferens av användare utan dokumenterad funktionsnedsättning som helt enkelt föredrar hög kontrast.

Vad HCM faktiskt gör

När Windows High Contrast Mode är aktiverat ersätter operativsystemet webbplatsens färger med en liten uppsättning systemfärger:

  • Canvas — sidans bakgrund.
  • CanvasText — standardtextfärgen.
  • LinkText — länkfärg.
  • VisitedText — färg för besökta länkar.
  • ButtonText — knapptext.
  • ButtonFace — knappbakgrund.
  • HighlightText / Highlight — markerade textfärger.
  • GrayText — inaktiverad text.
  • Mark / MarkText — markerad text.

Webbläsare i forced-colors-läge ersätter de flesta författardefinierade färger med dessa systemfärger. De tar också bort bakgrundsbilder och återställer flera visuella egenskaper till systemstandarder.

Detta är avsiktligt: användaren har valt en kontrastpalett som fungerar för dem och vill inte att webbplatsen åsidosätter det valet. Webbplatsens uppgift är att samarbeta, inte motarbeta.

CSS-mediafrågan

Utvecklaren detekterar forced-colors-läge med:

@media (forced-colors: active) {
  /* användaren är i HCM eller motsvarighet; anpassa din CSS här */
}

Det relaterade värdet prefers-color-scheme är oberoende — en användare kan vara i mörkt forced-colors-läge (vitt-på-svart systempalett) och deras prefers-color-scheme-fråga kan ändå returnera light eftersom användaren inte explicit valt “mörkt läge”.

Vad som går fel i produktion

  • Bakgrundsbilder blir osynliga. Forced-colors tar bort bakgrundsbilder. Om din “klicka för att expandera”-caret är en bakgrundsbilds-SVG utan reservtext ser användaren ingenting. Åtgärd: använd <svg> eller inline-ikoner med currentColor så de plockar upp CanvasText; eller tillhandahåll en textreserv.
  • Kanter försvinner. Vissa kanter tas bort eller ersätts med CanvasText-färgade kanter. Visuell hierarki som byggde på subtila kantfärger försvinner. Granska komponentkanter i HCM.
  • Fokusindikatorer slutar fungera. Anpassade fokusringar ritade med box-shadow förlorar sin färg. Använd outline (som bevaras) eller detektera forced-colors och tillhandahåll en systemfärgmedveten reserv.
  • Enbart synliga-vid-hover-element försvinner permanent. Tooltip-liknande komponenter som förlitar sig på bakgrundsbilds-hover-tillstånd slutar fungera.
  • forced-color-adjust: none. Vissa designers använder den här CSS-egenskapen för att välja bort forced-colors-behandling för ett specifikt element. Detta är nästan alltid fel val — det innebär att användaren förlorar de färger de explicit begärde. Använd sparsamt, bara för genuint dekorativa element där designens identitet är väsentlig (logotyper, varumärkesspecifika ikoner), och aldrig på text eller interaktiva kontroller.

Hur man testar

Windows: Inställningar → Hjälpmedel → Kontrastteman → välj en av de inbyggda paletterna (Aquatic, Desert, Dusk, Night sky) och ladda om sidan. Chrome/Edge plockar upp systeminställningen; Firefox har en egen forced-colors-växel i webbläsarinställningarna.

De flesta problem upptäcks vid första inspektion: saknade ikoner, osynliga kanter, trasiga fokusringar. Åtgärda dem med systemfärgmedveten CSS inuti forced-colors: active-mediafrågan.