Thumbnail e daltonismo

Di chi si parla, e perché la thumbnail è il caso difficile

Il daltonismo rosso-verde è quello comune: viene di solito indicato attorno all'8% degli uomini e allo 0,5% delle donne di origine nordeuropea, in due forme — deuteranopia, quella sui verdi, e protanopia, quella sui rossi. Sono le due che ho simulato. Tutto il resto è abbastanza raro da essere una nota, e una nota ce l'ha, alla fine.

Una thumbnail è il caso difficile perché non c'è nient'altro su cui appoggiarsi. Un grafico con una legenda a colori ha le etichette; un sito ha del testo. Una thumbnail ha una sola immagine larga 336 pixel, accanto a un titolo che descrive il video e non l'immagine, e se due sue aree smettono di essere distinguibili il design ha semplicemente perso un confine, senza niente che lo sostituisca.

Cosa cambia, e cosa no

È la parte che vale la pena misurare per prima, perché decide tutto il resto. Ho passato la simulazione standard per dicromatici su tutte le 660 thumbnail dei pacchetti di questo strumento e ho confrontato ogni immagine con se stessa.

La luminosità complessiva di un'immagine si muove appena: la variazione mediana della luminanza relativa media è 0,59% sotto deuteranopia e 1,11% sotto protanopia. Quello che collassa è la differenza fra le tinte. Il rosso puro, rgb(255,0,0), diventa rgb(147,147,0), un giallo spento. Un verde intenso, rgb(0,200,0), diventa rgb(171,171,30). Quei due sono lo stesso colore, e differiscono solo per luminosità. Il bianco resta esattamente bianco.

Quindi il modo utile di pensarci non è che i colori peggiorano. È che l'asse della tinta viene cancellato e l'asse della luminosità resta intatto. Qualsiasi separazione costruita sulla tinta è andata; qualsiasi separazione costruita sulla luminosità è intoccata.

I singoli colori saturi possono spostarsi in luminosità — quello stesso rosso puro sale da 0,213 a 0,271 di luminanza relativa sotto deuteranopia e scende a 0,104 sotto protanopia. È l'immagine nel suo insieme che resta ferma, perché la maggior parte di una fotografia non è completamente satura.

Come l'ho misurato

La simulazione è l'approssimazione lineare di Viénot, Brettel e Mollon (1999): converti l'sRGB in lineare, poi nella risposta dei coni LMS, collassa il cono mancante sul piano che il dicromatico vede, e torna indietro. È il metodo standard dietro la maggior parte dei simulatori di daltonismo, e il suo limite noto è la tritanopia — ed è per questo che questa guida non afferma niente su quella.

Per ogni thumbnail ho preso le due famiglie di tinte dominanti — i due settori da 30° su dodici con la quota più alta pesata sulla saturazione, entrambi sopra il 10% — e ho misurato due cose su quella coppia. Il rapporto di contrasto WCAG fra i loro colori medi, che è una misura di pura luminosità, e la distanza fra quei due colori in sRGB prima e dopo la simulazione.

586 delle 660 thumbnail hanno due tinte dominanti che superano la soglia del 10%. Sono quelle che i numeri qui sotto descrivono.

Quanta luminosità separa due colori in una thumbnail vera

La distribuzione è il risultato. È il rapporto di contrasto fra i due colori dominanti della stessa thumbnail, sulle 586 che hanno una coppia misurabile.

La mediana è 1,57:1. Per riferimento, le WCAG chiedono 4,5:1 per il testo di lettura e 3:1 per gli oggetti grafici — soglie scritte per le interfacce e non per le fotografie, quindi qui sono un metro e non una regola. Solo il 2% di queste thumbnail raggiunge la prima e il 9% la seconda.

Il che vuol dire che quattro su dieci si appoggiano solo alla tinta

267 delle 586 coppie — il 46% di esse, il 40% di tutte le thumbnail misurate — separano i loro due colori principali con meno di 1,5:1 di contrasto di luminosità. Qualunque cosa tenga distinte quelle due aree, in gran parte non è la luminosità, quindi in gran parte è la tinta, quindi è la parte che a un dicromatico rosso-verde non arriva.

La simulazione lo conferma direttamente: su tutte le coppie la distanza fra i due colori cala di un 9% mediano, e all'interno di quel gruppo a bassa luminosità cala del 19%. Le coppie che partivano col minor contrasto di luminosità sono esattamente quelle che perdono più di quello che avevano.

Ed è la stessa decisione di design che fallisce per un motivo diverso alla dimensione di consegna. Un confine fatto di tinta e non di luminosità è anche il confine che si dissolve quando il file viene ricodificato a 336 pixel di larghezza, come misurato nella guida sulle thumbnail sfocate. Due modi di fallire distinti, una causa, una soluzione.

