Begreber

forced-colors

Se også: High Contrast Mode, HCM, Windows High Contrast, Forced Colors Mode

CSS-medieforespørgslen, der registrerer brugerkonfigurerede høj-kontrasttilstande — primært Windows High Contrast Mode samt Chrome/Edge Forced Colors. Forfattere bruger den til at tilpasse visningen, når systempræferencer tilsidesætter sidens farver.

forced-colors er CSS-medieforespørgslen, der registrerer, om brugeren har aktiveret en tvungen farveopretningstilstand — typisk Windows High Contrast Mode (HCM), som tilsidesætter webstedets farvevalg med en lille systempalet valgt af brugeren (hvid på sort, sort på hvid, gul på sort eller en brugerdefineret palet).

Tvungen farvetilstand bruges i høj grad af brugere med nedsat syn, særligt de med lysfølsomhed eller ekstreme kontrastkrav. Den bruges også som personlig præference af brugere uden dokumenteret handicap, der blot foretrækker høj kontrast.

Hvad HCM faktisk gør

Når Windows High Contrast Mode er aktiveret, erstatter styresystemet sidens farver med et lille sæt systemfarver:

  • Canvas — sidens baggrund.
  • CanvasText — standard tekstfarve.
  • LinkText — linkfarve.
  • VisitedText — farve på besøgte links.
  • ButtonText — knappes tekstfarve.
  • ButtonFace — knappes baggrundfarve.
  • HighlightText / Highlight — farver for markeret tekst.
  • GrayText — deaktiveret tekst.
  • Mark / MarkText — fremhævet tekst.

Browsere i forced-colors-tilstand erstatter de fleste forfatterdefinerede farver med disse systemfarver. De fjerner også baggrundsbilleder og nulstiller adskillige visuelle egenskaber til systemstandarder.

Dette er bevidst: brugeren har valgt en kontrastpalet, der virker for dem, og ønsker ikke, at siden tilsidesætter det valg. Sidens opgave er at samarbejde, ikke modkæmpe det.

CSS-medieforespørgslen

Forfatteren registrerer forced-colors-tilstand med:

@media (forced-colors: active) {
  /* brugeren er i HCM eller tilsvarende; tilpas din CSS her */
}

Den tilknyttede værdi prefers-color-scheme er uafhængig — en bruger kan være i mørk forced-colors-tilstand (hvid-på-sort systempalet) og alligevel returnere light fra prefers-color-scheme, fordi brugeren ikke eksplicit har valgt “mørk tilstand.”

Hvad der går galt i produktion

  • Baggrundsbilleder bliver usynlige. Forced-colors fjerner baggrundsbilleder. Hvis din “klik for at udvide”-pil er en baggrundsbilled-SVG uden reservetekst, ser brugeren ingenting. Løsning: brug <svg> eller inline-ikoner med currentColor, så de arver CanvasText; eller giv en tekstfallback.
  • Kanter forsvinder. Visse kanter fjernes eller erstattes med CanvasText-farvede kanter. Visuel hierarki baseret på subtile kantefarver er væk. Kontroller komponent-kanter i HCM.
  • Fokusindikatorer holder op med at virke. Tilpassede fokusringe tegnet med box-shadow mister farven. Brug outline (som bevares) eller registrer forced-colors og giv en systemfarvebevidst fallback.
  • Elementer der kun er synlige ved hover, forsvinder permanent. Tooltip-lignende komponenter, der er afhængige af baggrundsbilled-hover-tilstande, fejler.
  • forced-color-adjust: none. Visse designere bruger denne CSS-egenskab til at fravælge forced-colors-behandling for et specifikt element. Dette er næsten altid det forkerte valg — det betyder, at brugeren mister de farver, de eksplicit bad om. Brug sparsomt, kun til rent dekorative elementer hvor designets identitet er essentiel (logoer, brand-specifikke ikoner), og aldrig på tekst eller interaktive kontroller.

Sådan tester du

Windows: Indstillinger → Hjælpefunktioner → Kontrasttemaer → vælg en af de indbyggede paletter (Aquatic, Desert, Dusk, Night sky) og genindlæs siden. Chrome/Edge tager systemindstillingen op; Firefox bruger sin egen forced-colors-vippeknap i browserindstillingerne.

De fleste problemer opdages ved første gennemgang: manglende ikoner, usynlige kanter, ødelagte fokusringe. Fix dem med systemfarvebevidst CSS inde i forced-colors: active-medieforespørgslen.