Grade de contraste da paleta

Por que verificar a paleta inteira

As cores de uma marca costumam ser escolhidas lado a lado em um painel, como amostras. Raramente são escolhidas em pares, uma escrita por cima da outra. Isso cobra seu preço depois, quando um desenvolvedor precisa de uma cor de link no fundo claro, de uma legenda no painel de destaque e de um rótulo no botão principal, e escolhe da paleta no olho.

O número de pares cresce rápido. Com n cores existem n × (n − 1) maneiras de pôr uma sobre a outra, o que dá 12 para quatro cores, 30 para seis e 132 para doze. Passar por elas uma a uma é lento o bastante para que ninguém faça. Uma grade faz isso na hora, e ainda mostra como a paleta está montada: quais cores funcionam como “tinta”, quais funcionam como “papel” e quais só servem de decoração.

Como ler a grade

Cada linha é uma cor de texto e cada coluna um fundo. Uma célula mostra uma amostra “Aa” nessas duas cores, a razão de contraste WCAG truncada em duas casas decimais e um de quatro rótulos:

A razão é a mesma qualquer que seja a cor de cima, então a tabela se espelha na diagonal. Mantemos as duas metades porque as amostras não têm a mesma aparência. Escuro sobre claro e claro sobre escuro parecem diferentes mesmo com um número idêntico. O menu Manter apaga todos os pares abaixo do limite que você escolher. Selecione uma célula para abrir uma prévia maior com um título, um parágrafo, texto pequeno e um botão. Há também um link que envia o par para a calculadora de razão de contraste, que pode sugerir um tom próximo que passe.

As três listas abaixo da grade

Texto de tamanho normal

Até oito pares com 4,5:1 ou mais, do mais forte para o mais fraco. Cada par aparece uma vez, com a cor mais clara como fundo, já que esse é o caso comum.

Só texto grande e títulos

Até seis pares entre 3:1 e 4,5:1. Eles são tentadores porque ficam bem em um mockup a 40 px. Coloque-os em um parágrafo e eles reprovam.

Conjuntos para botões

Um botão envolve três cores e dois testes. O rótulo precisa chegar a 4,5:1 contra o botão, e o próprio botão precisa chegar a 3:1 contra a página, senão as pessoas nem percebem que há um botão ali. Para cada cor de botão possível, a lista dá o rótulo com o maior contraste e o fundo de página mais claro que satisfaz os dois.

Se a primeira lista vier vazia, a paleta não tem nenhum par de tinta e papel. Acrescente um quase preto como #1a1a1a ou um quase branco e a grade se preenche.

Consertar uma paleta que não dá conta

A maioria das paletas falha do mesmo jeito, com várias cores de tom médio de luminosidade parecida. Verde-azulado, coral, mostarda e violeta não se parecem em nada, e mesmo assim nenhuma delas consegue levar texto sobre as outras. Três acréscimos resolvem quase todos os casos:

1. Um neutro escuro para o texto corrido. Uma versão profunda da cor principal da marca funciona tão bem quanto o preto e continua com cara de marca.
2. Um neutro claro para fundos de página e de cartões, como um branco levemente tingido com a cor da marca.
3. Um degrau mais escuro da cor de destaque para links e botões. Diminua a luminosidade até que um texto branco sobre ela chegue a 4,5:1, e guarde o destaque original para formas grandes e ilustrações.

Depois registre o resultado no seu guia de estilo como regras sobre pares, por exemplo “destaque só sobre branco, nunca sob texto corrido”. As pessoas erram menos com uma lista de pares permitidos do que com uma lista de cores.

Entrada, compartilhamento e limites

Separe as cores com vírgulas ou quebras de linha. Hex com ou sem #, rgb(), hsl() e nomes de cores CSS funcionam. Duplicatas são juntadas e tudo o que vier depois da décima segunda cor é ignorado. A barra de endereço sempre contém a paleta atual como ?c=1d3557,f1faee,…, então o link que você copia reabre a mesma grade. Tudo é calculado no seu navegador.