Concetti

forced-colors

Vedi anche: High Contrast Mode, HCM, Windows High Contrast, Forced Colors Mode

La media query CSS che rileva le modalità ad alto contrasto configurate dall'utente — principalmente Windows High Contrast Mode (HCM). Gli autori la usano per adattare il rendering quando le preferenze cromatiche di sistema sovrascrivono gli stili del sito.

forced-colors è la media query CSS che rileva quando l’utente ha attivato una modalità a colori forzati — tipicamente Windows High Contrast Mode (HCM), che sostituisce le scelte cromatiche del sito con una piccola tavolozza di sistema scelta dall’utente (bianco su nero, nero su bianco, giallo su nero o una tavolozza personalizzata).

La modalità a colori forzati è ampiamente usata da utenti con ipovisione, in particolare da chi ha sensibilità alla luce o esigenze di contrasto elevato. È inoltre adottata come preferenza personale da utenti senza una disabilità documentata che semplicemente prediligono l’alto contrasto.

Cosa fa effettivamente HCM

Quando Windows High Contrast Mode è attiva, il sistema operativo sostituisce i colori del sito con un insieme ristretto di colori di sistema:

  • Canvas — lo sfondo della pagina.
  • CanvasText — il colore predefinito del testo.
  • LinkText — il colore dei collegamenti.
  • VisitedText — il colore dei collegamenti visitati.
  • ButtonText — il testo dei pulsanti.
  • ButtonFace — lo sfondo dei pulsanti.
  • HighlightText / Highlight — i colori del testo selezionato.
  • GrayText — il testo disabilitato.
  • Mark / MarkText — il testo evidenziato.

I browser in modalità forced-colors sostituiscono la maggior parte dei colori definiti dall’autore con questi colori di sistema. Rimuovono anche le immagini di sfondo e ripristinano diverse proprietà visive ai valori predefiniti di sistema.

Questo è voluto: l’utente ha scelto una tavolozza di contrasto adatta alle proprie esigenze e non desidera che il sito annulli quella scelta. Il compito del sito è cooperare, non opporre resistenza.

La media query CSS

L’autore rileva la modalità forced-colors con:

@media (forced-colors: active) {
  /* l'utente si trova in HCM o equivalente; adattare il CSS qui */
}

Il valore associato prefers-color-scheme è indipendente — un utente può trovarsi in modalità forced-colors scura (tavolozza di sistema bianco su nero) e la query prefers-color-scheme può comunque restituire light perché l’utente non ha scelto esplicitamente la «modalità scura».

Cosa va storto in produzione

  • Le immagini di sfondo diventano invisibili. La modalità forced-colors rimuove le immagini di sfondo. Se il simbolo a freccia per «fare clic per espandere» è un SVG come immagine di sfondo senza testo di riserva, l’utente non vede nulla. Soluzione: usare <svg> o icone inline con currentColor affinché ereditino CanvasText; oppure fornire un testo di riserva.
  • I bordi scompaiono. Alcuni bordi vengono eliminati o sostituiti con bordi del colore CanvasText. La gerarchia visiva basata su bordi di colore sottile svanisce. È opportuno verificare i bordi dei componenti in HCM.
  • Gli indicatori di focus smettono di funzionare. Gli anelli di focus personalizzati disegnati con box-shadow perdono il loro colore. Usare outline (che viene preservato) oppure rilevare forced-colors e fornire un’alternativa consapevole dei colori di sistema.
  • Gli elementi visibili solo al passaggio del mouse scompaiono definitivamente. I componenti di tipo tooltip che si basano su stati hover con immagini di sfondo non funzionano.
  • forced-color-adjust: none. Alcuni designer usano questa proprietà CSS per escludere dalla elaborazione forced-colors uno specifico elemento. Quasi sempre è la scelta sbagliata — significa che l’utente perde i colori che ha esplicitamente richiesto. Da usare con parsimonia, solo per elementi puramente decorativi in cui l’identità visiva del progetto è essenziale (loghi, icone di marca), e mai su testo o controlli interattivi.

Come eseguire il test

Su Windows: Impostazioni → Accessibilità → Temi a contrasto → scegliere una delle tavolozze integrate (Acquatico, Deserto, Crepuscolo, Cielo notturno) e ricaricare la pagina. Chrome ed Edge recepiscono l’impostazione di sistema; Firefox dispone di un proprio pulsante forced-colors nelle impostazioni del browser.

La maggior parte dei problemi emerge alla prima ispezione: icone mancanti, bordi invisibili, anelli di focus non funzionanti. È sufficiente correggerli con CSS consapevole dei colori di sistema all’interno della media query forced-colors: active.