Rendere il sito web più leggibile

Sofia Emelianova

Punto chiave: un testo a basso contrasto è il principale problema di accessibilità sul web. A febbraio 2022, l'83,9% dei principali milioni di home page ha avuto questo problema. Per saperne di più, consulta il report WebAIM Million 2022.

I testi a basso contrasto rendono il tuo sito web meno leggibile per tutti gli utenti, ancor di più per gli utenti con problemi di vista. DevTools può individuare automaticamente i problemi a basso contrasto e suggerire colori migliori per aiutarti a risolverli.

Utilizza DevTools per:

• Individua i problemi di contrasto. Utilizza il riquadro Panoramica CSS, la scheda Problemi (anteprima) o un report Lighthouse per visualizzare un elenco di tutti i problemi.
• Risolvi i problemi di contrasto. Visualizza i problemi con una descrizione comando in modalità Controllo e seleziona i colori suggeriti dal Selettore colori per correggere il rapporto di contrasto.
• Emula carenze visive. Osserva il tuo sito per come viene visto dagli utenti.

Scopri il testo a basso contrasto

Per scoprire testo con basso contrasto:

1. Apri DevTools nella pagina. In questo tutorial puoi utilizzare questa pagina demo.

2. Ottieni un elenco di tutti i problemi di contrasto utilizzando uno dei tre riquadri:

   • Panoramica di CSS
   • (Anteprima) Problemi
   • Lighthouse

Contrastare i problemi nel riquadro Panoramica CSS

Per ottenere una panoramica:

1. Apri Panoramica CSS.
2. Fai una panoramica.
3. Apri la sezione Colori, scorri fino a Problemi di contrasto e fai clic su un problema, se presente.

4. Nella tabella Problemi di contrasto, passa il mouse sopra un elemento e fai clic sul link accanto.

   

5. Risolvi il problema come descritto nella sezione Correggere un testo a basso contrasto.

(Anteprima) Problemi di contrasto nella scheda Problemi

Nota: questa è una funzionalità di anteprima disattivata per impostazione predefinita.

Per visualizzare un elenco dei problemi:

1. Attiva la segnalazione dei problemi di contrasto nella scheda Problemi:
   1. Apri Impostazioni > Sperimentale.
   2. Nella barra dei filtri, cerca contrast issue.
   3. Seleziona Attiva la segnalazione automatica dei problemi di contrasto tramite il riquadro Problemi.
   4. Fai clic su Ricarica DevTools nel prompt in alto.
2. Apri la scheda Problemi.

3. Espandi i problemi di contrasto rilevati da DevTools, quindi espandi la tabella degli elementi e fai clic su un link accanto all'elemento.

   

4. Risolvi il problema come descritto nella sezione Correggere un testo a basso contrasto.

Confrontare i problemi in un report Lighthouse

Per eseguire un rapporto:

1. In DevTools, apri Altre schede > Lighthouse.
2. Genera un report Lighthouse con le seguenti impostazioni:
   • Modalità: navigazione (predefinita)
   • Categorie: Accessibilità
   • Dispositivo: computer
3. Fai clic su Analizza caricamento pagina e attendi che Lighthouse generi il report.
4. Scorri verso il basso fino alla sezione Contrasto e, nell'elenco degli elementi, fai clic su un link a un elemento interessato.
5. Risolvi il problema come descritto nella sezione Correggere un testo a basso contrasto.

Correggi testo a basso contrasto

Per risolvere un problema a basso contrasto:

1. Individua un problema di contrasto e fai clic su un link all'elemento interessato nel riquadro Panoramica di CSS, nella scheda Problemi o nel report Lighthouse. DevTools apre il riquadro Elementi e seleziona l'elemento corrispondente. Ad esempio, in questa pagina demo, il primo elemento interessato è h1.line1.

2. Fai clic su Ispeziona nell'angolo in alto a destra di DevTools e passa il mouse sopra l'elemento nell'area visibile. DevTools mostra una descrizione comando per questo elemento.

   

   Osserva il simbolo di avviso accanto al valore del rapporto di contrasto nella descrizione comando. Il rapporto di contrasto misura la differenza di luminosità tra i colori di primo piano (colore del testo) e di sfondo.

3. Apri il selettore colori accanto alla dichiarazione relativa al colore del testo dell'elemento e, nel selettore colori, espandi la sezione Rapporto di contrasto.

   

   Il selettore colori indica che il rapporto di contrasto non è conforme ai livelli AA o AAA delle linee guida di WebAIM.

4. Fai clic sul pulsante Usa il colore suggerito accanto al livello AAA. Il Selettore colori applica il colore del testo alle linee guida sul rapporto di contrasto.

   

5. In alternativa, per selezionare un colore manualmente, puoi trascinare il cerchio nell'anteprima delle tonalità. Per rimanere all'interno del livello AA o AAA, scegli un colore rispettivamente sotto la linea superiore o inferiore.

   

6. Allo stesso modo, risolvi tutti i problemi di contrasto riscontrati nel riquadro Panoramica del CSS, nella scheda Problemi o nel report Lighthouse.

Salva le modifiche

Per salvare le modifiche apportate in DevTools:

• Copia tutte le modifiche CSS contemporaneamente e incollale nel codice
• Valuta la possibilità di configurare un'area di lavoro che consenta a DevTools di salvare i file direttamente nelle tue origini.

Passaggi successivi

Scopri di più:

• Imparare a conoscere l'accessibilità in generale
• In particolare, l'accessibilità di colore e contrasto