Tinta automática: texto claro ou escuro em cada linha

A Tinta automática é como o Gradiently escolhe a cor do seu texto. Para cada linha definida como Automático, ele olha para a parte do Mark logo atrás e escolhe a tinta clara ou a tinta escura, a que ficar mais legível ali. As duas tintas vêm da própria paleta do Mark, então um título sobre um canto pálido fica escuro e uma legenda sobre uma faixa escura fica clara, e os dois continuam parecendo da mesma marca.

Por que uma única cor de texto falha num gradiente

Num fundo liso, você escolhe a cor do texto uma vez. Um gradiente muda ao longo do caminho: o topo de um story pode ser quase branco e a base quase preta. Um texto branco que fica lindo embaixo desaparece em cima, e um título longo pode atravessar as duas áreas. Esse é o problema central de texto sobre fundo gradiente, e as soluções de sempre, caixas atrás das palavras e sombras projetadas, escondem justamente o fundo que você escolheu.

Como a Tinta automática escolhe entre claro e escuro

Todo 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 cores dele. Quando uma linha está em Automático, o Gradiently mede o material na área que essa linha ocupa e dá a ela a tinta que mais se destaca. Mova o texto e a escolha acompanha. Redimensione o design para um story ou um banner, onde a luz cai em outro lugar, e cada linha é escolhida de novo.

A ideia por trás é a mesma medida de contraste usada nas diretrizes de acessibilidade da web: comparar o quanto o texto é claro com o quanto o fundo é claro. Aqui está o princípio em poucas linhas de código, para quem quiser construir algo parecido 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 corrido e 3:1 para texto grande. Contraste de cores e acessibilidade explica as razões, e o verificador de contraste da WebAIM permite testar qualquer par.

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

Você ainda pode colorir o texto com qualquer cor do seu kit de marca ou da paleta do Mark. A Tinta automática é o padrão porque é a escolha que continua funcionando quando o design muda de 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 região mais calma e com melhor contraste desliza para trás do texto, as cores perto das letras escurecem ou clareiam e os detalhes carregados se acalmam. O mecanismo completo está em um fundo que se adapta ao texto. A Tinta automática então escolhe a tinta para essa área já calma, e as duas coisas se reforçam.

Além das predefinições, quatro controles permitem ajustar: Tom, o quanto o material se acomoda atrás das palavras para dar contraste; Calma, o quanto a distorção e o movimento relaxam; Curvatura, uma leve curva no padrão na borda das palavras; e Alcance, até onde ao redor das palavras ele reage. Você escolhe a intensidade, então um cartaz pode continuar ousado enquanto um cardápio fica tranquilo.

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

Caixas e sombras funcionam, mas chamam atenção para si e escondem o fundo. Alternativas à sombra no texto explica por quê, e texto sobre fundo carregado traz mais formas de manter as palavras legíveis sem elas.

Como aproveitar ao máximo a Tinta automática

1. 1

   Deixe o texto em Automático

   Só fixe uma linha em clara ou escura quando tiver um motivo concreto, como combinar com um conjunto impresso.

2. 2

   Escolha a reação certa para o trabalho

   Sutil serve para a maioria dos posts. Escolha Claro ou Forte para texto pequeno, detalhes longos ou qualquer coisa lida à distância.

3. 3

   Confira cada tamanho

   Depois de redimensionar, olhe cada formato. A tinta é escolhida de novo em cada um, o que normalmente é o que você quer.

4. 4

   Mantenha os títulos curtos

   Uma linha que vai da parte mais clara à mais escura de um Mark é difícil para qualquer tinta. Quebre em duas linhas.