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

[Canonical HTML page](https://gradiently.design/pt-br/guide/auto-ink-legibility)

Um gradiente é claro em um lugar e escuro em outro, então nenhuma cor de texto serve para ele inteiro. A Tinta automática decide linha por linha, e o Mark ajuda por trás.

## The short version

- A Tinta automática é um ajuste do Gradiently que escolhe texto claro ou escuro para cada linha, o que ficar mais legível sobre a parte do Mark logo atrás dela.
- As duas tintas vêm da própria paleta do Mark, então o texto sempre pertence ao fundo em vez de cair no branco ou no preto puros.
- O texto também pode ser fixado na tinta clara ou na tinta escura quando você quer uma única cor, seja qual for o fundo.
- A Tinta automática trabalha junto com a reação do Mark, que acalma o material atrás das palavras, de Desativado a Invisível, Sutil, Claro e Forte.
- Nenhuma das duas usa caixas, sombras ou desfoque, e você escolhe o quanto o Mark reage.

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](https://gradiently.design/pt-br/guide/text-on-gradient), e as soluções de sempre, caixas atrás das palavras e sombras projetadas, escondem justamente o fundo que você escolheu.

Um story vertical anunciando um bazar de ateliê, em que a cor do texto luta contra as áreas mais claras e mais escuras do gradiente

Uma cor fixa sobre um fundo que muda: partes do texto brigam com o material.

O mesmo story do bazar com cada linha na tinta clara ou escura mais legível, e um material mais calmo atrás das palavras

Tinta automática com o Mark reagindo: cada linha recebe a tinta legível, e o material se acalma atrás dela.

## 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.

- Tinta clara: #fbf3ea
- Pêssego claro: #e9a27c
- Rosa médio: #9c4f6b
- Sombra ameixa: #3b1f3f
- Tinta escura: #1a0f1f

Um exemplo de paleta de Mark com as duas tintas nas pontas. As tintas carregam o calor do próprio Mark, não são branco e preto puros.

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.

```js
// 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
```

Só o princípio, não o código do Gradiently. Um fundo real varia sob uma linha, então é preciso medir a área atrás dela, não um único pixel.

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](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica as razões, e o [verificador de contraste da WebAIM](https://webaim.org/resources/contrastchecker/) permite testar qualquer par.

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

| Modo | O que faz | Quando usar |
| --- | --- | --- |
| Automático | Escolhe a tinta clara ou escura por linha conforme o que está atrás | Quase sempre: títulos, detalhes e legendas sobre um fundo que muda |
| Clara | Usa sempre a tinta clara do Mark | Um Mark escuro em que você quer todas as linhas iguais, como num card de citação |
| Escura | Usa sempre a tinta escura do Mark | Um Mark pálido, com cara de papel, ou um impresso em que você quer uma tinta só |

O texto começa em Automático. Fixar uma linha numa tinta é uma escolha nos ajustes de cor do texto, e Voltar para tinta automática desfaz isso.

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](https://gradiently.design/pt-br/guide/text-reacts-to-background). A Tinta automática então escolhe a tinta para essa área já calma, e as duas coisas se reforçam.

| Reação | O que acontece atrás das suas palavras |
| --- | --- |
| Desativado | O material ignora as suas palavras |
| Invisível | Só onde é preciso; ninguém vai perceber |
| Sutil | Equilibrado: o visual continua, as palavras ficam legíveis |
| Claro | As palavras sempre vencem |
| Forte | O máximo de contraste, com a calma um pouco mais ampla |

Os níveis de reação que você pode escolher para um design, do material que ignora as palavras ao maior contraste possível.

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

### Evite

- Uma caixa sólida atrás de cada linha
- Sombras projetadas que borram as bordas das letras
- Desfocar o fundo atrás do texto
- Texto branco puro num canto pálido

### Faça

- Deixe cada linha receber a tinta legível
- Deixe o Mark acalmar uma área atrás das palavras
- Mantenha as tintas na própria paleta do Mark
- Aumente o nível de reação para texto pequeno ou longo

Caixas e sombras funcionam, mas chamam atenção para si e escondem o fundo. [Alternativas à sombra no texto](https://gradiently.design/pt-br/guide/text-shadow-alternatives) explica por quê, e [texto sobre fundo carregado](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds) traz mais formas de manter as palavras legíveis sem elas.

## Como aproveitar ao máximo a Tinta automática

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. **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. **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. **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.

## FAQ

### O que é a Tinta automática no Gradiently?

Um ajuste de cor do texto que escolhe a tinta clara ou escura do Mark para cada linha, conforme a que fica mais legível sobre a parte do fundo atrás dela.

### Posso desligar a Tinta automática?

Sim. Defina uma linha para usar sempre a tinta clara ou a escura, ou dê a ela a cor que quiser. Voltar para tinta automática desfaz isso.

### A Tinta automática coloca sombras ou caixas atrás do texto?

Não. Ela só muda a cor do texto. O próprio Mark acalma uma área atrás das palavras, sem caixas, sombras ou desfoque.

### Que razão de contraste o texto deve ter sobre o fundo?

As WCAG pedem pelo menos 4,5:1 para texto corrido e 3:1 para texto grande.

### Por que meu texto mudou de cor depois que redimensionei o design?

Num novo tamanho a luz cai em outro lugar, então a Tinta automática escolhe a tinta de novo para cada linha, para mantê-la legível.