Come adattare il contrasto tramite CSS

Proseguiamo la carrellata di articoli relativi all’accessibilità di un sito web analizzando un’altra specifica delle Media Queries del CSS, il prefers-contrast. Questa istruzione consente di impostare del CSS specifico per aumentare o diminuire il contrasto. Risulta quindi utile ad aiutare una fascia della popolazione a leggere meglio i testi e a rimarcare quegli elementi grafici dai colori tenui.

Può accadere infatti che per esigenze grafiche o per delle particolari circostanze vengano abbinati dei colori il cui contrasto risulta debole. Per molti utenti ciò non costituisce un serio problema. Per alcune persone, invece, la mancanza di un forte contrasto rappresenta un serio problema di accessibilità.

In fase di progettazione di un sito web o di un’applicazione, il team grafico può optare per due strade: progettare il layout del prodotto controllando che il contrasto tra gli elementi sia abbastanza forte da non creare problemi di lettura, oppure delegare allo sviluppatore front-end il compito di mitigare il problema attraverso il CSS.

Optando per la seconda scelta, il prefers-contrast consentirà, in fase di sviluppo o di revisione del progetto, di scrivere delle istruzioni specifiche per quegli utenti che hanno necessità di aumentare il contrasto.

La sintassi del prefers-contrast

Il valore predefinito è no-preference. Questo valore indica che l’utente non ha impostato alcuna preferenza.

Il more indica se l’utente ha scelto di visualizzare i contenuti con un forte contrasto.

Infine abbiamo il less che indica di mostrare i contenuti con un basso livello di contrasto.

L’unico valore che effettivamente rivela la scelta dell’utente di aumentare il contrasto è il more. Infatti l’opzione di accessibilità dei vari sistemi operativi consente solo di aumentare il contrasto.

In che modo utilizzare il prefers-contrast

In qualità di sviluppatore front-end e basandomi sull’esperienza di centinaia di progetti realizzati, il modo migliore di utilizzare il prefers-contrast del CSS è applicare delle istruzioni specifiche per quegli utenti che hanno scelto di aumentare il contrasto.
Se un layout grafico viene progettato con un contrasto adeguato non ci sarebbero motivazioni per scrivere le istruzioni specifiche per ridurre il contrasto - e non avrebbe nemmeno senso farlo.

Come abbiamo già visto con le istruzioni per gestire l'accessibilità delle trasparenze tramite CSS, l’utilizzo del prefers-contrast è semplicissimo:

// Istruzioni CSS come definito nel layout grafico

@media (prefers-contrast: more) {
  // Istruzioni CSS per aumentare il contrasto
}

Un esempio concreto di adattamento del contrasto

La parte di layout grafico da trasformare in codice presenta un blocco di testo sovrapposto ad uno sfondo poco contrastato. Questo specifico problema non sempre è risolvibile durante la progettazione del layout. Pensiamo per esempio ai temi WordPress pronti all’uso. In un sito web dove i contenuti sono elaborati dinamicamente, l’immagine di sfondo potrebbe non essere stata scelta con la dovuta perizia. Il layout grafico potrebbe prevedere una copertura semi trasparente ma questo utile accorgimento a volte potrebbe non bastare.

Possiamo risolvere il problema aggiungendo alcune istruzioni al foglio di stile.

@media (prefers-contrast: more) {
    h1.hero_title {
        background-color: black;
        padding: 5px 15px;
    }
}

Sono bastate poche righe per aiutare quelle persone che presentano dei problemi nel leggere i testi a basso contrasto, senza alterare l’aspetto grafico concepito dai grafici per la maggior parte degli utenti.

Compatibilità del prefers-contrast

La Media Query prefers-contrast è, ad oggi, ancora in fase sperimentale e dovrebbe far parte delle Media Queries di livello 5.
È stata però implementata su Edge, Chrome, Safari e Opera. È presente anche su Firefox ma l’opzione deve essere abilitata tramite le impostazioni nascoste del browser:

Aprire Firefox e digitare about:config nella barra degli URL
Cercare layout.css.prefers-contrast.enabled e quindi impostarlo in true