L'avvertimento sul rosso su verde punta al problema sbagliato

Il consiglio standard di accessibilità per il daltonismo è non mettere il rosso accanto al verde. Misurata su thumbnail vere, quella combinazione è rara: 13 su 660, il 2%, hanno una famiglia rossa e una verde come due tinte dominanti.

Quando succede è grave — quelle coppie perdono un 35% mediano della distanza fra loro, il peggiore di tutti i gruppi qui, e 10 delle 13 hanno anche meno di 2:1 di contrasto di luminosità. Quindi il consiglio non è sbagliato. È solo ristretto: descrive il 2% delle thumbnail, mentre la versione generale dello stesso problema — due tinte qualsiasi separate da quasi nessuna luminosità — ne descrive il 40%.

E varia molto per niche

Ordinati per la quota di coppie misurabili che si appoggiano solo alla tinta. Lo schema segue l'aspetto stesso dei niche, misurato nella guida su come spiccare: le righe chiare e sature hanno più separazione di sola tinta, perché resta meno intervallo di luminosità con cui separare qualcosa.

Moda e Bellezza e Politica stanno al 65% e al 62%; Finanza e Salute e Fitness al 25% e al 30%. Se il tuo niche sta nella metà alta di questa tabella, è probabile che la thumbnail di cui stai per copiare l'aspetto sia una di quelle che si appiattiscono.

La soluzione è una per cui hai già un numero

Separa prima con la luminosità e tratta la tinta come un bonus. È la stessa conclusione a cui arriva la guida sul colore dall'altro capo — l'interfaccia che è o bianca o quasi nera — ed è tutto il rimedio anche qui, perché la luminosità è l'asse che la simulazione lascia in pace.

Il test economico è la scala di grigi. Desatura completamente il tuo design e guarda se le parti si leggono ancora come parti separate: soggetto contro sfondo, testo contro quello che ha dietro, una metà di un frame diviso contro l'altra. Se sopravvive a quello, sopravvive alla dicromazia, perché la scala di grigi è il test più severo: rimuove tutta l'informazione di tinta, mentre un dicromatico ne conserva un asse.

Il che significa anche che il contrario non è una prova. Una cosa che fallisce in scala di grigi può restare in parte visibile a uno spettatore reale con deuteranopia. Passare il test in grigi è sufficiente; non passarlo è un avvertimento, non un verdetto. La soglia non è nostra: è il rapporto di contrasto definito dal criterio WCAG sul contrasto minimo, lo standard a cui è tenuto tutto il resto del web.

Il testo è il caso con meno margine

Il testo su uno sfondo colorato è dove la cosa si decide più in fretta, perché il testo è sottile: un titolo separato dal suo sfondo solo dalla tinta è illeggibile per un dicromatico e semplicemente difficile per tutti gli altri. Solo il 2% delle coppie misurate raggiunge il 4,5:1 che si aspetta dal testo di un'interfaccia.

La risposta pratica non è un rapporto di contrasto ma un contorno: un bordo o un'ombra netta in un colore la cui luminosità è lontana sia dal testo sia dallo sfondo, che è quello che la guida sulla dimensione del testo misura per la riduzione. Lo stesso contorno che tiene leggibile un titolo a 336 pixel lo tiene leggibile senza la tinta.

Cosa questa guida non copre

La tritanopia, la forma blu-giallo, qui non è simulata. L'approssimazione di Viénot è notoriamente inaffidabile per quella, ed è abbastanza rara — ben sotto lo 0,1% — che indovinare non aggiungerebbe niente.

Il daltonismo totale, la monocromazia, è ancora più raro, e il test in scala di grigi qui sopra è esattamente quel caso: se il tuo design sopravvive alla desaturazione sopravvive anche alla monocromazia.

E tutta questa guida parla di tinta. L'altra questione di accessibilità di una thumbnail è la dimensione, che non è affatto una questione di disabilità: tutti ricevono il tuo design a 336 pixel di larghezza, e i pavimenti per quello stanno nelle guide sulla dimensione del testo e sui volti.

Il controllo, in un minuto

Due passaggi sulla stessa immagine. Desaturala e guarda se le parti si separano ancora. Poi rimetti la versione a colori in un feed vero, perché una thumbnail che si separa al suo interno può comunque perdere il bordo contro l'interfaccia, che è un'altra misura in un'altra guida.

Quel secondo passaggio è ciò a cui serve lo strumento di anteprima: la tua thumbnail fra competitor veri alle dimensioni rese reali. Il primo è uno slider in qualunque programma l'hai disegnata, ed è il controllo di accessibilità più economico disponibile in questo mestiere.

Le domande che fanno tutti