Articolo
Estrarre una palette di colori accessibile da un'immagine
Una fotografia o un asset di brand contiene spesso il seme di un sistema di colori completo. Estrarre quel seme, modellandolo in una palette utilizzabile e verificandola rispetto agli standard di accessibilità richiede tre passaggi distinti. Questo articolo li copre in ordine: come funziona l'estrazione della palette, come selezionare e regolare i colori per un uso pratico, come verificare il contrasto rispetto alle soglie WCAG e come individuare le coppie che si confondono per gli utenti con deficit di visione dei colori.
Come viene estratta una palette: campionamento dei pixel e quantizzazione del colore
Ogni immagine digitale è una griglia di pixel, ognuno con un valore di colore in uno spazio come RGB. Un estrattore di palette non ispeziona ogni pixel individualmente: una foto da 2 megapixel contiene 2 milioni di punti dati, che sarebbero lenti da elaborare e restituirebbero migliaia di sfumature leggermente diverse invece di un set utile. Invece, lo strumento campiona la griglia di pixel a intervalli regolari, raccogliendo un sottoinsieme rappresentativo. Quel sottoinsieme viene poi immesso in un algoritmo di quantizzazione del colore. L'approccio più comune raggruppa colori simili usando un metodo di clustering, a volte chiamato partizione median-cut o k-means. L'algoritmo inserisce ogni pixel campionato in uno di un numero fisso di bucket in base alla somiglianza del colore, poi calcola il colore medio di ogni bucket. Il risultato è un elenco ridotto, tipicamente da 4 a 16 colori, che insieme rappresentano le tonalità visive dominanti nell'immagine. I colori che compaiono solo in piccole aree isolate possono essere tralasciati, il che è un comportamento atteso piuttosto che un difetto.
Dai colori dominanti grezzi a una palette utilizzabile
L'output grezzo di un estrattore di palette è un elenco di colori classificati per frequenza, ma la frequenza da sola non fa una palette. Una fotografia di una foresta restituirà diversi verdi troppo simili da usare in un'interfaccia come accenti distinti. Il lavoro pratico consiste nel selezionare e regolare. Iniziare identificando un colore come principale: quello più distintivo e meno neutro. Tra i colori rimanenti, cercare al massimo due che contrastino con il principale e tra loro. Quelli diventano gli accenti. Tutto il resto, incluse le tonalità desaturate che l'estrattore spesso restituisce da ombre e mezzetinte, può servire come neutri per sfondi e bordi. Una volta definita questa struttura di base, sarà quasi certamente necessario regolare i singoli valori. Lo strumento color-converter permette di esaminare ogni colore in hex, RGB e HSL. HSL è particolarmente utile: è possibile mantenere costante la tonalità e modificare la luminosità o la saturazione per creare una famiglia più stretta o più ampia senza uscire dalla stessa famiglia di colori.
Verifica del contrasto: soglie WCAG per il testo leggibile
Una volta identificati i colori candidati per testo e sfondo, è necessario verificare se la combinazione è leggibile. Le Web Content Accessibility Guidelines (WCAG) definiscono un rapporto di contrasto per questo scopo. Il rapporto confronta la luminanza relativa di due colori: un valore di 1:1 significa nessun contrasto (stesso colore su stesso colore) e 21:1 è il massimo (nero su bianco). WCAG 2.1 Livello AA richiede un rapporto di almeno 4,5:1 per il testo normale del corpo e 3:1 per il testo grande (18pt o 14pt grassetto). Il Livello AAA imposta soglie più elevate di 7:1 e 4,5:1 rispettivamente. Non è necessario calcolare la luminanza a mano. Il punto fondamentale è che una coppia di colori che sembra corretta in buone condizioni di illuminazione può scendere sotto 4,5:1 sullo schermo, e la linea guida esiste precisamente per questo caso. Dopo aver estratto e regolato i colori, testare ogni coppia testo-su-sfondo che si prevede di usare. Un grigio medio-tono che si legge bene su bianco può fallire completamente su un beige chiaro dalla palette estratta.
Cecità ai colori: simulare come le coppie appaiono agli utenti interessati
Circa 1 uomo su 12 e 1 donna su 200 hanno qualche forma di deficit della visione dei colori. Il tipo più comune è la deuteranopia (ridotta sensibilità al verde), seguita dalla protanopia (ridotta sensibilità al rosso). La tritanopia (ridotta sensibilità al blu-giallo) è più rara. Per ogni tipo, il sistema visivo mappa certe lunghezze d'onda allo stesso colore percepito che gli spettatori non affetti vedono come distinto. Il problema pratico per una palette è che due colori che appaiono chiaramente diversi alla visione normale possono confondersi nella stessa tonalità per un utente con deficit di visione dei colori, rendendoli inutili per trasmettere distinzione, ad esempio usando solo rosso e verde per segnalare successo ed errore. Eseguire una simulazione di cecità ai colori mostra come appare la palette quando i canali interessati vengono compressi. Le coppie che si confondono in un grigio o marrone quasi identico sono quelle da riconsiderare: aumentare la differenza di luminosità tra loro in modo che il contrasto rimanga anche senza la distinzione di tonalità, oppure aggiungere un segnale secondario (forma, etichetta, pattern) in modo che il colore non sia l'unico segnale.
Farlo localmente: color-palette, color-blindness e color-converter
Tutti e tre i passaggi descritti in questo articolo possono essere completati senza inviare l'immagine o i colori del brand a nessun server. Lo strumento color-palette funziona interamente nel browser: si rilascia un'immagine, campiona i pixel localmente e restituisce i colori dominanti come valori hex. Nessun file viene trasmesso. Lo strumento color-converter accetta un codice hex e mostra lo stesso colore in RGB e HSL in modo da poter fare regolazioni mirate alla luminosità o alla saturazione rimanendo nella stessa famiglia di tonalità. Sia i valori hex che quelli convertiti esistono solo nella pagina. Lo strumento color-blindness funziona al contrario: si rilascia un'immagine e lo strumento genera le simulazioni di deuteranopia, protanopia e tritanopia di quell'immagine, calcolate nel browser. Per verificare una palette anziché una foto, esporta o cattura uno screenshot dei tuoi campioni colore come immagine, poi trascinala nel simulatore. Usando i tre strumenti in sequenza, estrai dall'immagine, regola in color-converter, poi esporta un'immagine dei campioni e verificala in color-blindness, si copre l'intero flusso di lavoro descritto sopra. L'immagine rimane sul dispositivo per tutto il tempo, il che è importante se la foto sorgente contiene branding non pubblicato o l'identità non ancora rilasciata di un cliente.
Strumenti citati in questo articolo
- Estrattore palette coloriEstrai i colori dominanti da un'immagine come campioni HEX. Copia qualsiasi colore. Nessun upload.
- Simulatore daltonismoSimula protanopia, deuteranopia, tritanopia e acromatopsia su un'immagine. Nessun upload.
- Convertitore coloriConverti i colori tra HEX, RGB, HSL, HSV e CMYK. Verifica del contrasto WCAG inclusa. Nessun upload.
- Generatore palette coloriGenera palette complementari, analoghe, triadiche, tetradiche e monocromatiche da un colore base. Nessun upload.
Domande frequenti
Quanti colori restituisce tipicamente un estrattore di palette?
La maggior parte degli strumenti restituisce tra 5 e 16 colori per impostazione predefinita, anche se molti consentono di impostare il conteggio. Restituire meno colori significa che l'algoritmo deve raggruppare più pixel insieme, il che può unire tonalità distinte ma simili. Restituire più colori può produrre quasi-duplicati difficili da usare in modo distinto. Per una palette UI, 6-8 colori è di solito un punto di partenza pratico.
Una palette estratta da un'immagine può superare automaticamente il contrasto WCAG?
Non automaticamente. I colori dominanti in una fotografia sono spesso mezzetinte con luminanza moderata, che tendono a produrre rapporti nell'intervallo da 2:1 a 3:1 tra loro. Raggiungere la soglia di 4,5:1 per il testo del corpo richiede tipicamente di schiarire i valori dello sfondo o di scurire i valori del testo oltre a ciò che l'estrazione grezza fornisce. L'estrazione fornisce un punto di partenza; il controllo del contrasto indica quanto aggiustamento è necessario.
Il rapporto di contrasto WCAG tiene conto della cecità ai colori?
Parzialmente. La formula di luminanza WCAG è basata sulla luminosità relativa, non sulla tonalità, quindi una coppia ad alto contrasto che soddisfa 4,5:1 sarà generalmente distinguibile anche agli utenti con deficit di visione dei colori perché la differenza di luminosità è preservata. Tuttavia, due colori con luminanza simile ma tonalità diverse, come rosso e verde alla stessa luminosità, possono superare un controllo del contrasto basato sulla luminanza pur essendo indistinguibili per i deuteranopi. Eseguire una simulazione di cecità ai colori è il modo corretto per verificare la differenziazione a livello di tonalità separatamente dal rapporto di contrasto.