Una panoramica di tre strumenti e tecniche per testare e verificare il contrasto di colore accessibile del tuo design.
Supponiamo che tu abbia del testo su uno sfondo chiaro, come questo:
Sebbene tutti gli esempi possano essere leggibili per te, non è così per tutti.
Il contrasto di colore accessibile è una pratica che garantisce che il testo sia leggibile per tutti. A volte testare il contrasto è facile, altre volte è molto difficile. Al termine di questo post, avrai tre nuovi strumenti e tecniche per ispezionare, correggere e verificare il contrasto del tuo web design, in modo da poter affrontare gli scenari più difficili.
WCAG e contrasto di colore
La Web Accessibility Initiative del W3C fornisce strategie, standard e risorse per garantire che internet sia accessibile al maggior numero possibile di persone. Le linee guida alla base di questi standard sono chiamate Linee guida per l'accessibilità dei contenuti web (WCAG). L'ultima versione stabile, WCAG 2.1, copre un importante requisito di accessibilità: il contrasto minimo.
La relazione tra due colori nelle WCAG 2.1 è descritta dal loro rapporto di contrasto, ovvero il numero che si ottiene confrontando la luminanza di due colori. La luminanza è un modo per descrivere quanto un colore è vicino al nero (0%) o al bianco (100%). Le WCAG definiscono alcune regole e algoritmi di calcolo relativi al rapporto di contrasto necessario per rendere il web accessibile. Tuttavia, esistono problemi noti con questo calcolo. Alla fine verrà adottato un modo ancora più affidabile, ma, al momento, le WCAG sono il meglio che abbiamo.
Quali sono le regole?
Un rapporto di contrasto più elevato viene valutato con un numero più alto, ad esempio 4,5 o 7 anziché 3. Per acquisire maggiore familiarità con la tabella dei punteggi, consulta lo strumento di controllo del contrasto di Polypane.
Test del contrasto tra i colori
Ora che sappiamo cosa stiamo cercando, come facciamo a testarlo? Ecco tre strumenti senza costi per aiutarti a ispezionare, correggere e misurare il contrasto del tuo sito web. Verranno illustrati i punti di forza e di debolezza di ciascuno, in modo che tu possa testare con sicurezza l'accessibilità dei colori e dei contenuti del tuo sito in diversi modi.
- Pika
Un'app per MacOS, l'unica in grado di mostrare il contrasto di qualsiasi colore sull'intero schermo, i colori sui gradienti, i colori con trasparenza e altro ancora. L'intent è esplicito, gli utenti scelgono manualmente i pixel da confrontare. Un po' meno automatizzato, ma con un enorme vantaggio in termini di funzionalità. - VisBug
Un'estensione cross-browser, in grado di mostrare più di un overlay di contrasto alla volta, ma come DevTools, a volte non è in grado di rilevare l'intent. - Chrome DevTools
DevTools è integrato in Chrome e offre vari modi per ispezionare, correggere ed eseguire il debug dei problemi relativi ai colori, ma presenta dei limiti quando si tratta di ispezionare gradienti e colori semitrasparenti e a volte non è in grado di rilevare l'intent.
Pika (applicazione macOS)
Se DevTools o VisBug non riescono a valutare correttamente il contrasto, ad esempio quando devi testare un colore al di fuori del browser o quando sono coinvolti trasparenza o gradienti, Pika è qui per aiutarti. Pika ha accesso a ogni pixel dello schermo perché è uno strumento di sistema e non uno strumento web.
Ciò significa anche che la UX per l'utilizzo di Pika è diversa da quella di DevTools o VisBug. DevTools e VisBug fanno del loro meglio per mostrare i colori del testo e dello sfondo dal DOM del browser, mentre i colori confrontati da Pika vengono scelti manualmente da qualsiasi punto dello schermo. In questo modo, Pika ha un maggiore controllo e si aprono alcuni casi d'uso aggiuntivi:
- Confrontare due colori qualsiasi, indipendentemente dal fatto che si trovino o meno nel browser. Se puoi vederli sullo schermo, puoi testarli.
- Confronto dei colori con trasparenza.
- Confronto dei colori all'interno dei gradienti.
- Confronto di colori che utilizzano modalità di fusione, come mix-blend-mode in CSS.
Confronto di due colori qualsiasi
Confronta il testo con un colore di sfondo:
Confronta i colori del tratto e del riempimento della grafica vettoriale:
Confronto dei colori con trasparenza
Confronta il colore del testo con una serie di pixel di esempio dello sfondo. In questo caso, il grigio più chiaro dell'effetto vetro smerigliato viene utilizzato come colore di confronto dello sfondo.
Confronto dei colori con i gradienti
Confronta il testo su un gradiente o su un'immagine. In questo caso, la L di "Lasso" viene confrontata con l'azzurro dell'immagine:
VisBug
VisBug è uno strumento ispirato a FireBug che consente a designer e sviluppatori di ispezionare visivamente, eseguire il debug e giocare con il design del loro sito web. È stato progettato per avere una barriera all'ingresso inferiore rispetto a Chrome DevTools, emulando la UI e la UX degli strumenti di progettazione che le persone hanno imparato a conoscere e amano utilizzare.
Prova VisBug o installalo su Chrome, Firefox, Edge, Brave o Safari.
Uno degli strumenti offerti è lo strumento Ispezione accessibilità.
Ispeziona i browser (anche su dispositivi mobili)
Dopo aver fatto clic sullo strumento Ispezione accessibilità, le informazioni sull'accessibilità di qualsiasi elemento su cui l'utente posiziona il puntatore o su cui si sposta con la tastiera verranno visualizzate nel tooltip. Questo suggerimento include confronti tra i colori di sfondo e di primo piano rilevati.
Ispeziona uno o più elementi
DevTools può esaminare un singolo abbinamento di colori o generare un report di tutti gli abbinamenti di colori nella pagina, ma VisBug offre un buon compromesso consentendo più abbinamenti di colori. Fai clic su un elemento e il tooltip rimarrà nella stessa posizione. Tieni premuto Maiusc e continua a fare clic su altri elementi. Tutti i tooltip rimarranno invariati:
Questo è particolarmente importante per il design basato su componenti, in cui più parti di un componente devono superare i punteggi del rapporto di contrasto. Questo metodo consente di visualizzare contemporaneamente tutte le parti dei componenti. È ideale anche per le revisioni dei progetti.
Chrome DevTools
Se hai installato Chrome, hai già a disposizione molti strumenti di test del contrasto:
- Selettore colori
- Tooltip di ispezione
- Panoramica CSS
- Lighthouse
- Console JS
- Strumenti di emulazione del daltonismo
- Emulazione della preferenza di contrasto dei colori del sistema
- Esperimento APCA WCAG 3.0
Il selettore colori di Chrome DevTools
Nel riquadro Stili di Chrome DevTools del riquadro Elementi, i valori dei colori avranno un piccolo campione di colore quadrato visivo accanto. Se fai clic su questo campione, vedrai lo strumento selettore colori. Se possibile, al centro dello strumento verrà mostrato il contrasto del colore rispetto a uno sfondo o a un primo piano.
Nell'esempio seguente, il selettore colori viene aperto per un valore di colore della proprietà personalizzata. Il punteggio del rapporto di contrasto è 15,79 e presenta due segni di spunta verdi, che indicano che il punteggio supera i requisiti AA e AAA delle WCAG 2.1:
Correzione automatica del selettore colori
Vedere il punteggio mentre scegli i colori è utile, ma Chrome DevTools ha una funzionalità aggiuntiva per la correzione automatica. Quando il selettore colori segnala un punteggio di contrasto di colore accessibile non superato, può essere espanso per mostrare i target di punteggio AA e AAA, oltre a uno strumento contagocce. Accanto ad AA e AAA sono presenti dei campioni e un'icona di aggiornamento che, se selezionata, troverà il colore più vicino che supera il test:
Se non hai particolari esigenze in fatto di colori, la funzionalità di correzione automatica è un ottimo modo per soddisfare le linee guida sull'accessibilità senza dover lavorare troppo per raggiungere l'obiettivo.
Tooltip di ispezione
Lo strumento di selezione degli elementi ha una funzionalità speciale durante il passaggio del mouse sulla pagina che segnala informazioni generali su carattere, colore e accessibilità. Lo strumento di selezione degli elementi è l'icona a sinistra nello screenshot seguente. È la casella con un cursore a forma di freccia
nell'angolo in basso a destra. Può essere selezionato anche utilizzando il tasto di scelta rapida
Control+Shift+C (o Command+Shift+C su MacOS).
Una volta attivata, l'icona diventa blu e, se passi il mouse sopra un elemento della pagina, viene visualizzato il seguente tooltip di ispezione rapida:
A differenza del selettore colori, che richiede di trovare il campione di colore nel riquadro Stili, questo strumento ti consente di spostarti sulla pagina per visualizzare i punteggi di contrasto. Come il selettore colori, può mostrare un solo punteggio di contrasto alla volta.
Bump bump 'til you pass 🎶
Spesso esamino un abbinamento di colori con questo strumento di ispezione rapida e scopro che non raggiunge il rapporto richiesto. Anziché utilizzare la funzionalità di correzione automatica del selettore colori (perché sono pignolo), modifico i canali dei colori nel CSS e osservo finché non supero il rapporto di cui ho bisogno. Chiamo questo processo "bump bump til you pass" perché aumento i numeri dei canali di colore finché non superano le WCAG 2.1.
I passaggi sono i seguenti e devono essere eseguiti nell'ordine esatto:
- Imposta la selezione della tastiera all'interno di un colore nel riquadro Stili.
- Attiva lo strumento Ispeziona elemento con la scorciatoia da tastiera
Control+Shift+C(oCommand+Shift+Csu MacOS). - Posiziona il cursore del mouse sopra un target.
- Premi i tasti Su/Giù sulla tastiera per modificare i numeri nel valore del colore.
Questo funziona perché il valore dello stile CSS ha ancora la selezione della tastiera, mentre il mouse ti consente di puntare su un target. Assicurati di non fare clic sul target, altrimenti lo stato attivo si sposterà dall'area del valore del colore e non potrai più spostare i valori finché non lo ripristinerai.
Panoramica CSS
Fino a questo momento, Chrome DevTools ha fornito modi per esaminare un abbinamento di colori alla volta, ma la panoramica CSS può eseguire la scansione dell'intera pagina e presentare tutti gli abbinamenti non accessibili contemporaneamente:
Scopri di più su questa funzionalità in questo post Panoramica CSS: identifica i potenziali miglioramenti CSS o guarda Jecelyn Yeen su YouTube nella serie Suggerimenti di DevTools che ti insegna come identificare i potenziali miglioramenti CSS con il riquadro Panoramica CSS.
Faro
Lighthouse è un altro strumento di controllo in Chrome DevTools. Può eseguire la scansione della pagina e segnalare abbinamenti di colori non accessibili. Contiene piccoli screenshot di ogni abbinamento di colori da esaminare, con l'indicazione di quelli che superano o meno il test. Eventuali combinazioni non riuscite influiranno negativamente sul tuo punteggio Lighthouse.
Ecco come possono apparire questi risultati:
La console JS
Forse tutti gli strumenti elencati finora non sono disponibili nella tua località. Forse il tuo ambiente di lavoro (per tutto il giorno) è JavaScript. Ecco un esperimento da provare. Il riquadro Problemi della console può segnalare costantemente eventuali problemi di accessibilità del contrasto di colore durante la creazione. Attiva la funzionalità in Impostazioni > Esperimenti, come mostrato di seguito:
Poi apri il riquadro Problema e controlla se ha rilevato qualcosa. In questo caso, possono avere questo aspetto:
Emulazione daltonismo
A proposito di contrasto di colore e di garantire abbinamenti di colori accessibili, vale la pena sottolineare lo strumento di emulazione delle carenze visive. In questo modo, i colori o l'aspetto del tuo design cambieranno per mostrare i risultati di diverse varietà di daltonismo, dandoti l'opportunità di modificare il tuo design in modo che il colore non sia l'unico modo in cui la UX comunica con un utente.
Non è una best practice di accessibilità sicura utilizzare esclusivamente il colore per rappresentare le informazioni, ad esempio il rosso per il male e il verde per il bene. Alcune persone non vedono i verdi o i rossi allo stesso modo e questo strumento di emulazione ti aiuterà a sperimentarlo e a ricordarlo.
Emulazione delle preferenze di sistema per il contrasto di colore
Sempre più utenti modificano le impostazioni di contrasto nel proprio sistema operativo, il che consente loro di richiedere una personalizzazione del contrasto maggiore o minore nella UI. Il CSS può sfruttare questa impostazione, così come può fare con le preferenze del tema chiaro o scuro. Chrome DevTools offre la possibilità di emulare questa preferenza, in modo che i designer possano testare e adattare il design alla richiesta dell'utente senza attivare/disattivare l'impostazione dal sistema.
Prova WCAG 3.0 APCA
Un altro esperimento da provare è testare gli abbinamenti di colori con il sistema di punteggio sperimentale del rapporto di colore APCA. Attivato tramite Impostazioni > Esperimenti, sostituisce il sistema di rapporto WCAG 2.1 con un algoritmo di controllo del contrasto più recente e migliorato, consentendoti di visualizzare l'anteprima dei risultati mentre la proposta si avvicina a uno standard.
Una volta attivata, utilizza il tooltip di ispezione dei punti o il selettore colori per visualizzare il punteggio di abbinamento dei colori e verificare se è sufficiente:
Conclusione
Il contrasto dei colori è un elemento importante del puzzle per l'accessibilità sul web e il rispetto di questo principio rende il web più utilizzabile per il maggior numero di persone nelle situazioni più svariate. Ci auguriamo che questi tre strumenti ti aiutino a fare scelte cromatiche ottimali.