# Contraste de cores: texto legível para todos

[Canonical HTML page](https://gradiently.design/pt-br/guide/color-contrast-accessibility)

Contraste é a diferença entre palavras que as pessoas leem e palavras que elas pulam. Os números do WCAG em português claro, como conferi-los e o que muda quando o fundo é um gradiente.

## The short version

- Contraste de cores é a diferença de brilho entre o texto e o fundo, medida como uma razão de 1:1 (nenhuma diferença) a 21:1 (preto sobre branco).
- O nível AA do WCAG 2 pede pelo menos 4,5:1 para texto normal e 3:1 para texto grande, que é cerca de 24 px regular ou 18,66 px em negrito.
- Ícones, bordas de campos e outras partes de uma interface que as pessoas precisam ver também precisam de pelo menos 3:1 em relação ao que as cerca.
- Sobre branco, `#767676` é o cinza simples mais claro que passa em 4,5:1 para texto comum, e `#777777` falha por pouco.
- Em um gradiente, o contraste muda de ponto a ponto, então você deve testar o pior ponto atrás das palavras, não a cor média.

O **contraste de cores** é a diferença de brilho entre o texto e a cor atrás dele, e decide se as pessoas conseguem ler suas palavras. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) o medem como uma razão de 1:1, quando as duas cores são idênticas, a 21:1, preto sobre branco. Para o nível AA, o texto normal precisa de pelo menos **4,5:1** e o texto grande de pelo menos **3:1**. Todo o resto deste guia é sobre atingir esses números sem deixar seu design tímido.

O contraste importa para todo mundo, não só para quem tem baixa visão. Celulares sob o sol, projetores fracos, monitores baratos e olhos cansados diminuem a diferença entre as cores. Designs com contraste suficiente simplesmente são mais lidos.

## As razões de contraste do WCAG em palavras simples

Três regras do WCAG 2 cobrem quase toda decisão de design. Elas vêm dos [critérios de sucesso do W3C](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) e são as que a maioria das auditorias de acessibilidade e das normas cita.

| O quê | Nível AA | Nível AAA | Observações |
| --- | --- | --- | --- |
| Texto normal | 4,5:1 | 7:1 | Texto corrido, legendas, rótulos, botões |
| Texto grande | 3:1 | 4,5:1 | Pelo menos 18 pt (cerca de 24 px), ou 14 pt em negrito (cerca de 18,66 px) |
| Ícones e partes da interface | 3:1 | 3:1 | Bordas de campos, linhas de gráficos que carregam significado, ícones sem rótulo |
| Logos e decoração | Nenhum | Nenhum | Logotipos de marca e texto puramente decorativo estão isentos |

O nível AA é o alvo habitual. O AAA é mais rigoroso e vale a pena em leituras longas.

Dois detalhes pegam as pessoas de surpresa. Primeiro, “grande” depende do tamanho renderizado, então um título de 24 px em um celular que o reduz pode deixar de contar como grande. Segundo, um botão desativado está isento, mas um texto de exemplo em cinza-claro que as pessoas precisam entender não está.

## Como a razão de contraste é calculada

A razão compara a luminância relativa das duas cores: quanta luz cada uma emite, ponderada do jeito que o olho vê. O verde contribui mais, o vermelho menos e o azul muito pouco, e é por isso que um azul saturado pode ser surpreendentemente escuro e um amarelo, surpreendentemente claro. A fórmula é `(L1 + 0.05) / (L2 + 0.05)`, em que L1 é a cor mais clara.

```js
// WCAG 2 contrast ratio between two hex colours
const channel = (c) => {
  c /= 255
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
}
const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((i) => channel(parseInt(hex.slice(i, i + 2), 16)))
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

contrast('#767676', '#ffffff') // 4.54, passes for body text
contrast('#777777', '#ffffff') // 4.48, fails
```

O cálculo inteiro cabe em uma dúzia de linhas. Útil para conferir uma paleta de marca em lote.

