Por Que Cartões de "Tocando Agora" Saem Cinzas

Um cartão de "tocando agora" são duas decisões de cor e um pouco de layout. As duas decisões costumam ser tomadas por uma única linha de código, e as duas estão erradas de um jeito que dá para medir em cerca de um segundo cada.

A primeira linha tira o fundo da média da arte de capa. A segunda escreve o texto em branco. Veja o que cada uma faz de verdade.

A média de uma imagem é uma cor que a imagem não contém

Pegue seis faixas iguais de matizes totalmente saturados — vermelho, amarelo, verde, ciano, azul, magenta — e faça a média de cada pixel. A resposta é rgb(128, 128, 128). Saturação 0,0. Cinza exato, de uma imagem que não tem cinza nenhum em lugar algum.

E isso não é esquisitice de uma única imagem forçada. Medimos três:

Nas três a cor média estava ausente da arte. Metade vermelho sobre metade azul dá roxo; não há roxo na imagem. Verde sobre quase preto dá um verde mais escuro e mais apagado do que o verde que está lá.

E o padrão por trás disso é a parte que importa: quanto mais colorida a capa, mais cinza a média dela, porque matizes opostos se cancelam. Uma capa marcante ganha um cartão apagado. Uma capa monocromática ganha um cartão fiel. É exatamente o contrário do que qualquer um quer, e é por isso que tantos desses cartões parecem o mesmo retângulo desbotado, não importa o que você jogou neles.

O que escolher no lugar

A correção é escolher uma cor que esteja de fato na imagem. Quantize a capa em baldes — dezesseis níveis por canal já basta —, conte os pixels de cada um e pegue um balde populoso, com peso para saturação, para que o papel branco da capa e a sombra preta dela não vençam por pura área.

Na capa de seis matizes isso devolve um vermelho que a imagem realmente contém. Numa capa de verdade devolve a cor para a qual você teria apontado. A diferença é uma passada sobre uma miniatura de 96 × 96, que não custa nada.

Texto branco falha em quase dois terços das cores

Agora a segunda linha. Qualquer que seja a cor que saiu do primeiro passo, o texto entra em branco.

Amostramos 636.056 cores do cubo sRGB e calculamos a razão de contraste WCAG de cada uma contra branco e contra preto. 4,5:1 é o limiar para texto corrido:

Um cartão que sempre escreve em branco fica abaixo do limiar de legibilidade em 63,6 % das cores em que pode cair. Não ilegível de forma dramática — é legível na sua própria tela, em tamanho cheio, quando você já sabe o que está escrito. Deixa de ser legível no celular de outra pessoa, à luz do dia, em tamanho de miniatura, que é o único lugar onde ele de fato vai ser visto.

Essa aqui você nunca precisa perder

Aqui está a parte que vale saber, e ela é mais forte que uma heurística.

Varremos todas as 16.777.216 cores sRGB — o espaço inteiro, não uma amostra — e pegamos, para cada cor, o melhor entre o contraste contra branco e contra preto. O pior caso do cubo inteiro é 4,58:1, em rgb(207, 13, 204).

4,58 está acima de 4,5. Não existe cor de fundo em que branco e preto falhem os dois no limiar. Escolher entre eles por cor não é uma regra de bolso que costuma funcionar; é legível por construção, em todo lugar, e custa uma comparação:

function pickText(bg) {
    return contrast(bg, WHITE) >= contrast(bg, BLACK) ? WHITE : BLACK;
}

E o número medido também não é artefato da varredura. Ele bate exatamente com a forma fechada. O contraste contra branco cai conforme o fundo clareia e o contraste contra preto sobe, então o pior caso fica onde as duas curvas se cruzam — na luminância relativa √(1,05 × 0,05) − 0,05 = 0,1791, dando 1,05 / 0,2291 = 4,5826. A varredura exaustiva e a álgebra concordam em quatro casas decimais.

A terceira coisinha

Já que estamos aqui: títulos de faixa são longos, e a maioria dos geradores deixa eles saírem pela borda do cartão ou encolhe a fonte até a linha do artista parecer outro design. Um canvas sabe medir texto — ctx.measureText(s).width —, então o comportamento honesto é medir, cortar com reticências na largura disponível e deixar o corpo da fonte em paz. São três linhas e ninguém faz.

O que fazer quando você criar um

• Tire a cor do cartão da arte, e não de uma média dela. A média costuma ser uma cor que a arte não contém, e quanto mais colorida a capa, mais cinza ela fica.
• Escolha a cor do texto por contraste, não por hábito. Ela não tem como falhar: o pior caso em todo o espaço de cor é 4,58:1.
• Confira o número, não o seu olho. Você já sabe o que o título diz, o que faz de você o pior juiz possível de se ele está legível.
• Meça títulos longos e corte com reticências, em vez de deixá-los passar da borda ou encolher a tipografia.

Experimente

Nosso gerador de cartão tocando agora faz tudo isso e mostra o segundo cartão ao lado do seu — cor média, texto branco, do jeito de sempre — para a diferença ficar visível em vez de afirmada. Ele informa a razão de contraste que conseguiu e a que o texto branco teria dado. Tudo acontece no seu navegador; a arte de capa nunca é enviada.

Se a capa ainda não é quadrada, o redimensionador de imagem resolve isso primeiro, e o verificador de área segura mostra o que a interface do story vai cobrir quando você postar o cartão.

Perguntas frequentes