In breve
- Una palette di colori vivaci usa tinte molto sature come rosa shocking, mandarino, limone, blu elettrico e verde brillante.
- Gialli, verdi, ciano, verde acqua e arancioni vivaci sono colori chiari, quindi vogliono il testo scuro e non il bianco.
- Rossi e rosa vivaci misurano circa 3,5:1 contro il bianco, quindi non superano il livello AA delle WCAG per il testo corrente: usa il nero per il testo piccolo e tieni il bianco per i titoli grandi.
- Due colori vivaci di luminosità simile accostati sul bordo sembrano vibrare, quindi separali con un neutro o con una chiara differenza di luminosità.
- Ogni palette vivace ha bisogno di un’ancora calma, di solito un quasi nero o un bianco caldo, che regga il testo e lasci spazio al colore.
In questa pagina
Una palette di colori vivaci resta leggibile quando tratti ogni tinta per la sua luminosità e non per quanto è rumorosa. Il limone #FFD60A, il verde brillante #34C759, l’acqua #00C2FF e il mandarino #FF7A00 sono tutti abbastanza chiari da volere un testo quasi nero. Il rosa shocking #FF2D87 e il rosso papavero #FF3B30 stanno in una zona scomoda: il testo nero passa, ma il bianco funziona solo per i titoli grandi. Aggiungi un colore ancora calmo, dai a ogni tinta il suo spazio, e una palette da pasticceria diventa una su cui puoi davvero scrivere.
Quali colori vivaci vogliono il testo nero
La saturazione rende forte un colore, ma la leggibilità dipende dalla luminosità. Molte tinte vivaci sono molto più chiare di quanto sembrino, ed è per questo che il testo bianco su verde brillante o su giallo appare squillante ma resta difficile da leggere. La tabella qui sotto misura undici colori vivaci contro il bianco e contro il quasi nero #111111.
#FFD60ACon testo bianco
Con testo nero
#00C2FFCon testo bianco
Con testo nero
Hex
#00D1B2Con testo bianco
Con testo nero
Hex
#34C759Con testo bianco
Con testo nero
Hex
#FF7A00Con testo bianco
Con testo nero
Hex
#FF3B30Con testo bianco
Con testo nero
Hex
#FF2D87Con testo bianco
Con testo nero
#E0115FCon testo bianco
Con testo nero
Hex
#8B3DFFCon testo bianco
Con testo nero
#1D4ED8Con testo bianco
Con testo nero
Hex
#C81D11Con testo bianco
Con testo nero
Una regola pratica: il lato chiaro della ruota, dall’arancione al giallo e al verde fino al ciano, vuole il nero, e così i rosa e i rossi più accesi; il lato profondo, dal blu al viola fino al cremisi, vuole il bianco. Se progetti per un pubblico ampio, leggi anche le palette adatte ai daltonici, perché colori vivaci che differiscono solo per tinta possono sembrare uguali ad alcuni lettori.
Sei palette di colori vivaci con codici hex
- Festa in piscina: acqua
#00C2FF, verde brillante#34C759, limone#FFD60A, bianco#FFFFFF, blu notte profondo#0B1F3Aper il testo. - Scuola elementare: cobalto
#1D4ED8, rosso segnale#C81D11, limone#FFD60A, carta#FAF7F0, inchiostro#111111. - Stampa riso: rosa fluorescente
#FF48B0, blu#0078BF, giallo#FFE800, carta da giornale#F2EFE6, nero#1A1A1A. - Tropicale: lampone
#E0115F, mango#FFA51F, palma#00A86B, sabbia#F6EBD9, cacao#2B1B14.
Come mantenere leggibile una palette vivace
- 1
Scegli prima un’ancora
Prendi un quasi nero o un bianco caldo e lascia che copra gran parte della superficie. Il bianco caldo
#FFF8ECcon l’inchiostro#111111misura 17,89:1, quindi ogni parola scritta in inchiostro si legge. - 2
Scrivi il testo nell’ancora, non in un colore vivace
Il testo corrente va nel colore ancora. I colori vivaci possono portare un titolo o un solo numero grande, dove vale la soglia di 3:1 per il testo grande.
- 3
Separa i colori vivaci di pari luminosità
Il rosa shocking accanto a un blu elettrico come
#2F6BFFmisura 1,28:1, e il bordo sembra tremolare. Metti tra loro bianco, nero o spazio, oppure abbina un colore vivace chiaro a uno profondo. - 4
Limita i colori vivaci che toccano le parole
Tre colori vivaci in una palette bastano, e solo uno dovrebbe stare dietro a un blocco di testo. La regola 60 30 10 aiuta: ancora 60, colore vivace principale 30, accenti 10.
- 5
Controlla su un telefono all’aperto
I colori vivaci sbiadiscono al sole e sugli schermi a bassa luminosità. Se le parole si leggono ancora su un telefono attenuato, la palette funziona.
Uno sfondo squillante con le parole direttamente sopra: il titolo sopravvive, la riga di dettaglio scompare.
Gli stessi colori, con lo sfondo che si calma dietro il testo. Sempre vivace, e ogni riga si legge.
La versione a destra è ciò che Gradiently fa per impostazione predefinita. Un Mark sa dove stanno le tue parole, allontana da esse il suo colore più affollato e sceglie il testo chiaro o scuro riga per riga, così puoi tenere una palette squillante senza un riquadro o un’ombra dietro il testo.
Gradienti vivaci senza un centro grigio
Se fondi due colori vivaci da lati opposti della ruota in semplice sRGB, il punto medio diventa grigio o marrone. Scegli due colori vicini, oppure chiedi al browser di interpolare in oklch, che mantiene saturo il centro. L’interpolazione dei gradienti spiega la differenza.
Per altre combinazioni, guarda i gradienti vibranti e i gradienti neon. Per tutte le indicazioni sul contrasto, leggi il contrasto dei colori.
Un avvertimento se la palette finirà in stampa: i colori da schermo più elettrici, in particolare acqua, rosa shocking e verde brillante, stanno fuori da ciò che gli inchiostri CMYK standard riescono a riprodurre, e tornano dalla tipografia visibilmente più spenti. Chiedi una prova colore, oppure prevedi inchiostri speciali o fluorescenti. RGB e CMYK spiega cosa aspettarti.
Le domande più frequenti
Che cos’è una palette di colori vivaci?
Un insieme di colori molto saturi come rosa shocking, mandarino, limone, acqua e verde brillante, di solito bilanciato da un’ancora neutra per il testo.
Sui colori vivaci devo usare testo bianco o nero?
Usa il nero sui colori vivaci chiari come giallo, arancione, verde, acqua e verde acqua, e anche su rosa shocking e rosso papavero. Usa il bianco sui colori vivaci profondi come cobalto, viola, lampone e rosso segnale.
Perché alcuni colori vivaci sembrano vibrare?
Due colori saturi di luminosità simile affiancati, come rosa shocking e blu elettrico, fanno tremolare il bordo tra loro. Separali con un neutro o cambia la luminosità di uno dei due.
Quanti colori vivaci dovrebbe avere una palette?
Due o tre colori vivaci più uno o due neutri bastano. Solo un colore vivace dovrebbe stare dietro a un blocco di testo.
I colori vivaci sono un problema per l’accessibilità?
Non di per sé. I problemi nascono dal testo su colori vivaci con contrasto troppo basso, quindi controlla ogni coppia di testo con le WCAG e tieni il testo corrente in un’ancora scura o chiara.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo