Rendere il sito web più leggibile

Sofia Emelianova

GitHub

Punto chiave: il testo a basso contrasto è il problema di accessibilità principale sul web. A febbraio 2022, l'83,9% delle prime milioni di home page presentava 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, soprattutto per gli utenti con problemi di vista. DevTools può rilevare automaticamente i problemi di basso contrasto e suggerire colori migliori per aiutarti a risolverli.

Utilizza DevTools per:

• Individuare i problemi di contrasto. Utilizza il riquadro Panoramica CSS, (anteprima) la scheda Problemi o un report Lighthouse per ottenere un elenco di tutti i problemi.
• Risolvi i problemi di contrasto. Visualizza i problemi con una descrizione comando in modalità di controllo e seleziona i colori suggeriti dal selettore colori per correggere il rapporto di contrasto.
• Emula carenze della vista. Esamina il tuo sito così come lo vedono gli utenti.

Scopri il testo a basso contrasto

Per individuare il testo a 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 CSS
   • (Anteprima) Problemi
   • Faro

Problemi di contrasto 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 il testo a basso contrasto.

(Anteprima) Problemi di contrasto nella scheda Problemi

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

Per ottenere un elenco dei problemi:

1. Attiva i report sui 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 messaggio in alto.
2. Apri la scheda Problemi.

3. Espandi i problemi di contrasto rilevati dagli strumenti 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 il testo a basso contrasto.

Problemi di contrasto 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 il testo a basso contrasto.

Correggi il testo a basso contrasto

Per risolvere un problema di basso contrasto:

1. Individua un problema di contrasto e fai clic su un link a un elemento interessato nel riquadro Panoramica di CSS, nella scheda Problemi o nel report Lighthouse. DevTools ti indirizza al 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 in primo piano (colore del testo) e quelli di sfondo.

3. Apri il Selettore colori accanto alla dichiarazione del 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 soddisfa i livelli AA o AAA delle linee guida WebAIM.

4. Fai clic sul pulsante Utilizza il colore suggerito accanto al livello AAA. Il selettore colori applica il colore del testo che rispetta le linee guida sul rapporto di contrasto.

   

5. In alternativa, per scegliere manualmente un colore, puoi trascinare il cerchio nell'anteprima delle sfumature. Per rimanere nel livello AA o AAA, scegli rispettivamente un colore sotto la riga superiore o AAA.

   

6. In modo simile, correggi tutti i problemi di contrasto riscontrati nel riquadro Panoramica dei 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 ai DevTools di salvare i file direttamente nelle tue origini.

Passaggi successivi

Scopri di più:

• Informazioni sull'accessibilità in generale
• Accessibilità di Colore e contrasto in particolare