1. Introduzione
Il cattivo contrasto è il principale problema di accessibilità sul Web. Scopriamo di più su come DevTools potrebbe aiutarti a comprendere, individuare e risolvere questi problemi.
Cosa scoprirai
- Comprensione del problema di basso contrasto
- Come trovare testo a basso contrasto
- Come correggere il testo a basso contrasto
Che cosa ti serve
- Un computer funzionante e un Wi-Fi realistico
- Chrome 87 e versioni successive.
Cosa dovrai fare
Correggi i problemi di basso contrasto di una pagina web.
2. Inizia
Fai clic sul seguente link per aprire la pagina con testo a basso contrasto:
Dopodiché apri la pagina Chrome DevTools.
3. Comprensione del problema di basso contrasto
Approssimativamente, 1 persona su 20 soffre di una carenza di vista visiva (nota anche come termine meno preciso "cieco colore"). In caso di queste difficoltà, è più difficile distinguere i vari colori in modo da amplificare i problemi di contrasto.
Ad esempio, in qualità di sviluppatore con una visione regolare, potresti notare che il testo della pagina ti sembra visivamente a posto.
In alcuni casi potresti comunque riuscire a leggere il testo a basso contrasto, ma le persone ipovedenti non dispongono di tale privilegio.
DevTools può aiutarti a comprendere queste disabilità visive permettendoti di simulare le difetti alla vista del colore sulla tua app web.
Apri il menu dei comandi. Inizia a digitare Rendering e seleziona Show Rendering. Nella scheda Rendering, scorri verso il basso fino all'opzione Emula decisioni relative alla visione.
DevTools può emulare la sfocatura e i seguenti tipi di difetti relativi alla visione dei colori:
- Protanopia: l'impossibilità di percepire la luce rossa.
- Deuteranopia: l'impossibilità di percepire la luce verde.
- Tritanopia: l'impossibilità di percepire una luce blu.
- Acromatopsia: l'impossibilità di percepire qualsiasi colore tranne le tonalità di grigio (estremamente raro).
Prova a selezionare diverse opzioni e prova a utilizzare la pagina. Ad esempio, prova a selezionare Protanopia. Il contrasto di colore del testo è ancora peggio: è quasi illeggibile.
4. Come trovare testo a basso contrasto
Esistono diversi modi per scoprire testo a basso contrasto.
Descrizione comando modalità Ispezione
La descrizione comando Modalità ispezione visualizzata nella parte superiore della pagina web mostra il rapporto di contrasto degli elementi di testo.
Ad esempio, fai clic sull'icona Ispeziona nell'angolo in alto a sinistra di DevTools per controllare la parola "molto". Il rapporto del contrasto del testo è mostrato nella descrizione comando. L'icona del punto esclamativo accanto al rapporto indica che il rapporto di contrasto è basso.
.
Rapporto del contrasto nel selettore colori
In alternativa, puoi visualizzare il rapporto di contrasto nel selettore dei colori.
Ispeziona la parola "molto". Nel riquadro Stili, fai clic sull'anteprima del colore della proprietà CSS color. Il rapporto del contrasto è mostrato nel selettore colori. L'icona di divieto rossa indica che il rapporto di contrasto è basso.
.
[Sperimentale] Rileva i problemi di basso contrasto a livello di pagina con il riquadro Panoramica CSS
È noioso esaminare ogni elemento della pagina per verificare il rapporto del contrasto. Il riquadro Panoramica CSS può aiutarti a rilevare tutti i testi a basso contrasto della tua pagina.
Dopo aver acquisito la panoramica CSS, scorri verso il basso fino alla sezione Colori per visualizzare tutti i problemi di contrasto. Fai clic su uno dei colori, ad esempio lo sfondo giallo con testo lime e DevTools mostrerà un elenco degli elementi che presentano il problema. Fai clic su un elemento dell'elenco per aprirlo nel riquadro Elementi.
5. Come correggere il testo a basso contrasto
DevTools fornisce suggerimenti per i colori per il testo a basso contrasto.
Linea di contrasto consigliata
Ispeziona la parola "molto". Nel riquadro Stili, fai clic sull'anteprima del colore della proprietà CSS color. Espandi la sezione Rapporto del contrasto.
DevTools fornisce le proporzioni AA e AAA per i rapporti di colore:
- AA: contrasto di colore soddisfatto consiglio minimo
- AAA: contrasto di colore rispettato migliorato consiglio.
Nel nostro esempio, 2 righe vengono visualizzate nel selettore visivo nella parte superiore del selettore colori. Dalla parte superiore:
- Prima riga: AA. Seleziona qualsiasi colore al di sotto di questa riga per soddisfare il consiglio minimo.
- Seconda riga: AAA. Seleziona qualsiasi colore al di sotto di questa riga per soddisfare il consiglio avanzato.
Fai clic sul colore e correggilo manualmente:
- 1 segno di spunta indica che l'elemento soddisfa il consiglio minimo.
- 2 segni di spunta indica che soddisfa il consiglio ottimizzato.
.
Suggerimenti per colori accessibili
DevTools suggerisce anche colori accessibili sia per AA che per AAA, facilitando il semplice clic e correzione.
Fai clic sul colore suggerito accanto al rapporto del contrasto per correggere il colore del testo.
.
Ora puoi provare a correggere tutti i testi a basso contrasto nella pagina e ripetere l'acquisizione della Panoramica CSS per verificare se tutti i problemi di contrasto sono stati risolti.
6. Complimenti!
Complimenti! Hai completato questo codelab.