Concepten

forced-colors

Zie ook: High Contrast Mode, HCM, Windows High Contrast, Forced Colors Mode

De CSS-mediaquery die door de gebruiker geconfigureerde hoog-contrastmodi detecteert — voornamelijk Windows High Contrast Mode en Chrome/Edge Forced Colors. Auteurs gebruiken deze om rendering aan te passen wanneer systeemkleurvoorkeuren sitesstijlen overschrijven.

forced-colors is de CSS-mediaquery die detecteert wanneer de gebruiker een geforceerde-kleurmodus heeft ingeschakeld — doorgaans Windows High Contrast Mode (HCM), die websitekleurkeuzen overschrijft met een klein systeempalet dat door de gebruiker is gekozen (wit op zwart, zwart op wit, geel op zwart of een aangepast palet).

Geforceerde-kleurmodus wordt veel gebruikt door slechtziende gebruikers, met name mensen met lichtgevoeligheid of extreme contrastvereisten. Het wordt ook als persoonlijke voorkeur gebruikt door gebruikers zonder gedocumenteerde beperking die simpelweg de voorkeur geven aan hoog contrast.

Wat HCM daadwerkelijk doet

Wanneer Windows High Contrast Mode is ingeschakeld, vervangt het besturingssysteem sitekleur­en door een kleine set systeemkleuren:

  • Canvas — de pagina-achtergrond.
  • CanvasText — de standaardtekstkleur.
  • LinkText — koppelingskleur.
  • VisitedText — kleur van bezochte koppelingen.
  • ButtonText — knoptekst.
  • ButtonFace — knopachtergrond.
  • HighlightText / Highlight — kleuren voor geselecteerde tekst.
  • GrayText — uitgeschakelde tekst.
  • Mark / MarkText — gemarkeerde tekst.

Browsers in geforceerde-kleurmodus vervangen de meeste door de auteur gedefinieerde kleuren door deze systeemkleuren. Ze verwijderen ook achtergrondafbeeldingen en zetten verscheidene visuele eigenschappen terug naar systeemstandaarden.

Dit is zo bedoeld: de gebruiker heeft een contrastpalet gekozen dat voor hem werkt, en wil niet dat de site die keuze overschrijft. De taak van de site is meewerken, niet terugvechten.

De CSS-mediaquery

De auteur detecteert geforceerde-kleurmodus met:

@media (forced-colors: active) {
  /* de gebruiker is in HCM of vergelijkbaar; pas uw CSS hier aan */
}

De bijbehorende waarde prefers-color-scheme is onafhankelijk — een gebruiker kan zich in een donkere geforceerde-kleurmodus bevinden (wit-op-zwart systeempalet) terwijl zijn prefers-color-scheme-query nog steeds light retourneert, omdat de gebruiker niet expliciet voor “donkere modus” heeft gekozen.

Wat er in productie misgaat

  • Achtergrondafbeeldingen worden onzichtbaar. Geforceerde kleuren verwijderen achtergrondafbeeldingen. Als uw “klik om uit te vouwen”-karakter een achtergrond-SVG is zonder reservetekst, ziet de gebruiker niets. Oplossing: gebruik <svg> of inline iconen met currentColor zodat ze CanvasText overnemen, of geef een tekstalternatief.
  • Randen verdwijnen. Sommige randen worden verwijderd of vervangen door randen in CanvasText-kleur. Visuele hiërarchie die afhankelijk was van subtiele randkleuren is verdwenen. Controleer componentranden in HCM.
  • Focusindicatoren werken niet meer. Aangepaste focusringen die met box-shadow zijn getekend, verliezen hun kleur. Gebruik outline (dat behouden blijft) of detecteer geforceerde kleuren en geef een systeemkleur-bewust alternatief.
  • Alleen-bij-hover zichtbare elementen verdwijnen permanent. Tooltipachtige componenten die afhankelijk zijn van background-image-hovertoestanden falen.
  • forced-color-adjust: none. Sommige ontwerpers gebruiken deze CSS-eigenschap om geforceerde-kleursverwerking voor een specifiek element uit te schakelen. Dit is bijna altijd de verkeerde keuze — het betekent dat de gebruiker de kleuren verliest die hij expliciet heeft gevraagd. Gebruik spaarzaam, alleen voor puur decoratieve elementen waarbij de identiteit van het ontwerp essentieel is (logo’s, merkspecifieke iconen), en nooit op tekst of interactieve besturingen.

Hoe te testen

Windows: Instellingen → Toegankelijkheid → Contrastthema’s → kies een van de ingebouwde paletten (Aquatisch, Woestijn, Schemering, Nachtelijke hemel) en laad de pagina opnieuw. Chrome en Edge nemen de systeeminstelling over; Firefox heeft een eigen geforceerde-kleurenschakelaar in de browserinstellingen.

De meeste problemen worden bij de eerste inspectie opgemerkt: ontbrekende iconen, onzichtbare randen, kapotte focusringen. Los ze op met systeemkleur-bewuste CSS binnen de mediaquery forced-colors: active.