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

Sofia Emelianova
Sofia Emelianova
GitHub

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

Chrome DevTools ti consente di rilevare tutti i problemi di contrasto a colpo d'occhio e di risolverli con un solo clic.

Guarda il video per scoprire come:

  • Visualizza i rapporti di contrasto nella descrizione comando della modalità di ispezione e i valori consigliati nel Selettore di colori.

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

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

    Le linee di rapporto di contrasto consigliate sono disponibili nell'anteprima delle tonalità del selettore di colori.

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

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

  • Emulazione di difetti alla vista per capire come appare la tua pagina per tutti gli utenti.

    Visione sfocata selezionata nella scheda Rendering ed emulata nel viewport.

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

Per scoprire di più, consulta: