Suggerimenti per DevTools: scoprire e correggere il testo a basso contrasto

Sofia Emelianova
Sofia Emelianova

Il testo a basso contrasto è il principale problema di accessibilità sul Web. A febbraio 2022, l'83,9% delle principali home page presentava questo problema. Per saperne di più, consulta il report WebAIM Million 2022.

Chrome DevTools consente di individuare all'istante tutti i problemi di contrasto e risolverli con un clic su un pulsante.

Guarda il video per scoprire come:

  • Visualizza i rapporti di contrasto nella descrizione comando della modalità ispettore e i valori dei rapporti consigliati nel selettore colori.

    I rapporti di contrasto sono disponibili in una descrizione comando, con un selettore colori per misurare il rapporto di colori alternativi. È disponibile una classificazione AA e AAA della razione.

  • Nel Selettore colori, seleziona i colori suggeriti o scegli un colore sotto le linee del rapporto di contrasto per rispettare le linee guida di WebAIM.

    Nell'anteprima delle sfumature del selettore colori sono disponibili linee per il rapporto di contrasto consigliato.

  • Scopri tutti i problemi di contrasto nei riquadri Panoramica dei CSS e Problemi (anteprima).

    Problemi di contrasto elencati nel riquadro Panoramica CSS e nella scheda Problemi.

  • Emula difetti alla vista per capire come appare la tua pagina a tutti i tuoi utenti.

    Vista sfocata selezionata nella scheda Rendering ed emulata nell'area visibile.

Per un'esperienza di apprendimento più pratica, guarda il tutorial Rendere più leggibile un sito web.

Per saperne di più, consulta: