Share
Uno degli aspetti più importanti della creazione di siti Web accessibili è la garanzia di avere un testo leggibile. A sua volta, creare testo leggibile significa assicurarsi di avere un adeguato contrasto cromatico tra i colori del testo e i colori dello sfondo.
Ad esempio, dai un'occhiata al testo viola su sfondo bianco dalla homepage di Tuts +. Questo livello di contrasto è tutto buono:
Esempio di un buon rapporto di contrasto del testo Ma se rendiamo il testo più chiaro, possiamo raggiungere rapidamente un punto in cui il contrasto è troppo basso e diventa troppo difficile da leggere:
Lo stesso testo rettificato ora presenta un rapporto di contrasto errato Questo potrebbe essere un concetto relativamente semplice, ma garantire un sufficiente contrasto nella pratica può effettivamente essere un po 'complicato. A volte il contrasto dei colori può sembrare bello, ma in realtà potrebbe non essere all'altezza. Quindi, come possiamo essere certi che i nostri livelli di contrasto cromatico siano compatibili con l'accessibilità? È qui che Chrome Dev Tools può dare una mano.
Questo tutorial fa parte dell'accessibilità Web: la Guida completa all'apprendimento, in cui abbiamo raccolto una serie di tutorial, articoli, corsi e ebook, per aiutarti a capire l'accessibilità web dall'inizio.
Noterai negli screenshot qui sopra che vediamo il selettore di colori di Chrome Dev Tools. Se guardi da vicino puoi anche vedere che ci sono alcune informazioni aggiuntive in quel selettore di colori, come la visualizzazione di un punteggio del rapporto di contrasto, che aiuta a dare un feedback sulle scelte di colore. Questo fa parte degli strumenti di accessibilità aggiunti di recente in Chrome: diamo un'occhiata e vediamo come funziona.
Nota: Potresti vedere alcune istruzioni sul Web che dicono che devi abilitare "Esperimenti sviluppatore" per utilizzare queste funzioni di controllo del contrasto del colore, ma non è più così. La funzionalità è ora integrata direttamente in Chrome e Chromium.
Inizia aprendo gli strumenti di Chrome / Chromium Dev e selezionando qualsiasi elemento di testo nel tuo codice HTML. Quindi, nel stili scheda, individuare il colore proprietà, e alla sua destra fa clic sul piccolo campione di colore per aprire lo strumento di selezione.
Seleziona un elemento di testo e fai clic sul quadrato colorato per iniziare Nell'area che ho evidenziato con un quadrato rosso sotto vedrai il punteggio del rapporto di contrasto di 5,00 che questo elemento di testo è stato dato. Questo punteggio viene rilevato rilevando il colore dell'elemento di sfondo e confrontandolo con il colore del testo.
Noterai inoltre che ci sono due segni di spunta verdi accanto al punteggio, a indicare che questo rapporto di contrasto rientra nei parametri accettati per l'accessibilità.
Ottenere il segno di approvazione sul rapporto di contrasto Questo punteggio rapporto di base è utile, ma per accedere a tutti gli strumenti di contrasto del colore, fare clic sulla freccia rivolta verso il basso a destra del punteggio di contrasto. Verrà visualizzato un suggerimento con l'etichetta Mostra di più quando passi il mouse su di esso.
Espansione degli strumenti per ottenere maggiori informazioni sul contrasto di colore Con questa sezione espansa otteniamo alcune informazioni aggiuntive. Qui vedrai i punteggi di contrasto ideali che dovresti provare a raggiungere, con numeri più alti che rappresentano un contrasto più forte. Un punteggio compreso tra 3.0 e 4.5 è rappresentato come "AA" ed è considerato il minimo, mentre 4.5 o superiore è rappresentato come "AAA" ed è ideale.
Ora vediamo i punteggi di contrasto a cui puntare e una linea "sicura" sul selettore di colori Noterai inoltre che una volta espansi gli strumenti di contrasto del colore completo, viene visualizzata una linea lungo la parte superiore del selettore dei colori. Questa è la linea di demarcazione tra i colori del testo che sono almeno classificati "AA" e quelli che non soddisfano gli standard.
Nota: puoi arrivare abbastanza vicino alla linea e passare da una valutazione "AAA" a "AA", rimanendo sopra il punteggio di 3.0 ma passando sotto 4,5:
Avvicinarsi alla linea è ancora ok, anche se non è l'ideale Qualunque cosa al di sopra della linea, tuttavia, verrà contrassegnata con simboli di avviso rossi per indicare che la combinazione di colori pone un problema di accessibilità:
Attraversa la linea e perdi il tuo punteggio di contrasto AA / AAA Puoi anche spostare il cursore alfa, situato sotto il cursore della tonalità, e la linea "sicura" si sposterà per tenere conto della maggiore trasparenza:
Spostando il cursore alfa si sposta anche la linea "sicura" Un'altra cosa a cui prestare attenzione è che il lato della linea su cui si vuole far cadere il colore del testo può invertirsi a seconda del colore dello sfondo. Se il tuo testo è su uno sfondo scuro, vorresti che il colore del tuo testo appaia sopra la linea. Se il testo è su uno sfondo chiaro, il suo colore dovrebbe cadere sotto la linea.
Di seguito vediamo un esempio di questa inversione, con uno sfondo scuro nell'immagine a sinistra e uno sfondo chiaro nell'immagine a destra. Notate che c'è anche un'anteprima del testo e dei colori di sfondo insieme: cercate il Aa all'interno di un cerchio, sotto il Mostra di più interruttore:
A sinistra, il testo di colore chiaro su uno sfondo scuro dovrebbe avere il suo colore sopra la linea. A destra, il testo di colore scuro su uno sfondo chiaro dovrebbe avere il suo colore sotto la linea. Questi strumenti di controllo del contrasto del colore in Chrome e Chromium renderanno notevolmente più semplice garantire la leggibilità durante il processo di progettazione. Tutto quello che dobbiamo fare è un controllo rapido su ciascuno dei nostri colori di testo, utilizzare il selettore dei colori per modificare se necessario, quindi integrare i nuovi colori nel nostro codice.
Questo è un passo in avanti per rendere il web un posto fantastico per tutti!
Accentsconagua