Rendere il sito web più leggibile

Sofia Emelianova
Sofia Emelianova

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

Utilizza DevTools per:

  • Scoprire i problemi di contrasto. Utilizza il riquadro Panoramica CSS, la scheda Problemi (anteprima) o un report Lighthouse per ottenere un elenco di tutti i problemi.
  • Risolvere i problemi di contrasto. Visualizza i problemi con una descrizione comando in modalità di ispezione e seleziona i colori suggeriti dal selettore dei colori per correggere il rapporto di contrasto.
  • Emula difetti alla vista. Guarda il tuo sito come lo vedono gli utenti.

Trovare testo a basso contrasto

Per trovare il testo con basso contrasto:

  1. Apri DevTools nella pagina. In questo tutorial puoi utilizzare questa pagina di demo.
  2. Visualizza un elenco di tutti i problemi di contrasto utilizzando uno dei tre riquadri:

Problemi di contrasto nel riquadro Panoramica CSS

Per avere una panoramica:

  1. Apri Panoramica CSS.
  2. Acquisisci 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.

    Elenco dei problemi di contrasto nella panoramica CSS.

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

(Anteprima) Problemi di contrasto nella scheda Problemi

Per visualizzare un elenco di 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. Attiva la segnalazione dei problemi di contrasto.
    4. Fai clic su Ricarica DevTools nella richiesta in alto.
  2. Apri la scheda Problemi.
  3. Espandi i problemi di contrasto rilevati da DevTools, poi espandi la tabella degli elementi e fai clic su un link accanto all'elemento.

    Tabella degli elementi con problemi di contrasto nella scheda Problemi.

  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 Più schede. Altre schede > Lighthouse.
  2. Genera un report Lighthouse con le seguenti impostazioni:
    • Modalità: Navigazione (predefinita)
    • Categorie: Accessibilità
    • Dispositivo: computer Report Lighthouse con impostazioni di navigazione, accessibilità e desktop.
  3. Fai clic su Esegui l'analisi del caricamento della 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. La sezione Contrasto del report Lighthouse con un elenco di elementi con problemi di contrasto.
  5. Risolvi il problema come descritto nella sezione Correggere il testo a basso contrasto.

Correggere il testo a basso contrasto

Per risolvere un problema di basso contrasto:

  1. Trova un problema di contrasto e fai clic su un link a un elemento interessato nel riquadro Panoramica CSS, nella scheda Problemi o nel report Lighthouse. Gli strumenti per sviluppatori aprono il riquadro Elementi e selezionano l'elemento corrispondente. Un elemento con un problema di contrasto selezionato nel riquadro Elementi. Ad esempio, in questa pagina dimostrativa, il primo elemento interessato è h1.line1.
  2. Fai clic su Ispeziona. Ispeziona nell'angolo in alto a destra di DevTools e passa il mouse sopra l'elemento nel viewport. DevTools mostra una descrizione comando per questo elemento.

    La descrizione comando mostra un segnale di avviso accanto al valore di contrasto.

    Nota il segno di avviso 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 del colore del testo dell'elemento e, nel selettore colori, espandi la sezione Rapporto di contrasto.

    La sezione Rapporto di contrasto del selettore colori.

    Il selettore di 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. Usa il colore suggerito accanto al livello AAA. Il selettore di colori applica il colore del testo conforme alle linee guida sul rapporto di contrasto.

    Il colore applicato è conforme alle linee guida.

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

    Scegliere una tonalità di colore sotto la linea di fondo per mantenere il livello AAA.

  6. Analogamente, risolvi tutti i problemi di contrasto rilevati con il riquadro Panoramica CSS, la scheda Problemi o il report Lighthouse.

Salva le modifiche

Per salvare le modifiche apportate in DevTools:

Passaggi successivi

Scopri di più: