Como gerar uma paleta de cores com contraste de verdade para texto

Uma paleta gerada quase sempre parece certa como uma fileira de amostras. O problema começa quando você compõe um título numa das cores, coloca sobre outra e descobre que o par de que gostou quase não tem contraste. Este guia mostra como usar o gerador de paletas para que o conjunto que você mantém tenha uma cor em que dá para compor texto, sobre o fundo que você vai de fato publicar.

Toda cor passa no branco ou no preto

Comece pelo fato que muda o enquadramento do trabalho. A razão de contraste de uma cor contra o branco, multiplicada pela razão dela contra o preto, dá sempre 21. A fórmula do WCAG dá 1.05 ÷ (L + 0.05) contra o branco e (L + 0.05) ÷ 0.05 contra o preto, em que L é a luminância relativa da cor, e os termos em L se cancelam: 1.05 ÷ 0.05 = 21. Então o pior caso para a melhor razão de uma cor é √21, cerca de 4.58, e toda cor que existe passa de 4.5:1 contra um dos dois.

Cor de texto, então, não é uma propriedade da cor sozinha. É uma cor que passa de 4.5:1 contra o fundo específico sobre o qual vai ficar. “Isto pode levar texto?” não tem resposta até você dizer sobre o quê.

É por isso que a auditoria da ferramenta não pergunta sobre branco e preto. Ela perguntava: a contagem de cores que podiam “levar texto de corpo sobre branco ou preto” considerava todas as cores utilizáveis em todas as paletas já geradas, e o botão de correção nunca tinha como aparecer. Foi escrevendo este guia que percebemos. Agora ela pergunta para que uma paleta realmente serve: esta cor pode levar texto sobre outra cor do mesmo conjunto?

Gerando a paleta, passo a passo

1. Insira a cor que você precisa manter. O código hex de cada coluna é um campo editável: clique nele e digite ou cole um valor. Depois pressione o cadeado no canto superior direito da coluna para travá-la.
2. Pressione a barra de espaço, ou Generate. Toda coluna sem cadeado é sorteada de novo, e as travadas ficam. Se você perder um conjunto que queria, Undo (ou a tecla Z) volta um passo, e só um.
3. Defina o número de colunas. Add e Remove levam a paleta de duas a oito cores.
4. Leia o rodapé de cada coluna. Ele indica a parceira mais forte daquela coluna na paleta, com a razão entre as duas. “Carries text in this palette” (leva texto nesta paleta) significa que alguma parceira chega a 4.5:1; caso contrário, um link fix → oferece a cor mais próxima no mesmo matiz que chegaria lá, medida contra a cor mais escura ou mais clara da própria paleta. O botão Audit mostra e esconde essas linhas; elas vêm ativadas quando a página abre.
5. Trave o que vai manter e sorteie o resto. Lock all (a tecla L) segura todas as colunas de uma vez; pressionar de novo libera todas.
6. Guarde. Share copia um link que reabre exatamente esta paleta, Save here a guarda na sua atividade recente neste dispositivo, e Export a copia como CSS, OKLCH, Tailwind v4, SCSS, JSON, tokens do Figma ou amostras em SVG.

Como um novo sorteio posiciona as cores livres

Travar faz mais do que deixar uma coluna em paz. A cor travada mais à esquerda vira a âncora, e o matiz e o croma dela decidem onde todo o resto vai. As colunas livres percorrem o matiz de 60° abaixo do matiz da âncora em direção a 60° acima dele, cada uma deslocada aleatoriamente em até 12° para um lado ou para o outro. O croma delas fica entre 45% e 125% do croma da âncora, considerando que a âncora tem pelo menos 0.06.

A luminosidade é distribuída da esquerda para a direita entre as colunas livres, começando numa luminosidade OKLCH de 0.22 e subindo em passos iguais que dividem 0.62 entre si. Com uma coluna travada e quatro livres, as livres miram 0.22, 0.375, 0.53 e 0.685, cada uma deslocada em até 0.04.

Duas consequências práticas saem dessa conta.

