Quase todo cartão de "tocando agora" tira o fundo da média da arte. É uma linha de código e está errada de um jeito que dá para medir em cerca de um segundo.
Faça a média de seis faixas iguais de matizes totalmente saturados e você recebe rgb(128, 128, 128) — saturação 0,0, cinza exato. Faça a média de metade vermelho sobre metade azul e você recebe roxo, que não aparece em lugar nenhum da imagem. Testamos três capas e em todas a cor média não estava presente na arte:
| Capa | Média | Saturação | Está na arte? |
|---|---|---|---|
| Seis matizes saturados | 128, 128, 128 | 0,0 % | Não |
| Metade vermelho, metade azul | 128, 0, 128 | 100 % | Não |
| Verde sobre quase preto | 27, 103, 52 | 58,5 % | Não |
O padrão é o problema: quanto mais colorida a capa, mais cinza a média dela, porque matizes opostos se cancelam. Uma capa marcante ganha um cartão apagado e uma capa monocromática ganha um cartão fiel — exatamente ao contrário. Esta ferramenta quantiza a arte e escolhe um balde populoso e saturado: uma cor que está de fato na imagem. Você pode trocar para a média acima e ver o cartão ficar cinza.
O segundo hábito é texto branco sobre qualquer cor que tenha saído do primeiro passo. Amostramos 636.056 cores do cubo sRGB e calculamos a razão de contraste WCAG contra branco e contra preto:
| Texto | Passa em 4,5:1 | Passa em 3,0:1 |
|---|---|---|
| Sempre branco | 36,4 % | 56,9 % |
| Sempre preto | 65,3 % | — |
Ou seja, 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 o bastante na sua própria tela, em tamanho cheio, quando você já sabe o que está escrito.
Aqui está a parte que vale saber. Varremos todas as 16.777.216 cores sRGB — não uma amostra — e pegamos, para cada uma, o melhor entre o contraste contra branco e contra preto. O pior caso de todo o espaço de cor é 4,58:1.
Isso está acima do limiar de 4,5:1, em todo lugar. Não existe cor de fundo em que branco e preto falhem os dois. O número também não é artefato da varredura; bate exatamente com a forma fechada. As duas curvas se cruzam na luminância √(1,05 × 0,05) − 0,05 = 0,1791, o que dá 1,05 / 0,2291 = 4,5826.
Então escolher a cor do texto por contraste não é uma heurística que costuma funcionar. É legível por construção, e custa uma comparação. O cartão informa a razão que conseguiu, para você ver em vez de confiar.
A varredura, a forma fechada e as medições de média estão escritas em Por que cartões de "tocando agora" saem cinzas, e por que o texto é difícil de ler.
O cartão leva a sua arte de capa, o seu texto, uma barra de progresso e os dois tempos que você digita. Ele não leva logo, marca nominativa nem cores de marca de serviço nenhum, e não é captura de tela de nada — é uma imagem que você fez, a partir de uma imagem que você tinha. Títulos longos são medidos e cortados com reticências em vez de sair pela borda, que é a terceira coisinha que a maioria dos geradores erra.
Não. O arquivo é lido pelo seu navegador, desenhado num canvas na página e devolvido como download. Ele nunca chega a um servidor, e é por isso que continua funcionando com a aba offline depois que a página carregou.
Porque é uma cor da arte, e não a média da arte. Elas costumam ser diferentes, e numa capa colorida muito diferentes — a média puxa para o cinza conforme matizes opostos se cancelam. Troque a cor do cartão para "média da arte" para ver a diferença, ou escolha a cor você mesmo.
É a razão WCAG entre o texto e o fundo atrás dele. 4,5:1 é o limiar para texto corrido; abaixo disso, o texto fica mensuravelmente difícil de ler para muita gente e em muitas iluminações. Escolher entre branco e preto por cor nunca cai abaixo de 4,58:1, o que verificamos no espaço de cor sRGB inteiro.
Não é uma captura e não imita uma — sem logos, sem marcas nominativas, sem cores de marca. Ele faz um cartão de player simples com a sua arte de capa e o que você digitou, e isso é seu para postar onde quiser.
1080 × 1920 para story em tela cheia, 1080 × 1350 para post no feed, 1080 × 1080 se o feed cortar em quadrado. Os três ficam acima do que qualquer plataforma grande exibe, então sobrevivem à redução com detalhe de sobra.
Porque ele não cabe, e o cartão o mede em vez de deixar passar da borda. Títulos ganham reticências na largura disponível; se você precisa do título inteiro, encurte ou escolha uma exportação mais alta, onde o cartão é mais largo.
Não — ela é desenhada a partir dos dois tempos que você digita, então é exatamente tão exata quanto eles. Se o tempo decorrido for maior que a duração, a barra enche por completo.
Sim. O desenho é feito pelo mesmo canvas que o desktop usa. Capas muito grandes são limitadas pela memória do navegador, não pela ferramenta; se o download vier em branco, redimensione a capa antes.