Logótipo sobre fundo em gradiente: como o manter nítido

Para pôr um logótipo sobre um fundo em gradiente sem que desapareça, usa uma versão a uma cor do logótipo, coloca-a na parte mais calma do gradiente, onde o contraste é mais forte, e deixa espaço livre à volta. Um logótipo a cores partilha muitas vezes tons com o gradiente e dissolve-se nele. Uma versão branca ou escura, colocada onde o gradiente é mais escuro ou mais claro, mantém-se nítida em qualquer tamanho.

O resto deste guia explica porque é que os logótipos desaparecem, que versões preparar, como encontrar o sítio certo e como o verificar, com o CSS para o fazer na web.

Porque é que os logótipos desaparecem nos gradientes

Um fundo liso tem uma só cor, por isso um logótipo contrasta com ele ou não. Um gradiente tem muitas. Um logótipo branco perfeitamente nítido sobre a ponta escura de uma mistura pode esbater-se até desaparecer sobre a ponta clara, e um logótipo colorido pode coincidir tanto com o meio do gradiente que as suas margens se desfocam.

A lição: nunca avalies um logótipo em relação ao gradiente inteiro. Avalia-o em relação aos poucos píxeis que ficam mesmo por trás dele.

Prepara as versões do logótipo de que vais precisar

A maioria dos problemas de logótipos sobre gradientes resolve-se antes de alguém abrir um ficheiro de design, tendo as versões certas prontas. Guarda-as juntas no teu kit de marca para que ninguém improvise. Se o próprio logótipo for um gradiente, lê primeiro logótipos em gradiente: um símbolo em gradiente sobre um fundo em gradiente raramente funciona.

Encontra a zona de contraste e verifica-a

As WCAG, a norma de acessibilidade da web, isentam os logótipos das suas regras de contraste de texto. Essa isenção tem a ver com conformidade, não com visibilidade. O mínimo de 3:1 para gráficos com significado é um patamar prático: abaixo dele, um logótipo começa a perder as margens. Verifica-o assim.

1. 1

   Coloca o logótipo por alto

   Põe-no onde a composição o pede, normalmente num canto ou ao centro no topo.

2. 2

   Recolhe as cores por trás

   Usa um conta-gotas no píxel mais claro e no mais escuro mesmo por trás do logótipo. Num gradiente, podem ser muito diferentes, mesmo numa área pequena.

3. 3

   Testa ambas contra a cor do logótipo

   Passa cada par por um verificador de contraste como o da WebAIM. Aponta para pelo menos 3:1 contra o pior dos dois, e mais para logótipos pequenos.

4. 4

   Move, não remendes

   Se falhar, move o logótipo para a ponta mais escura ou mais clara do gradiente, ou troca para a outra versão mono, antes de recorrer a uma caixa ou a uma sombra.

5. 5

   Verifica em pequeno

   Reduz o design ao tamanho de uma miniatura. Se o logótipo virar uma mancha, usa aí a versão só com o símbolo.

O nosso guia sobre contraste de cor explica as proporções com mais pormenor, e texto sobre gradiente trata do mesmo problema para títulos.

Onde colocar um logótipo num gradiente

Procura a zona onde o gradiente muda menos. Um logótipo pousado sobre uma mudança brusca de cor parece estar a cavalo entre dois fundos. Os cantos costumam ser calmos, porque muitos gradientes fazem a mistura mais dramática ao meio. Dá ao logótipo espaço livre de todos os lados, pelo menos a altura de uma das suas letras, para que o gradiente o enquadre em vez de o apertar.

Na Gradiently, um Mark sabe onde estão as tuas palavras e o teu logótipo: a sua zona mais calma e com melhor contraste desloca-se para trás deles e o pormenor mais agitado acalma à volta, por isso raramente precisas de procurar o sítio certo à mão. Os logótipos do teu kit de marca entram diretamente em qualquer design.

Vazado, liso ou sobre uma placa

Há três formas de pôr um logótipo sobre cor, e cada uma serve um gradiente diferente.

Pôr um logótipo sobre um gradiente CSS

Na web, desenha o logótipo como um SVG em linha que usa currentColor, para que uma única cor CSS alterne entre a versão branca e a escura. Depois coloca-o no canto onde o gradiente é mais escuro. Com um gradiente a 135 graus, é no canto superior esquerdo que fica a primeira cor.

.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;
}