• A coluna livre mais à esquerda é sempre a mais escura. Ela mira 0.22, o que a torna a candidata mais provável a cor de texto numa página clara.
• Um novo sorteio nunca produz uma cor de superfície clara. Mesmo com oito colunas e uma travada, a coluna livre mais clara mira 0.22 + 0.62 × 6/7, cerca de 0.75. Se você quer no conjunto uma cor quase branca para página ou card, digite-a numa coluna e trave. A paleta com que a ferramenta abre faz exatamente isso: a quinta cor, #f4f1ea, foi digitada, não gerada.

A paleta inicial, contra ela mesma

A ferramenta abre com #0f172a, #1e5aa8, #3ba0c9, #e8b04b e #f4f1ea. A coluna sobre o branco está aí só para comparação; a ferramenta não a mostra mais. A coluna de parceira é o que o rodapé de cada coluna mostra, arredondado para baixo com duas casas decimais, como a ferramenta arredonda.

Cor	Sobre o branco (para comparação)	Parceira mais forte na paleta
#0f172a	17.85:1	#f4f1ea, 15.82:1
#1e5aa8	6.81:1	#f4f1ea, 6.03:1
#3ba0c9	2.97:1	#0f172a, 5.99:1
#e8b04b	1.95:1	#0f172a, 9.13:1
#f4f1ea	1.12:1	#0f172a, 15.82:1

A faixa mostra 5 de 5 aqui, e desta vez com razão: toda cor tem uma parceira sobre a qual consegue levar texto, porque o conjunto inicial foi montado com uma ponta escura e uma ponta clara. Só sobre o branco, apenas duas das cinco passariam.

Uma paleta popular de tons médios mostra como é uma reprovação. #264653, #2a9d8f, #e9c46a, #f4a261 e #e76f51, o conjunto de verde-azulado, areia e coral, tira 3 de 5. A melhor parceira do verde-azulado médio é o verde-azulado escuro, com 3.03:1, e a correção dele é #53bfb0, que chega a 4.53:1 contra #264653 com o matiz mantido em 183°. O coral chega no máximo a 3.25:1. Nenhuma das duas cores está errada; o conjunto simplesmente não tem nada claro o bastante para fazer par com elas.

O âmbar é o caso instrutivo. Com 1.95:1, ele é inútil como texto sobre o branco, mas âmbar sobre o azul-marinho mede 9.13:1. Se uma cor é ou não uma cor de texto depende inteiramente do que está atrás dela.

A verificação que a faixa faz

A segunda frase da faixa é um teste no nível da paleta que um verificador de contraste nunca faz, porque ele compara um primeiro plano com outro. Ela simula cada par de cores sob oito tipos de deficiência na visão de cores, usando o modelo de Machado, Oliveira e Fernandes (2009), e aponta qualquer par cuja distância CIEDE2000 fique abaixo de 11 em algum deles. Duas cores podem passar, cada uma, de 4.5:1 contra a página e ainda ser difíceis de distinguir para alguém com deuteranomalia, que as notas da ferramenta estimam em cerca de 5% dos homens.

Se a faixa apontar um par, o simulador de daltonismo mostra esse par sob cada tipo de visão, e como montar uma paleta segura para daltônicos explica a correção.

Outras formas de fazer

Não existe método nativo no macOS, no Windows ou no iPhone para gerar uma paleta e auditá-la, nem um caminho de linha de comando entre os que estes guias recomendam. A alternativa manual é qualquer gerador seguido de um verificador de contraste, um par de cada vez, para cada par em que você pretende compor texto.

	Esta ferramenta	Um gerador típico de barra de espaço
Trava	O matiz travado ancora onde as outras cores vão	A posição travada é pulada, o resto é aleatório
Contraste por cor	A parceira mais forte na paleta, com a razão	Nenhum, ou só contra o branco
Verificação no nível da paleta	Pares que se confundem na simulação de visão de cores, apontados	Não oferece
Salvar	Cores guardadas no link	Uma conta

Como confirmar que nada sai da aba

Não há arquivo para enviar aqui, e a paleta fica na barra de endereço depois do sinal #. Os navegadores não enviam essa parte da URL ao servidor, então um link compartilhado abre sem que as cores cheguem ao site. Para confirmar, abra o DevTools, vá ao painel Network e aperte a barra de espaço algumas vezes: nada do que sai leva as suas cores.

Abra o gerador de paletas, trave a cor que você não pode mudar e leia a parceira de cada coluna antes de fechar um conjunto. Para os limites em si, qual razão de contraste você realmente precisa mostra qual número vale para cada caso.