As cores que sobrevivem ao feed do YouTube

Dois problemas diferentes dentro de uma pergunta

«Que cores funcionam numa miniatura» são na verdade duas perguntas com respostas diferentes, e misturar as duas é o motivo de os conselhos por aí serem tão vagos.

A primeira é a separação da interface: o seu quadro tem uma borda, e essa borda encosta direto no fundo do YouTube. Essa dá para calcular, e é dela que trata quase todo o guia.

A segunda é a separação dos vizinhos: dentro do quadro você não disputa com a interface, e sim com as outras miniaturas da fileira. Essa não tem resposta universal, porque depende inteiramente de como são aquelas miniaturas.

A interface é exatamente uma de duas cores

A página do YouTube é quase preta no modo escuro e branca no modo claro. O valor escuro é #0F0F0F, perto o bastante do preto para que pensar nele como preto seja o erro: é um cinza escuro, e uma miniatura de fato preta fica mais escura que a página em que ela está.

Você não tem como saber qual dos dois a pessoa usa. O mesmo arquivo precisa aguentar nos dois, e isso quer dizer que o contraste útil de uma cor não é o melhor caso dela, é o pior.

Esses dois valores são o que o mock de a ferramenta de preview reproduz, e é por isso que ele tem um botão claro/escuro: é o mesmo arquivo contra os dois fundos em que vai realmente cair.

Quais são os números, na prática

Razões de contraste, calculadas do jeito padrão, para um conjunto de cores que dá para imaginar na borda de uma miniatura. A última coluna é a que importa, porque é o caso que você não consegue descartar: São razões de contraste no sentido em que as WCAG as definem, então os números aqui significam o mesmo que em qualquer outro canto da web.

Elas medem a separação entre duas cores chapadas, não a legibilidade do texto — isso tem números próprios, em o guia sobre tamanho de texto. Leia a tabela assim: quanto aparece a fronteira em que a minha miniatura acaba e a página começa.

O resultado é o contrário do conselho de sempre

Corra o olho pela última coluna e o padrão não é o que «use cores vibrantes» prevê. As opções mais luminosas são as piores, porque vibrante quase sempre significa luminosidade alta, e luminosidade alta é invisível contra o branco.

Borda branca dá 1,0:1 no modo claro: literalmente nenhuma fronteira. Amarelo, ciano e cinza claro ficam só um pouco melhor, entre 1,3 e 1,5. Todos ficam maravilhosos num print no modo escuro, que é exatamente como são escolhidos.

As cores que sobrevivem nos dois fundos são as saturadas de luminosidade média: vermelho, azul, magenta, laranja, e até um cinza médio qualquer. Nenhuma ganha nenhuma das duas colunas, e é justamente o ponto: são as únicas que nunca perdem feio.

Onde essa regra vale e onde não

É uma regra sobre a faixa externa do quadro, não sobre a arte inteira. O meio de uma miniatura nunca toca a interface, então meio branco não é problema: borda branca é.

É uma restrição menor do que parece, e bem específica: são os últimos por cento do quadro que decidem se a sua miniatura é lida como um objeto sobre a página ou se dissolve nela. Borda que sangra não é só desleixo: deixa a miniatura menor, porque a parte que se dissolveu no fundo para de contar como sua.

Dentro do quadro a disputa muda

Uma vez que a borda aguenta, cor deixa de ser problema mensurável e passa a ser comparativo. Não existe melhor cor para o interior de uma miniatura, porque a única coisa que importa é o que está do lado.

Uma miniatura vermelha saturada se destaca numa fileira de cinzas apagados e desaparece numa fileira de vermelhos saturados — e a fileira não é você que escolhe. Na maioria dos nichos a convenção converge, o que significa que a cor que parece mais profissional é também a que todo mundo está usando.

É por isso que a pergunta útil nunca é «qual cor é melhor», e sim «qual cor está faltando aqui». Olhar a sua arte no feed em que ela vai aparecer responde isso em segundos, e nenhuma quantidade de teoria responde.

O matiz cai antes da luminosidade

Mais um motivo para pensar em claro e escuro em vez de nome de cor: no tamanho em que a miniatura é vista de verdade, o contraste de matiz é o primeiro a desabar.

Vermelho sobre azul é vibrante no tamanho cheio e barro no tamanho de bloco, porque poucos pixels de cada um são misturados e o que sobra é a luminosidade parecida dos dois. Claro contra escuro aguenta o mesmo tratamento, porque misturar claro e escuro ainda deixa diferença.

A conferida é olhar a arte em tons de cinza. Se ela desmonta sem cor, era a cor que estava segurando — e a escala em que vai aparecer tira a cor primeiro.

A borda branca, e quando ela é muleta

Uma borda fina branca ou vibrante em volta da miniatura é a solução padrão para a borda que sangra, e funciona — no modo escuro. No modo claro é o caso invisível da tabela, então borda escolhida para um tema pode ser borda nenhuma no outro.

A versão que sobrevive nos dois é borda de luminosidade média, ou borda de dois tons, ou simplesmente uma composição cuja faixa externa carrega meio-tom em vez de um extremo. A última é a que nunca parece remendo.

Também vale perguntar se a borda resolve um problema ou esconde. Arte sem personagem claro não fica mais clara com moldura em volta: fica uma arte pouco clara, emoldurada.

Uma conferida de três minutos

Nada disso precisa de teoria das cores. Precisa de três olhadas no mesmo arquivo, na ordem que encontra problema mais rápido.

1. Olhe a borda nos dois fundosPonha a miniatura sobre branco e sobre #0F0F0F. Se a fronteira desaparece em algum dos dois, é essa a cor para mudar — e a mudança é só na faixa externa.
2. Olhe em tons de cinzaSe a arte para de funcionar, era o matiz que estava carregando ela, e é a primeira coisa que o tamanho de exibição tira.
3. Olhe do lado dos vizinhosNo feed em que vai aparecer, no tamanho em que vai aparecer. É a única etapa que diz se a cor que sobrevive à interface também se destaca na fileira.

O que levar disso

A versão curta: cores saturadas de luminosidade média nas bordas, porque são as únicas que aguentam contra as duas interfaces. Extremos de claro e escuro dentro do quadro, onde não custam nada. Contraste de luminosidade em vez de matiz, porque matiz não sobrevive ao tamanho. E a escolha de verdade feita contra a fileira em que você vai aparecer, não contra uma teoria.

Essa última parte é a única etapa que nenhum artigo faz por você, inclusive este, porque depende de um conjunto de miniaturas que muda toda semana.

As perguntas que todo mundo faz