ThumbProof
Contraste importa mais que cor. Mantenha o brilho médio entre cerca de 22% e 80% para a imagem não se fundir com um feed escuro ou claro, busque um contraste de luminância RMS de 0,20 ou mais e dê a qualquer texto uma razão de contraste de pelo menos 4,5:1 contra o que está atrás dele. Depois confira a thumbnail em escala de cinza e com uma simulação de visão de cores: se o tema ainda se separa do fundo, o design funciona para todo mundo.
Por que o contraste vence a cor nos tamanhos do feed
Quando uma imagem encolhe para 168×94 pixels, pequenas diferenças de cor se diluem. Duas cores saturadas com o mesmo brilho, digamos um vermelho e um verde, viram quase o mesmo cinza para o canal de luminância do olho, que é o que mais usamos para ver bordas e formas. Já o claro contra o escuro sobrevive à redução, ao reflexo da tela e a displays baratos.
É também por isso que as diretrizes de acessibilidade definem o contraste como uma razão de luminância, e não como uma lista de cores permitidas. A regra para texto normal na web é de pelo menos 4,5:1, e para texto grande, pelo menos 3:1. O texto da thumbnail costuma ser grande e em negrito, mas fica sobre uma foto, não sobre um fundo liso, então mirar em 4,5:1 dá uma margem de segurança.
“A apresentação visual de texto e de imagens de texto tem uma razão de contraste de pelo menos 4,5:1”
Understanding SC 1.4.3 Contrast (Minimum) — W3C WCAG 2.2 · citação traduzida do inglês
Metas de brilho e contraste
A auditoria visual do ThumbProof informa três números ligados ao contraste. O brilho médio é a luminância média da imagem, de 0% (preto) a 100% (branco). O contraste RMS é o desvio padrão da luminância, uma medida robusta de quanta variação de claro e escuro existe. A nitidez mede o detalhe fino das bordas depois da redução para 168×94.
| Medida | Fraco | Moderado | Forte / meta |
|---|---|---|---|
| Brilho médio | < 22% ou > 80% | 22–30% ou 70–80% | 30–70% |
| Contraste RMS | < 0,12 | 0,12–0,20 | ≥ 0,20 |
| Razão de contraste do texto | < 3:1 | 3:1–4,5:1 | ≥ 4,5:1 |
| Nitidez em 168×94 | < 0,05 | 0,05–0,09 | ≥ 0,09 |
Esses limites são metas práticas usadas pela ferramenta, não regras das plataformas. Uma thumbnail dramática e quase toda escura ainda pode funcionar se um tema claro lhe der contraste forte; a verificação de brilho só avisa que ela pode sumir em um feed escuro.
Modo escuro e modo claro
Os feeds aparecem sobre um fundo quase preto no modo escuro e sobre branco ou cinza-claro no modo claro. Uma thumbnail com borda preta ou vinheta escura perde as bordas no modo escuro, enquanto uma thumbnail pálida, em tons pastel, perde as bordas no modo claro. Muita gente usa o modo escuro no celular à noite e o modo claro no desktop durante o dia, então você precisa passar nos dois.
A verificação mais rápida é alternar o tema do feed na pré-visualização. Olhe o contorno da thumbnail, não o tema: você quer uma borda clara entre a imagem e a página nos dois temas. Se a borda sumir, clareie um pouco as sombras, adicione um elemento de fundo mais claro ou uma moldura sutil.
Deficiências na visão de cores
O daltonismo é comum. Segundo o National Eye Institute dos Estados Unidos, o daltonismo vermelho-verde é a forma mais comum, e afeta homens com muito mais frequência que mulheres. Em um público grande, uma parcela notável de espectadores não vai ver a diferença entre uma seta vermelha e um fundo verde.
O ThumbProof simula protanopia (cegueira ao vermelho), deuteranopia (cegueira ao verde), tritanopia (cegueira ao azul) e acromatopsia (sem cores). Você não precisa criar para cada caso separadamente. Se a thumbnail passar na verificação em escala de cinza, ou seja, se o tema se separar só pelo brilho, ela vai funcionar para quase todos os tipos de visão de cores.
| Simulação | O que muda | Falha típica |
|---|---|---|
| Protanopia | Vermelhos ficam escuros e amarronzados | Texto vermelho em fundo escuro desaparece |
| Deuteranopia | Vermelhos e verdes se fundem | Comparações ‘bom/ruim’ em verde x vermelho |
| Tritanopia | Azuis e amarelos mudam | Texto amarelo sobre azul-claro |
| Acromatopsia | Só o brilho permanece | Qualquer par de cores com o mesmo brilho |
Confira cor e contraste em cinco passos
- 01
Carregue a thumbnail
Solte sua imagem no verificador de zona segura ou na pré-visualização de feed.
- 02
Faça o teste de desfoque
Desfoque a imagem. O tema deve continuar uma forma clara.
- 03
Mude para escala de cinza
Remova a cor. Texto e tema ainda precisam se separar pelo brilho.
- 04
Alterne os feeds escuro e claro
Garanta que as bordas da thumbnail continuem visíveis nos dois fundos.
- 05
Teste os modos de visão de cores
Passe pelas quatro simulações e depois leia as linhas de brilho e contraste no detalhamento da auditoria.
Escolhendo uma paleta que se destaca
Veja o que já existe no seu nicho. Se toda thumbnail de games usa roxo e azul saturados, um destaque amarelo ou laranja quente vai se sobressair mais que outro azul-neon. Mantenha a paleta pequena: um tom de fundo dominante, um tema e um destaque para o texto ou para um detalhe-chave.
Use a saturação para dar ênfase, não em tudo. Quando tudo está saturado, nada se destaca. Um fundo suave com um único tema saturado costuma ser mais legível em tamanhos pequenos que uma imagem totalmente saturada, porque o olho vai direto para a única área diferente.
- Um tom de fundo, um tema, um destaque
- Escolha um destaque raro no seu nicho
- Fundo suave, tema saturado
Texto sobre fotos carregadas
Texto colocado direto sobre uma foto cheia de detalhes quase sempre falha no teste de contraste em algum ponto das letras. Há quatro correções confiáveis: um contorno grosso (cerca de 6–10% da altura da letra), uma sombra suave, uma caixa sólida ou semitransparente atrás das palavras, ou mover o texto para uma área calma da imagem, como o céu ou uma parede lisa.
Confira o resultado em escala de cinza. As letras devem ficar claramente mais claras ou mais escuras que tudo ao redor ao longo de todo o contorno, não só na média.
Contraste no canal inteiro, não só em uma imagem
O público muitas vezes vê vários dos seus vídeos lado a lado na página do canal ou em uma playlist. Se toda thumbnail usa a mesma paleta escura, a página parece um bloco só e fica difícil distinguir os vídeos. Mantenha um estilo consistente (fontes, cor de destaque, enquadramento), mas varie o tom de fundo dominante entre envios vizinhos.
Uma regra prática é alternar entre um fundo mais escuro e um mais claro a cada poucos vídeos e manter a mesma cor de destaque. Assim o canal continua reconhecível e cada thumbnail ainda tem a própria borda. Use a visualização da página do canal na pré-visualização para conferir um envio novo ao lado dos anteriores.
| Padrão do canal | Efeito na página do canal | Correção |
|---|---|---|
| Todos os fundos escuros | Os vídeos se fundem em um bloco só | Alterne fundos escuros e de tom médio |
| Cores aleatórias a cada vídeo | Nenhum estilo reconhecível | Mantenha uma cor de destaque e uma fonte |
| Mesmo layout, tons diferentes | Reconhecível e distinto | Continue assim |
Telas, brilho e compressão
O público vê sua thumbnail em tudo, de celulares OLED brilhantes a monitores de escritório apagados e TVs vistas do outro lado da sala. O detalhe escuro é o primeiro a sumir em telas baratas ou com pouco brilho, e os modos noturnos dos celulares reduzem ainda mais o contraste. Mantenha as formas importantes fora dos 10% mais escuros da faixa tonal, onde viram um preto chapado.
A compressão também come contraste. A compressão JPEG suaviza primeiro as variações finas de cor, então degradês sutis e texturas de baixo contraste ficam em blocos. Se o seu design depende de um brilho sutil ou de um degradê suave para separar os elementos, reforce-o, ou o efeito pode sumir depois que a plataforma recodificar a imagem. Um teste rápido é exportar em JPEG com qualidade 70 e ver se o design se sustenta; se sim, ele sobrevive a qualquer processamento da plataforma.
- Mantenha as formas principais fora dos tons mais escuros
- Reforce brilhos e degradês sutis
- Teste uma exportação com qualidade 70
Exemplo prático: uma cena de mercado com pouco contraste
Um criador de viagem usa a foto de um mercado movimentado: centenas de barracas coloridas, todas com brilho parecido, e o texto amarelo “HIDDEN GEM” por cima. Em tamanho real, parece animada. Em 168×94 vira ruído cinza, o contraste RMS é 0,11 e o texto amarelo tem uma razão de cerca de 1,8:1 contra as barracas.
O criador escurece o fundo em 30%, destaca uma barraca como ponto focal e coloca o texto em uma caixa escura. O contraste RMS sobe para 0,24, a razão do texto para 7:1, e o teste de desfoque mostra uma forma clara.
| Medida | Antes | Depois |
|---|---|---|
| Brilho médio | 48% | 36% |
| Contraste RMS | 0,11 | 0,24 |
| Contraste do texto | 1,8:1 | 7:1 |
| Teste de desfoque | Ruído | Ponto focal claro |
Erros comuns de cor e contraste
Pares de cores com o mesmo brilho
Vermelho sobre verde ou azul sobre roxo parecem vivos, mas se fundem em escala de cinza.
Bordas escuras e vinhetas
Elas apagam a borda da thumbnail no modo escuro.
Texto colorido fino sobre fotos
Sem contorno ou caixa, falha no contraste em algum ponto das letras.
Saturar tudo demais
Quando tudo grita, nada se destaca. Fique com um destaque.
Ignorar o modo claro
Designs em tons pastel que brilham no modo escuro podem sumir no branco.
Exportar em gama ampla
Arquivos Display P3 ou CMYK podem mudar as cores. Exporte em sRGB.
Tamanho, resolução, limites de arquivo e zonas seguras da thumbnail de vídeo
Checklist de thumbnail com alto CTR: 7 princípios visuais que chamam atenção
Corte de título por dispositivo: largura em pixels, não número de caracteres
Texto na thumbnail: quantas palavras, que tamanho e onde colocar
Rostos e ponto focal: tornando uma coisa impossível de ignorar