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

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

Um gradiente é claro num sítio e escuro noutro, por isso nenhuma cor de texto serve para tudo. A tinta automática decide linha a linha, e o Mark ajuda por trás.

## The short version

- A tinta automática é uma definição do Gradiently que escolhe texto claro ou escuro para cada linha, o que se ler melhor na parte do Mark mesmo por trás dela.
- Ambas as tintas vêm da paleta do próprio Mark, por isso o texto pertence sempre ao fundo, em vez de cair por defeito no branco ou no preto puros.
- O texto também pode ser fixado na tinta clara ou na escura quando queres uma só cor, seja qual for o fundo.
- A tinta automática trabalha em conjunto com a reação do Mark, que acalma o material por trás das palavras, de Desligado a Invisível, Subtil, Nítido e Forte.
- Nenhuma usa caixas, sombras nem desfocagem, e escolhes com que intensidade o Mark responde.

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](https://gradiently.design/pt-pt/guide/text-on-gradient), e as soluções habituais, caixas atrás das palavras e sombras projetadas, tapam o próprio fundo que escolheste.

Um story vertical a anunciar saldos de um ateliê, em que a cor do texto tem dificuldade com as zonas mais claras e mais escuras do gradiente

Uma cor fixa sobre um fundo que muda: partes do texto lutam contra o material.

O mesmo story de saldos com cada linha na tinta clara ou escura que melhor se lê, e material mais calmo por trás das palavras

Tinta automática com o Mark a reagir: cada linha toma a tinta que se lê e o material acalma por trás dela.

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

- Tinta clara: #fbf3ea
- Luz de pêssego: #e9a27c
- Meio-tom rosa: #9c4f6b
- Sombra de ameixa: #3b1f3f
- Tinta escura: #1a0f1f

Uma paleta de Mark de exemplo com as suas duas tintas nas pontas. As tintas têm 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 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.

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

Apenas o princípio, não o código do Gradiently. Um fundo real varia por baixo de uma linha, por isso é preciso medir a zona por trás e não um único píxel.

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](https://gradiently.design/pt-pt/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ática, clara ou escura: os três modos de tinta

| Modo | O que faz | Usa quando |
| --- | --- | --- |
| Automática | Escolhe a tinta clara ou escura por linha conforme o que está por trás | Quase sempre: títulos, pormenores, legendas sobre um fundo que muda |
| Clara | Usa sempre a tinta clara do Mark | Um Mark escuro em que queres todas as linhas iguais, como num cartão de citação |
| Escura | Usa sempre a tinta escura do Mark | Um Mark pálido, de aspeto papel, ou impressão em que queres uma tinta consistente |

O texto começa em Automático. Passar uma linha para uma tinta fixa é uma escolha nas definições da cor do texto, e Voltar à tinta automática repõe-na.

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

| Reação | O que acontece atrás das palavras |
| --- | --- |
| Desligado | O material ignora as tuas palavras |
| Invisível | Só onde é preciso; ninguém repara |
| Subtil | Equilibrado: o visual mantém-se, as palavras leem-se |
| Nítido | As palavras ganham sempre |
| Forte | O máximo de contraste, com a calma um pouco mais larga |

Os níveis de reação que podes escolher num design, desde o material a ignorar as palavras até ao máximo contraste possível.

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

### Evita

- Uma caixa sólida atrás de cada linha
- Sombras projetadas que esborratam as arestas das letras
- Desfocar o fundo por trás do texto
- Texto branco puro sobre um canto pálido

### Faz

- Deixar cada linha tomar a tinta que se lê
- Deixar o Mark acalmar uma zona por trás das palavras
- Manter as tintas na paleta do próprio Mark
- Subir o nível de reação para texto pequeno ou longo

As caixas e as sombras funcionam, mas anunciam-se a si mesmas e escondem o fundo. As [alternativas às sombras de texto](https://gradiently.design/pt-pt/guide/text-shadow-alternatives) explicam porquê, e o [texto sobre fundo carregado](https://gradiently.design/pt-pt/guide/type-on-busy-backgrounds) tem mais formas de manter as palavras legíveis sem elas.

## Tirar o máximo da tinta automática

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

## FAQ

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

Uma definição de cor do texto que escolhe a tinta clara ou escura do Mark para cada linha, conforme o que se lê melhor na parte do fundo por trás dela.

### Posso desligar a tinta automática?

Sim. Define uma linha para usar sempre a tinta clara ou a escura, ou dá-lhe a cor que quiseres. Voltar à tinta automática repõe-na.

### A tinta automática acrescenta sombras ou caixas atrás do texto?

Não. Só muda a cor do texto. É o próprio Mark que acalma uma zona por trás das palavras, sem caixas, sombras nem desfocagem.

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

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

### Porque mudou o meu texto de cor depois de redimensionar o design?

Num tamanho novo a luz cai noutro sítio, por isso a tinta automática escolhe de novo a tinta para cada linha, para a manter legível.