Resumindo
- Um logo sobre um fundo gradiente funciona melhor numa versão de uma cor só, branca ou escura, em vez da original colorida.
- Como o gradiente muda de brilho ao longo da área, verifique o contraste no ponto exato onde o logo fica, não no fundo inteiro.
- A WCAG isenta os logos das suas regras de contraste, mas o mínimo de 3:1 para gráficos significativos é um piso sensato para o logo continuar reconhecível.
- Coloque o logo na região mais calma e uniforme do gradiente, geralmente um canto, e mantenha espaço livre ao redor.
- Toda marca deve ter versões do logo em cores, branca e escura prontas antes de criar sobre gradientes.
Nesta página
Para colocar um logo sobre fundo gradiente sem que ele desapareça, use uma versão do logo em uma cor só, coloque-o na parte mais calma do gradiente, onde o contraste é mais forte, e deixe espaço livre ao redor. Um logo colorido costuma compartilhar matizes com o gradiente e se dissolve nele. Uma versão branca ou escura, posicionada onde o gradiente é mais escuro ou mais claro, continua nítida em qualquer tamanho.
O restante deste guia explica por que os logos somem, quais versões preparar, como achar o lugar certo e como conferir, com o CSS para fazer isso na web.
Por que os logos desaparecem em gradientes
Um fundo chapado tem uma só cor, então o logo contrasta com ela ou não. Um gradiente tem muitas. Um logo branco perfeitamente nítido sobre a ponta escura de uma mistura pode sumir por completo sobre a ponta clara, e um logo colorido pode se igualar ao meio do gradiente a ponto de as bordas se embaralharem.
linear-gradient(90deg, #1b1033 0%, #6d3fc4 50%, #f6d8c8 100%)A lição: nunca julgue um logo pelo gradiente inteiro. Julgue-o pelos poucos pixels que estão diretamente atrás dele.
Prepare as versões de logo de que você vai precisar
A maioria dos problemas de logo em gradientes se resolve antes de alguém abrir um arquivo de design, com as versões certas à mão. Guarde todas juntas no seu kit de marca para ninguém improvisar. Se o próprio logo for um gradiente, leia antes logos com gradiente: uma marca em gradiente sobre um fundo em gradiente raramente funciona.
| Versão | Use em | Observações |
|---|---|---|
| Colorida | Fundos brancos, off-white ou muito claros | A versão principal. Raramente serve num gradiente. |
| Mono branca | Gradientes escuros e médio-escuros | A versão mais útil para trabalhar com gradientes. |
| Mono escura | Gradientes claros e pastel | Use um quase preto da sua paleta, não preto puro, se ficar duro. |
| Uma cor da marca | Gradientes neutros ou muito claros | Só quando a cor da marca contrasta com todos os pixels atrás. |
| Só o símbolo | Tamanhos pequenos, avatares, cantos | Mantém a forma onde um logotipo ficaria pequeno demais para ler. |
Ache a zona de contraste e confira
A WCAG, o padrão de acessibilidade da web, isenta os logos das regras de contraste de texto. Essa isenção diz respeito à conformidade, não à visibilidade. O mínimo de 3:1 para gráficos significativos é um piso prático: abaixo dele, o logo começa a perder as bordas. Confira assim.
- 1
Posicione o logo de forma aproximada
Coloque-o onde o layout pede, geralmente num canto ou no centro do alto.
- 2
Colha as cores atrás dele
Use um conta-gotas no pixel mais claro e no mais escuro diretamente atrás do logo. Num gradiente eles podem diferir muito, mesmo numa área pequena.
- 3
Teste as duas contra a cor do logo
Passe cada par por um verificador de contraste, como o da WebAIM. Busque pelo menos 3:1 contra a pior das duas, e mais para logos pequenos.
- 4
Mude de lugar, não remende
Se falhar, mova o logo para a ponta mais escura ou mais clara do gradiente, ou troque para a outra versão mono, antes de recorrer a uma caixa ou sombra.
- 5
Confira em tamanho pequeno
Reduza o design ao tamanho de miniatura. Se o logo virar uma mancha, use ali a versão só com o símbolo.
O nosso guia de contraste de cor explica as proporções com mais profundidade, e texto sobre gradiente trata do mesmo problema para títulos.
Onde colocar um logo num gradiente
Procure a região onde o gradiente muda menos. Um logo atravessando 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 no meio. Dê ao logo espaço livre em todos os lados, pelo menos a altura de uma das suas letras, para que o gradiente o emoldure em vez de apertá-lo.
O logotipo sobre a parte mais agitada do fundo: as bordas se suavizam onde a cor muda.
O mesmo logotipo com a região mais calma levada para trás dele: bordas limpas, sem caixa.
No Gradiently, um Mark sabe onde estão as suas palavras e o seu logo: a região mais calma e de melhor contraste vai para trás deles e os detalhes agitados relaxam por perto, então você raramente precisa procurar o lugar certo à mão. Os logos do seu kit de marca entram direto em qualquer design.
Vazado, sólido ou sobre uma placa
Há três formas de aplicar um logo sobre cor, e cada uma serve a um tipo de gradiente.
Logo mono sólido
- O logo é de uma cor chapada, branca ou escura
- Funciona em quase todo gradiente se estiver na zona certa
- A escolha padrão para posts e banners de redes sociais
- Continua limpo quando comprimido
Vazado ou placa
- Vazado: o logo é recortado de uma forma sólida e o gradiente aparece através das letras
- Placa: o logo fica sobre uma pequena forma sólida, como um selo
- Os dois garantem contraste em gradientes muito agitados
- Os dois acrescentam uma forma ao design, então use de propósito, não como socorro
Colocando um logo sobre um gradiente CSS
Na web, desenhe o logo como um SVG inline que usa currentColor, para que uma única cor CSS alterne entre as versões branca e escura. Depois posicione-o no canto em que o gradiente é mais escuro. Num gradiente de 135 graus, o canto superior esquerdo é onde está 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;
}Perguntas frequentes
Que cor de logo funciona melhor sobre um fundo gradiente?
Em geral, uma versão de uma cor só: branca sobre gradientes escuros ou médio-escuros e um quase preto da sua paleta sobre os claros ou pastel. Logos coloridos tendem a se misturar ao gradiente.
Onde o logo deve ficar num gradiente?
Na região mais calma e uniforme, com o contraste mais forte, muitas vezes num canto, com espaço livre ao redor de pelo menos a altura de uma das suas letras.
Os logos precisam cumprir requisitos de contraste?
A WCAG isenta os logos das regras de contraste de texto, mas usar o mínimo de 3:1 para gráficos significativos como piso mantém o logo reconhecível.
Devo colocar uma sombra ou uma caixa atrás do logo?
Tente antes mover o logo ou trocar para a versão branca ou escura. Caixas e sombras funcionam, mas acrescentam ruído visual; use uma placa ou um vazado deliberado se precisar de um.
O que é um logo vazado?
Um logo vazado é recortado de uma forma sólida, de modo que o fundo, neste caso o gradiente, aparece através das letras.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil
