Logo su sfondo sfumato: come mantenerlo leggibile

Per mettere un logo su uno sfondo sfumato senza che sparisca, usa una versione a un colore del logo, posizionala nella parte più calma del gradiente, dove il contrasto è più forte, e lascia spazio libero attorno. Un logo a colori di solito condivide delle tinte con il gradiente e ci si dissolve dentro. Una versione bianca o scura, posizionata dove il gradiente è più scuro o più chiaro, resta nitida a ogni dimensione.

Il resto di questa guida spiega perché i loghi spariscono, quali versioni preparare, come trovare il punto giusto e come verificarlo, con il CSS per farlo sul web.

Perché i loghi spariscono sui gradienti

Uno sfondo piatto ha un solo colore, quindi un logo o contrasta con esso oppure no. Un gradiente ne ha molti. Un logo bianco perfettamente chiaro sull’estremità scura di una sfumatura può svanire del tutto su quella chiara, e un logo colorato può somigliare così tanto alla parte centrale del gradiente da sfocarne i bordi.

La lezione: non giudicare mai un logo rispetto al gradiente nel suo insieme. Giudicalo rispetto ai pochi pixel che ha direttamente dietro.

Prepara le versioni del logo che ti serviranno

La maggior parte dei problemi dei loghi sui gradienti si risolve prima ancora di aprire un file di progetto, avendo pronte le versioni giuste. Tienile insieme nel tuo brand kit, così nessuno improvvisa. Se il logo stesso è un gradiente, leggi prima i loghi con gradiente: un marchio sfumato su uno sfondo sfumato raramente funziona.

Trova la zona di contrasto e verificala

Le WCAG, lo standard di accessibilità del web, escludono i loghi dalle regole sul contrasto del testo. Quell’eccezione riguarda la conformità, non la visibilità. Il loro minimo di 3:1 per la grafica significativa è una soglia pratica: sotto quel valore un logo comincia a perdere i contorni. Verificalo così.

1. 1

   Posiziona il logo a grandi linee

   Mettilo dove lo vuole il layout, di solito in un angolo o al centro in alto.

2. 2

   Campiona i colori dietro

   Usa il contagocce sul pixel più chiaro e su quello più scuro direttamente dietro il logo. Su un gradiente possono essere molto diversi, anche in un’area piccola.

3. 3

   Confrontali entrambi con il colore del logo

   Passa ogni coppia in un verificatore di contrasto come quello di WebAIM. Punta ad almeno 3:1 rispetto al peggiore dei due, e di più per i loghi piccoli.

4. 4

   Sposta, non rattoppare

   Se non passa, sposta il logo verso l’estremità più scura o più chiara del gradiente, o passa all’altra versione mono, prima di ricorrere a un riquadro o a un’ombra.

5. 5

   Controllalo in piccolo

   Riduci il design alle dimensioni di una miniatura. Se il logo diventa una macchia, lì usa la versione solo simbolo.

La nostra guida al contrasto dei colori spiega i rapporti più a fondo, e il testo su un gradiente affronta lo stesso problema per i titoli.

Dove posizionare un logo su un gradiente

Cerca l’area in cui il gradiente cambia meno. Un logo a cavallo di un passaggio di colore netto sembra appoggiato su due sfondi. Gli angoli sono spesso calmi, perché molti gradienti fanno le sfumature più marcate al centro. Lascia al logo spazio libero su ogni lato, almeno quanto l’altezza di una sua lettera, così il gradiente lo incornicia invece di soffocarlo.

In Gradiently, un Mark sa dove sono le tue parole e il tuo logo: la sua area più calma e con il contrasto migliore si sposta dietro di loro e i dettagli movimentati si attenuano lì vicino, quindi raramente devi cercare a mano il punto giusto. I loghi del tuo brand kit si inseriscono direttamente in qualsiasi design.

In negativo, pieno o su una placca

Ci sono tre modi per posare un logo sul colore, e ognuno si adatta a un gradiente diverso.

Mettere un logo su un gradiente CSS

Sul web, disegna il logo come SVG inline che usa currentColor, così un solo colore CSS passa dalla versione bianca a quella scura. Poi posizionalo nell’angolo in cui il gradiente è più scuro. Con un gradiente a 135 gradi, l’angolo in alto a sinistra è dove si trova il primo colore.

.hero {
  position: relative;
  background: linear-gradient(135deg, #1b1033 0%, #6d3fc4 55%, #f6d8c8 100%);
}

/* The SVG's paths use fill="currentColor" */
.hero .logo {
  position: absolute;
  top: 48px;
  left: 48px; /* the darkest corner of this gradient */
  width: 160px;
  color: #ffffff;
}

/* On a light gradient, switch to the dark version */
.hero.light .logo {
  color: #1b1033;
}