Você não precisa calcular à mão. O [verificador de contraste da WebAIM](https://webaim.org/resources/contrastchecker/) recebe dois códigos hex e diz quais níveis passam, e o seletor de cor das ferramentas de desenvolvedor do Chrome mostra a razão de qualquer texto que você inspecionar.

## Pares de cores que passam e que falham

As cores de marca costumam ficar no meio incômodo: escuras demais para texto escuro e claras demais para texto branco. Verdes, laranjas, rosas e azuis-claros médios são os suspeitos de sempre. Estas são combinações comuns, com as razões reais.

| Texto sobre fundo | Razão | Texto normal | Texto grande |
| --- | --- | --- | --- |
| Branco sobre violeta `#7c3aed` | 5,7:1 | Passa | Passa |
| Branco sobre violeta-claro `#8b5cf6` | 4,2:1 | Falha | Passa |
| Branco sobre azul `#2563eb` | 5,2:1 | Passa | Passa |
| Branco sobre azul-céu `#3b82f6` | 3,7:1 | Falha | Passa |
| Branco sobre verde `#10b981` | 2,5:1 | Falha | Falha |
| Quase preto `#0b0b10` sobre verde `#10b981` | 7,7:1 | Passa | Passa |
| Branco sobre âmbar `#f59e0b` | 2,2:1 | Falha | Falha |
| Cinza `#999999` sobre branco | 2,9:1 | Falha | Falha |
| Cinza `#6b7280` sobre branco | 4,8:1 | Passa | Passa |

Uma pequena mudança pode decidir: dois azuis que parecem quase iguais caem em lados opostos de 4,5:1.

> **Inverta o texto, não a marca** Quando o branco falha sobre uma cor de marca brilhante, experimente texto quase preto. Verde, âmbar e coral costumam passar com folga com texto escuro, e a cor continua exatamente como está. [Escolher as cores da marca](https://gradiently.design/pt-br/guide/how-to-choose-brand-colors) mostra como embutir isso na paleta desde o início.

## Por que os gradientes dificultam o contraste

Um fundo liso tem uma única razão de contraste. Um gradiente tem uma diferente em cada ponto. Um texto branco que passa fácil sobre a ponta escura de uma mistura pode falhar por completo na ponta clara, e um título que se estende pelo gradiente passa e falha na mesma linha.

Meia-noite, violeta e rosa: `linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%)`

O texto branco marca 18:1 à esquerda, 5,7:1 sobre o violeta e 2,7:1 na ponta rosa. Um gradiente, três veredictos.

A regra é simples: teste o ponto mais claro atrás de texto claro, ou o ponto mais escuro atrás de texto escuro. Se o pior ponto passa, a linha toda passa. Cores médias e amostras de conta-gotas tiradas do meio vão enganar você.

## Como corrigir o contraste em um gradiente

1. **Leve as palavras para a ponta calma** Coloque o texto sobre a parte mais escura ou mais clara do gradiente e deixe a transição brilhante acontecer longe dele.
2. **Estreite a faixa atrás do texto** Mantenha a parte do gradiente que fica atrás das palavras dentro de uma faixa pequena de luminosidade. O resto da tela pode ser tão ousado quanto você quiser.
3. **Adicione um véu suave** Um degradê suave, escuro ou claro, atrás do texto, como um gradiente de transparente a 30% de preto, aumenta o contraste sem uma caixa visível.
4. **Vá maior e mais forte** O texto grande só precisa de 3:1. Um peso mais forte e um tamanho maior podem transformar uma linha que falha em uma que passa.
5. **Teste em um celular de verdade** Confira o design com o brilho no máximo e com o brilho baixo, ao ar livre se puder. As razões são o piso, não o objetivo.

```css
.card {
  background: linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%);
  color: #ffffff;
}
/* A soft scrim keeps white text above 4.5:1 across the pink end */
.card .text {
  background: linear-gradient(90deg, transparent 0%, rgb(31 11 58 / 0.55) 60%);
  padding: 1rem 1.25rem;
}
```

O véu escurece só onde o gradiente clareia, então o lado esquerdo fica intacto.

Um post vertical em que o título Portas abertas às sete cruza uma área clara do gradiente e fica difícil de ler

As palavras passam direto pela parte mais brilhante do campo e o contraste cai.

O mesmo post vertical com uma área mais escura e calma do gradiente atrás do título, que fica legível

O mesmo design com a região calma e escura movida para trás das palavras.

Essa é a ideia por trás da legibilidade do Gradiently: um Mark sabe onde estão suas palavras, move sua região mais calma e de melhor contraste para trás delas e escolhe tinta clara ou escura por linha a partir da própria paleta. Para mais técnicas que funcionam em qualquer lugar, leia [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) e [texto legível sobre fotos](https://gradiently.design/pt-br/guide/text-over-image). Para interfaces escuras em particular, veja [design para modo escuro](https://gradiently.design/pt-br/guide/dark-mode-design).

## FAQ

### Qual é uma boa razão de contraste de cores?

Pelo menos 4,5:1 para texto normal e 3:1 para texto grande atendem ao nível AA do WCAG. Para leituras longas, 7:1 (nível AAA) é mais confortável.

### O que conta como texto grande no WCAG?

Texto de pelo menos 18 pontos, cerca de 24 px, ou de pelo menos 14 pontos em negrito, cerca de 18,66 px. O texto grande só precisa de 3:1 no nível AA.

### Qual é o cinza mais claro que posso usar sobre branco?

`#767676` é o cinza simples mais claro que atinge 4,5:1 sobre branco. `#777777` mede 4,48:1 e falha para texto comum.

### Os logos precisam cumprir os requisitos de contraste?

Não. O WCAG isenta o texto que faz parte de um logo ou nome de marca e o texto puramente decorativo. Tudo o que as pessoas precisam ler ou usar continua valendo.

### Como confiro o contraste em um fundo de gradiente?

Meça a cor do texto contra o ponto mais claro atrás de texto claro, ou contra o mais escuro atrás de texto escuro. Se esse pior ponto passar, a linha toda passa.