Una panoramica di tre strumenti e tecniche per testare e verificare il contrasto di colore accessibile del tuo progetto.
Supponi di avere del testo su uno sfondo chiaro, come questo:
Sebbene tu possa leggere tutti gli esempi, questo non vale per tutti.
Il contrasto di colore accessibile è una pratica che garantisce che il testo sia leggibile da chiunque. A volte è facile testare il contrasto, altre volte davvero difficile. Alla fine di questo post avrai a disposizione tre nuovi strumenti e tecniche per ispezionare, correggere e verificare il contrasto del web design, in modo da affrontare gli scenari più difficili.
WCAG e contrasto di colore
Web Accessibility Initiative di W3C fornisce strategie, standard e risorse per garantire che internet sia accessibile al maggior numero di persone possibile. Le linee guida alla base di questi standard sono chiamate linee guida per l'accessibilità dei contenuti web o WCAG. L'ultima versione stabile, WCAG 2.1, soddisfa un requisito di accessibilità importante: il contrasto minimo.
La relazione tra due colori nelle WCAG 2.1 è descritta dal relativo rapporto di contrasto, ovvero dal numero ottenuto quando confronti la luminanza di due colori. La luminosità è 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 che deve essere necessario per rendere accessibile il web. Tuttavia, esistono problemi noti con questo calcolo. Alla fine verrà adottato un metodo ancora più affidabile, ma al momento le WCAG sono le migliori che abbiamo.
Quali sono le regole?
A un rapporto di contrasto più elevato viene assegnato un numero maggiore, ad esempio 4,5 o 7 anziché 3. Per saperne di più con la tabella dei punteggi, dai un'occhiata allo strumento Controllo del contrasto di Polipane.
Test del contrasto tra i colori
Ora che sappiamo cosa stiamo cercando, come lo proviamo? Ecco tre strumenti senza costi che ti aiuteranno a ispezionare, correggere e misurare il contrasto del tuo sito web. Verranno delineati 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 moltissimi modi.
- Pika
Un'app per MacOS in grado di mostrare in modo unico il contrasto di tutti i colori sull'intero schermo, i colori su gradienti, i colori con trasparenza e altro ancora. L'intenzione è esplicita, gli utenti scelgono manualmente i pixel da confrontare. Un po' meno automatizzato con un enorme guadagno di funzionalità. - VisBug
Un'estensione per più browser, in grado di mostrare in modo univoco più di un overlay di contrasto alla volta, ma, come DevTools, a volte non è in grado di rilevare l'intenzione. - Chrome DevTools
DevTools è integrato in Chrome ed è ricco di vari modi per ispezionare, correggere ed eseguire il debug dei problemi relativi ai colori, ma presenta delle carenze nell'ispezione dei gradienti e dei colori semitrasparenti e, a volte, non è in grado di rilevare l'intenzione.
Pika (applicazione macOS)
Se DevTools o VisBug non riescono a valutare correttamente il contrasto, ad esempio quando devi testare un colore all'esterno del browser o quando sono coinvolti trasparenza o gradienti, Pika è qui per aiutarti a risolvere il problema. Pika ha accesso a tutti i pixel sullo schermo perché è uno strumento di sistema.
Ciò significa anche che l'UX per l'utilizzo di Pika è diversa da 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. Questo offre a Pika maggiore controllo e apre alcuni casi d'uso aggiuntivi:
- Confrontando due colori a prescindere dal fatto che siano nel browser o meno, se vedi i colori sullo schermo, puoi provarli.
- Confronto dei colori con la trasparenza.
- Confronto di colori all'interno di 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 di tratto e riempimento della grafica vettoriale:
Confronto dei colori con la trasparenza
Confronta il colore del testo con vari pixel di esempio di sfondo. In questo caso, come colore di confronto per lo sfondo viene utilizzato il grigio più chiaro dell'effetto vetro smerigliato.
Confronto di colori con gradienti
Confronta il testo su una sfumatura o su un'immagine. Qui 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 utilizzare il design del loro sito web. Il suo scopo è avere una barriera di accesso più bassa rispetto a Chrome DevTools che emula l'UI e l'UX degli strumenti di progettazione che le persone conoscono e amano utilizzare.
Prova VisBug o installalo su Chrome, Firefox, Edge, Brave o Safari.
Uno degli strumenti disponibili è lo strumento Ispezione dell'accessibilità.
Esegui ispezioni su più browser (e anche sui dispositivi mobili)
Dopo aver fatto clic sullo strumento Controllo accessibilità, le informazioni sull'accessibilità verranno riportate nella descrizione comando per ogni elemento a cui punta l'utente o a cui viene indirizzato la tastiera. Questa descrizione comando include il confronto dei colori tra i colori in primo piano e di sfondo rilevati.
Ispezionane uno o più
DevTools può esaminare un singolo accoppiamento di colori o ottenere un report di tutti gli abbinamenti di colori nella pagina, ma VisBug offre una buona via di mezzo perché consente più abbinamenti di colori. Fai clic su un elemento e la descrizione comando rimarrà visibile. Tieni premuto Maiusc e continua a fare clic su altri elementi per visualizzare tutte le descrizioni comando:
Ciò è particolarmente importante per la progettazione basata sui componenti, in cui più parti di un componente devono superare i punteggi per il rapporto di contrasto. Questo metodo consente di visualizzare tutte queste parti componenti contemporaneamente. Ideale anche per le revisioni del design.
Chrome DevTools
Se hai installato Chrome, puoi disporre già di molti strumenti per il test del contrasto:
- Selettore colori
- Descrizione comando ispezione
- Panoramica CSS
- Faro
- Console JS
- Strumenti di emulazione per daltonici
- Emulazione della preferenza relativa al contrasto di colore di sistema
- Esperimento APCA WCAG 3.0
Selettore colori di Chrome DevTools
Nel riquadro Stili di Chrome DevTools del riquadro Elementi, accanto ai valori dei colori viene mostrato un campione di colore quadrato. Facendo clic su questo campione, vedrai il selettore colori. Se possibile, la parte centrale dello strumento mostra il contrasto del colore rispetto a uno sfondo o in primo piano.
Nell'esempio seguente, il selettore colori viene aperto per un valore colore di una proprietà personalizzata. Il punteggio del rapporto di contrasto è riportato come 15,79 e presenta due segni di spunta verdi, che indicano che il punteggio soddisfa i requisiti AA e WCAG 2.1 AAA:
Correzione automatica con selettore colori
È utile vedere il punteggio quando si scelgono i colori, ma Chrome DevTools ha una funzionalità aggiuntiva per la correzione automatica. Quando il selettore colori segnala un punteggio di contrasto di colore non accessibile, può essere espanso per mostrare i target dei punteggi AA e AAA, oltre a uno strumento contagocce. Accanto ad AA e AAA ci sono dei campioni e un'icona di aggiornamento che, se selezionata, troveranno il colore di passaggio più vicino a te:
Se i colori non ti piacciono, la funzionalità di correzione automatica è un ottimo modo per rispettare le linee guida sull'accessibilità e non lavorare troppo per svolgere l'attività.
Descrizione comando 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ò anche essere selezionato utilizzando il tasto di scelta rapida
Control+Shift+C (o Command+Shift+C su MacOS).
Una volta attivata, l'icona diventerà blu e, puntando a un qualsiasi elemento della pagina, verrà visualizzata la seguente descrizione comando di ispezione rapida:
Invece dello strumento di selezione dei colori, che richiede di trovare il campione di colore nel riquadro Stili, con questo strumento puoi semplicemente puntare il dito nella pagina per visualizzare i punteggi di contrasto. Come nel caso del selettore colori, può mostrare un solo punteggio di contrasto alla volta.
Non fermarti, sfiorati 🎶
Spesso controllo un abbinamento di colori con questo strumento di ispezione rapida e lo trovo appena senza superare il rapporto richiesto. Invece di usare la funzionalità di correzione automatica del selettore colori (perché sono molto esigente), inserisco i canali dei colori nel CSS e lo guardo finché non riesco a ottenere le proporzioni che mi servono. Lo chiamo "bump bump til you pass", perché sto spingendo i numeri dei canali colorati fino a quando non superano la procedura WCAG 2.1.
I passaggi sono i seguenti e devono essere eseguiti nell'ordine esatto:
- Imposta lo stato attivo della tastiera all'interno di un colore nel riquadro Stili.
- Attiva lo strumento di ispezione elementi con la scorciatoia da tastiera
Control+Shift+C(oCommand+Shift+Csu MacOS). - Punta su un obiettivo.
- Premi i tasti su/giù sulla tastiera per cambiare i numeri nel valore del colore.
Questo perché il valore dello stile CSS è ancora impostato sullo stato attivo della tastiera, mentre il mouse consente di puntare il dito su un target. Assicurati di non fare clic sul target o di spostare lo stato attivo dall'area dei valori del colore e di non spostare più i valori finché non riorienterai la tua attenzione.
Panoramica CSS
Fino a questo punto, Chrome DevTools ha fornito la possibilità di esaminare un'associazione di colori alla volta, ma la Panoramica di CSS può eseguire la scansione dell'intera pagina e presentare contemporaneamente tutte le accoppiamenti non accessibili:
Per saperne di più su questa funzionalità, consulta il post Panoramica CSS: identifica potenziali miglioramenti CSS o guarda Jecelyn Yeen su YouTube nella sua serie I suggerimenti per DevTools ti insegnano come identificare potenziali miglioramenti CSS con il riquadro Panoramica di CSS.
Faro
Lighthouse è un altro strumento di controllo di Chrome DevTools. Può eseguire la scansione della pagina e segnalare abbinamenti di colori inaccessibili. Contiene piccoli screenshot di ogni abbinamento di colori che dovrai esaminare, superare e mancare. Qualsiasi combinazione errata influirà negativamente sul punteggio Lighthouse.
Ecco il possibile aspetto di questi risultati:
Console JS
Magari tutti gli strumenti elencati finora non sono esattamente dove ti trovi. Forse dove ti trovi (tutto il giorno) è JavaScript. Ecco un esperimento da provare. Il riquadro Problemi della console può segnalare costantemente eventuali problemi di accessibilità relativi al contrasto di colore durante la creazione. Attiva la funzionalità in Impostazioni > Esperimenti, come illustrato di seguito:
Quindi, apri il riquadro Problema e controlla se sono state rilevate eventuali scoperte. Se è così, potrebbero avere il seguente aspetto:
Emulazione per daltonici
Per quanto riguarda il contrasto cromatico e la garanzia di abbinamenti di colori accessibili, vale la pena sottolineare lo strumento di emulazione delle carenze visive. Ciò modificherà i colori o l'aspetto del tuo design per dimostrare i risultati di diverse varietà di daltonismo. In questo modo, potrai modificare il design in modo che il colore non sia l'unico modo in cui l'UX comunica con un utente.
Usare esclusivamente il colore per rappresentare le informazioni non è una pratica sicura di accessibilità, ad esempio il rosso per male e il verde per sempre. Alcune persone non vedono lo stesso colore verde o rosso e questo strumento di emulazione ti aiuterà a provarlo e a ricordarlo.
Emulazione delle preferenze di sistema per il contrasto di colore
Sempre più spesso gli utenti cambiano le impostazioni del contrasto nel loro sistema operativo, offrendo loro la possibilità di richiedere una personalizzazione minore o maggiore del contrasto nell'interfaccia utente. Il CSS può attingere a questa impostazione, proprio come con le preferenze per il tema chiaro o scuro. Chrome DevTools offre la possibilità di emulare questa preferenza in modo che i progetti possano testare e adattarsi alla richiesta dell'utente senza disattivare l'impostazione dal sistema.
Prova WCAG 3.0 APCA
Un altro esperimento che puoi provare è testare le combinazioni di colori con il sistema sperimentale di punteggio per il rapporto cromatico ACA. Attivata in Impostazioni > Esperimenti, sostituisce il sistema di rapporti WCAG 2.1 con un algoritmo di controllo del contrasto nuovo e migliorato, che ti consente di visualizzare l'anteprima dei risultati man mano che la proposta si avvicina a uno standard.
Dopo averla attivata, utilizza la descrizione comando di ispezione dei punti o il selettore colori per visualizzare il punteggio di accoppiamento dei colori e verificare se supera:
Conclusione
Il contrasto cromatico è un elemento importante del puzzle per l'accessibilità sul web e il suo rispetto rende il web più utilizzabile per il maggior numero di persone nelle più svariate situazioni. Speriamo che questi tre strumenti ti aiutino a scegliere i colori migliori.