Griglia di contrasto della palette

Perché verificare una palette nel suo insieme

I colori di un brand di solito si scelgono affiancati su una tavola, come campioni. Raramente si scelgono a coppie, uno scritto sopra l’altro. Il conto arriva dopo, quando uno sviluppatore ha bisogno di un colore per i link sullo sfondo chiaro, di una didascalia sul riquadro d’accento e di un’etichetta sul pulsante principale, e pesca dalla palette a occhio.

Il numero di coppie cresce in fretta. Con n colori ci sono n × (n − 1) modi di metterne uno sull’altro: 12 per quattro colori, 30 per sei e 132 per dodici. Passarle in rassegna una alla volta è così lento che nessuno lo fa. Una griglia lo fa all’istante, e ti mostra anche com’è costruita la palette: quali colori funzionano come “inchiostro”, quali come “carta” e quali vanno bene solo per decorare.

Come leggere la griglia

Ogni riga è un colore del testo e ogni colonna uno sfondo. Una cella mostra un campione “Aa” in quei due colori, il rapporto di contrasto WCAG troncato a due decimali e una di quattro etichette:

Il rapporto è lo stesso qualunque colore stia sopra, quindi la tabella è speculare rispetto alla diagonale. Teniamo entrambe le metà perché i campioni non hanno lo stesso aspetto. Scuro su chiaro e chiaro su scuro danno un’impressione diversa anche a parità di numero. Il menu Mantieni attenua tutte le coppie sotto la soglia che scegli. Seleziona una cella per aprire un’anteprima più grande con un titolo, un paragrafo, testo piccolo e un pulsante. C’è anche un link che manda la coppia al calcolatore del rapporto di contrasto, che può suggerire una tonalità vicina che passa il test.

I tre elenchi sotto la griglia

Testo di dimensione normale

Fino a otto coppie a 4,5:1 o più, dalla più forte. Ogni coppia compare una volta sola, con il colore più chiaro come sfondo, perché è il caso più comune.

Solo testo grande e titoli

Fino a sei coppie tra 3:1 e 4,5:1. Sono allettanti perché in un mockup a 40 px fanno la loro figura. Mettile in un paragrafo e non passano.

Combinazioni per pulsanti

Un pulsante coinvolge tre colori e due test. La sua etichetta deve raggiungere 4,5:1 rispetto al pulsante, e il pulsante stesso deve raggiungere 3:1 rispetto alla pagina, altrimenti nessuno si accorge che c’è un pulsante. Per ogni possibile colore di pulsante, l’elenco indica l’etichetta con il contrasto più alto e lo sfondo di pagina più chiaro che soddisfa entrambi i test.

Se il primo elenco resta vuoto, la palette non ha una coppia inchiostro e carta. Aggiungi un quasi nero come #1a1a1a o un quasi bianco e la griglia si riempie.

Sistemare una palette che non basta

La maggior parte delle palette non basta per lo stesso motivo: diversi colori di tono medio con una luminosità simile. Verde acqua, corallo, senape e viola non si somigliano per niente, eppure nessuno può reggere del testo su uno degli altri. Tre aggiunte risolvono quasi ogni caso:

1. Un neutro scuro per il testo. Una versione profonda della tinta principale del brand funziona bene quanto il nero e resta riconoscibile.
2. Un neutro chiaro per gli sfondi di pagine e schede, come un bianco sporco tinto con la tinta del brand.
3. Un gradino più scuro del colore d’accento per link e pulsanti. Abbassa la luminosità finché il testo bianco sopra raggiunge 4,5:1, e tieni l’accento originale per le forme grandi e le illustrazioni.

Poi scrivi il risultato nella tua guida di stile come regole sulle coppie, per esempio “accento solo su bianco, mai sotto il testo”. Si sbaglia meno con un elenco di coppie ammesse che con un elenco di colori.

Inserimento, condivisione e limiti

Separa i colori con virgole o a capo. Funzionano esadecimali con o senza #, rgb(), hsl() e nomi di colore CSS. I doppioni vengono uniti e tutto ciò che segue il dodicesimo colore viene ignorato. La barra degli indirizzi contiene sempre la palette corrente come ?c=1d3557,f1faee,…, quindi il link che copi riapre la stessa griglia. Tutto viene calcolato nel tuo browser.