Rendere il sito web più leggibile

Sofia Emelianova
Sofia Emelianova
GitHub

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

Utilizza DevTools per:

  • Scopri 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.
  • Risolvi i problemi di contrasto. Visualizza i problemi con una descrizione comando in modalità di ispezione e seleziona i colori suggeriti dal selettore colori per correggere il rapporto di contrasto.
  • Emula difetti alla vista. Guarda il tuo sito come lo vedono i tuoi utenti.

Scoprire il testo a basso contrasto

Per rilevare il testo a basso contrasto:

  1. Apri DevTools nella pagina.

  2. Elenca tutti i problemi di contrasto utilizzando uno dei tre riquadri:

Puoi sperimentare aprendo CodePen.

Problemi di contrasto nel riquadro Panoramica CSS

Per ottenere una panoramica:

  1. Apri Panoramica CSS.
  2. Acquisire una panoramica.
  3. Apri la sezione Colori, vai 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 ottenere un elenco dei problemi:

  1. Attiva la generazione di report sui problemi di contrasto nella scheda Problemi:
    1. Apri Impostazioni > Funzionalità sperimentali.
    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 di problemi di contrasto.
    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.

    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 Altre schede > Lighthouse.

  2. Genera un report Lighthouse con le seguenti impostazioni:

    • Modalità: navigazione (impostazione predefinita)
    • Categorie: accessibilità
    • Dispositivo: computer

    Report Lighthouse con impostazioni di navigazione, accessibilità e desktop.

  3. Fai clic su Analizza caricamento pagina e attendi che Lighthouse generi il report.

  4. Vai alla sezione Contrasto. Nell'elenco degli elementi, fai clic su un link a un elemento interessato.

    La sezione Contrasto del report Lighthouse con un elenco di elementi che presentano problemi di contrasto.

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

Risolvere il problema del 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. DevTools ti porta al riquadro Elementi e seleziona l'elemento corrispondente.

    Un elemento con un problema di contrasto selezionato nel riquadro Elementi.

    Ad esempio, nella nostra demo CodePen inaccessibile, 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 nella viewport. DevTools mostra una descrizione comando per questo elemento.

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

    Nota 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 del primo piano (colore del testo) e dello 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 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 all'interno del livello AA o AAA, scegli un colore sotto la linea superiore o inferiore, rispettivamente.

    Scegliere una tonalità di colore sotto la linea inferiore per rimanere al livello AAA.

  6. Allo stesso modo, correggi tutti i problemi di contrasto che hai riscontrato con il pannello Panoramica CSS, la scheda Problemi o il report Lighthouse.

Salva le modifiche.

Per salvare le modifiche apportate in DevTools:

Passaggi successivi

Scopri di più: