I colori che sopravvivono al feed di YouTube

Due problemi diversi dentro una domanda

«Quali colori funzionano su una miniatura» sono in realtà due domande con risposte diverse, e confonderle è il motivo per cui i consigli che trovi sono così vaghi.

La prima è la separazione dall'interfaccia: la tua inquadratura ha un bordo, e quel bordo sta a contatto con lo sfondo di YouTube. Questa è calcolabile, ed è di questa che parla quasi tutta la guida.

La seconda è la separazione dai vicini: dentro l'inquadratura non competi con l'interfaccia ma con le altre miniature della riga. Quella non ha una risposta universale, perché dipende interamente da come sono fatte quelle miniature.

L'interfaccia è esattamente uno di due colori

La pagina di YouTube è quasi nera in tema scuro e bianca in tema chiaro. Il valore scuro è #0F0F0F, abbastanza vicino al nero perché pensarlo come nero sia l'errore: è un grigio scuro, e una miniatura nera davvero è più scura della pagina su cui sta.

Non ti è dato sapere quale dei due stia usando uno spettatore. Lo stesso file deve reggere su entrambi, il che significa che il contrasto utile di un colore non è il suo caso migliore ma il peggiore.

Quei due valori sono ciò che riproduce il mock di il tool di anteprima, ed è il motivo per cui ha un interruttore chiaro/scuro: è lo stesso file contro i due fondi su cui finirà davvero.

Quali sono i numeri, in concreto

Rapporti di contrasto, calcolati nel modo standard, per una serie di colori che potresti plausibilmente mettere al bordo di una miniatura. L'ultima colonna è quella che conta, perché è il caso che non puoi escludere: Sono rapporti di contrasto nel senso in cui li definiscono le WCAG, quindi i numeri qui significano la stessa cosa che ovunque altro sul web.

Misurano la separazione fra due colori piatti, non la leggibilità del testo — quella ha i suoi numeri, nella guida sulla dimensione del testo. Leggi la tabella come: quanto si vede il confine dove la mia miniatura finisce e comincia la pagina.

Il risultato è il contrario del consiglio abituale

Scorri l'ultima colonna e lo schema non è quello che «usa colori accesi» prevede. Le opzioni più luminose sono le peggiori, perché acceso quasi sempre vuol dire alta luminosità, e l'alta luminosità è invisibile contro il bianco.

Un bordo bianco fa 1,0:1 in tema chiaro: letteralmente nessun confine. Giallo, ciano e grigio chiaro stanno appena meglio, fra 1,3 e 1,5. Ognuno di questi è magnifico in uno screenshot in tema scuro, che è esattamente il modo in cui vengono scelti.

I colori che sopravvivono a entrambi i fondi sono quelli saturi a luminosità media: rosso, blu, magenta, arancio, e persino un grigio medio qualunque. Nessuno di loro vince una delle due colonne, ed è proprio il punto: sono i soli che non perdono mai male.

Dove vale questa regola e dove no

È una regola sulla fascia esterna dell'inquadratura, non su tutto il progetto. Il centro di una miniatura non tocca mai l'interfaccia, quindi un centro bianco non è un problema: un bordo bianco lo è.

Che è un vincolo più piccolo di quanto sembri, e molto preciso: sono gli ultimi pochi per cento dell'inquadratura a decidere se la tua miniatura si legge come un oggetto sulla pagina o vi si scioglie dentro. Un bordo che sanguina non è solo disordinato: rende la miniatura più piccola, perché la parte dissolta nello sfondo smette di contare come tua.

Dentro l'inquadratura la gara cambia

Una volta che il bordo tiene, il colore smette di essere un problema misurabile e diventa comparativo. Non esiste un colore migliore per l'interno di una miniatura, perché la sola cosa che conta è che cosa le sta accanto.

Una miniatura rossa satura spicca in una riga di grigi spenti e sparisce in una riga di rossi saturi — e la riga non la scegli tu. Nella maggior parte delle nicchie la convenzione converge, il che significa che il colore che si legge come più professionale è anche quello che stanno usando tutti gli altri.

È per questo che la domanda utile non è mai «quale colore è il migliore» ma «quale colore qui manca». Guardare il tuo progetto nel feed in cui comparirà davvero risponde in pochi secondi, e nessuna quantità di teoria lo fa.

La tinta cede prima della luminosità

Un altro motivo per ragionare in chiaro e scuro invece che in nomi di colori: alla dimensione a cui una miniatura viene vista davvero, il contrasto di tinta è la prima cosa a crollare.

Rosso su blu è vivido a grandezza piena e fango a dimensione di tessera, perché pochi pixel di ciascuno vengono mediati insieme e quello che sopravvive è la loro luminosità simile. Chiaro contro scuro sopravvive allo stesso trattamento, perché mediare chiaro e scuro lascia comunque una differenza.

Il controllo è guardare il progetto in scala di grigi. Se si sfascia senza colore, si stava reggendo sul colore, e la scala a cui verrà mostrato il colore lo porta via per primo.

Il bordo bianco, e quando è una stampella

Un bordo bianco o acceso sottile attorno a tutta la miniatura è il rimedio standard al problema del bordo che sanguina, e funziona — in tema scuro. In tema chiaro è il caso invisibile della tabella, quindi un bordo scelto per un tema può essere nessun bordo nell'altro.

La versione che sopravvive a entrambi è un bordo a luminosità media, o un bordo bicolore, o semplicemente una composizione la cui fascia esterna porta contenuto di mezzo tono invece di un estremo. L'ultima è quella che non sembra mai un espediente.

Vale anche la pena chiedersi se il bordo stia risolvendo un problema o nascondendolo. Un progetto senza un soggetto chiaro non diventa più chiaro con una cornice intorno: diventa un progetto poco chiaro con l'etichetta.

Un controllo da tre minuti

Non serve una teoria del colore. Servono tre sguardi allo stesso file, nell'ordine che trova i problemi più in fretta.

1. Guarda il bordo sui due fondiMetti la miniatura su bianco e su #0F0F0F. Se il confine sparisce su uno dei due, è quello il colore da cambiare — e il cambiamento riguarda solo la fascia esterna.
2. Guardala in scala di grigiSe il progetto smette di funzionare, lo stava portando la tinta, che è la prima cosa che la dimensione di visualizzazione porta via.
3. Guardala accanto ai viciniNel feed in cui comparirà, alla dimensione a cui comparirà. È l'unico passaggio che può dirti se il colore che sopravvive all'interfaccia spicca anche nella riga.

Cosa portarsi via

La versione breve: colori saturi a luminosità media ai bordi, perché sono i soli che tengono contro entrambe le interfacce. Gli estremi di chiaro e scuro dentro l'inquadratura, dove non costano niente. Contrasto di luminosità invece che di tinta, perché la tinta non sopravvive alla dimensione. E la scelta vera fatta contro la riga in cui comparirai, non contro una teoria.

Quest'ultima parte è l'unico passaggio che nessun articolo può fare per te, questo compreso, perché dipende da un insieme di miniature che cambia ogni settimana.

Le domande che si fanno tutti