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

Sofia Emelianova
Sofia Emelianova

Un testo a basso contrasto è il principale problema di accessibilità sul web. A febbraio 2022, l'83,9% dei principali milioni di home page ha avuto questo problema. Per saperne di più, consulta il report WebAIM Million 2022.

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

Guarda il video per scoprire come:

  • Visualizza i rapporti di contrasto nella descrizione comando della modalità di ispezione e i valori delle proporzioni 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 la 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.

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

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

    Contrasta i problemi elencati nel riquadro Panoramica CSS e nella scheda Problemi.

  • Emula carenze visive per comprendere come appare la pagina a tutti gli utenti.

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

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

Per saperne di più, consulta: