Tinta automática: como o Gradiently escolhe texto claro ou escuro

A tinta automática é a forma como o Gradiently escolhe a cor do teu texto. Para cada linha de texto em Automático, olha para a parte do Mark mesmo por trás e escolhe a tinta clara ou a escura, a que se ler melhor ali. Ambas as tintas vêm da paleta do próprio Mark, por isso um título sobre um canto pálido fica escuro e uma legenda sobre uma faixa escura fica clara, e ambos continuam a parecer da mesma marca.

Porque falha uma só cor de texto num gradiente

Num fundo liso, escolhes a cor do texto uma só vez. Um gradiente muda ao longo do caminho: o topo de um story pode ser quase branco e o fundo quase preto. O texto branco que se lê lindamente em baixo desaparece no topo, e um título comprido pode atravessar os dois. É esse o problema central do texto sobre fundo em gradiente, e as soluções habituais, caixas atrás das palavras e sombras projetadas, tapam o próprio fundo que escolheste.

Como a tinta automática escolhe claro ou escuro

Cada Mark traz uma tinta clara e uma tinta escura tiradas da sua paleta: um tom pálido e um tom profundo que combinam com as suas cores. Quando uma linha está em Automático, o Gradiently mede o material na zona que essa linha cobre e dá-lhe a tinta que mais se destaca. Move o texto e a escolha acompanha. Redimensiona o design para um story ou um banner, em que a luz cai noutro sítio, e cada linha é escolhida de novo.

A ideia por trás é a mesma medida de contraste usada nas diretrizes de acessibilidade da web: comparar a luminosidade do texto com a do fundo. Aqui fica o princípio em poucas linhas de código, para quem estiver a construir algo semelhante na web.

// Relative luminance of an sRGB colour, as defined in WCAG
function luminance([r, g, b]) {
  const c = [r, g, b].map((v) => {
    v /= 255
    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
}

const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

// Pick whichever ink contrasts more with the colour behind the line
function pickInk(behind, lightInk, darkInk) {
  return contrast(behind, lightInk) >= contrast(behind, darkInk) ? lightInk : darkInk
}

pickInk([156, 79, 107], [251, 243, 234], [26, 15, 31]) // the light ink

Quanto aos números, as WCAG pedem uma razão de contraste de pelo menos 4,5:1 para texto corrente e 3:1 para texto grande. Contraste de cor e acessibilidade explica as razões, e o verificador de contraste da WebAIM permite testar qualquer par.

Automática, clara ou escura: os três modos de tinta

Podes sempre colorir o texto com qualquer cor do teu kit de marca ou da paleta do Mark. A tinta automática é a predefinição porque é a escolha que continua a funcionar quando o design passa para outro tamanho.

Como o Mark ajuda por trás

Escolher a tinta certa é metade do trabalho. A outra metade é o próprio fundo. Um Mark sabe onde estão as palavras: a sua região mais calma e de melhor contraste move-se para trás do texto, as cores junto às letras aprofundam-se ou clareiam, e o pormenor movimentado relaxa. O mecanismo completo está em um fundo que se adapta ao texto. A tinta automática escolhe então a tinta para essa zona acalmada, e as duas reforçam-se.

Além das predefinições, quatro seletores permitem afinar: Tom, até que ponto o material acalma por trás das palavras para dar contraste; Calma, quanto relaxam a sua deformação e agitação; Curva, uma ligeira curva do padrão na margem das palavras; e Alcance, até onde à volta das palavras responde. Escolhes a intensidade, para que um cartaz possa continuar selvagem e uma ementa fique tranquila.

O que a tinta automática evita de propósito

As caixas e as sombras funcionam, mas anunciam-se a si mesmas e escondem o fundo. As alternativas às sombras de texto explicam porquê, e o texto sobre fundo carregado tem mais formas de manter as palavras legíveis sem elas.

Tirar o máximo da tinta automática

1. 1

   Deixa o texto em Automático

   Só fixas uma linha em claro ou escuro quando tens uma razão concreta, como combinar com um conjunto impresso.

2. 2

   Escolhe uma reação para o trabalho

   Subtil serve para a maioria das publicações sociais. Escolhe Nítido ou Forte para letra pequena, pormenores longos ou o que se lê à distância.

3. 3

   Confere cada tamanho

   Depois de redimensionar, olha para cada formato. A tinta é escolhida de novo para cada um, o que costuma ser o que queres.

4. 4

   Mantém os títulos curtos

   Uma linha que atravessa da parte mais clara à mais escura de um Mark é mais difícil para qualquer tinta. Parte-a em duas linhas.