Cores complementares, triádicas e análogas: como deixar cada harmonia legível

As harmonias de cores são regras práticas antigas, e respondem a uma pergunta mais estreita do que a que se costuma fazer a elas. Dizem quais matizes combinam. Não dizem nada sobre se um desses matizes pode ser lido sobre outro, e o motivo está na própria aritmética do contraste.

As três harmonias, definidas

Cores complementares são dois matizes em lados opostos do círculo cromático, a 180° um do outro.

Cores triádicas são três matizes distribuídos por igual no círculo, a 120° entre si.

Cores análogas são um matiz base e seus vizinhos; a ferramenta de harmonias de cores usa os matizes a 30° de cada lado.

Essas regras são convenções antigas, não resultados de medição. O valor delas está em reduzir um espaço infinito de escolhas a um punhado que você consegue justificar. A ferramenta oferece seis, e a nota que ela mostra sob cada uma merece ser lida como um rótulo de advertência.

Harmonia	Deslocamentos de matiz em relação à base	Cores	O que as separa	A nota da ferramenta
Análoga (Analogous)	0°, −30°, +30°	3	Matiz	Matizes vizinhos. Calma, e o padrão mais seguro para interfaces.
Complementar (Complementary)	0°, 180°	2	Matiz	Matizes opostos. Separação máxima, o que também a torna a mais fácil de usar em excesso.
Triádica (Triadic)	0°, 120°, 240°	3	Matiz	Três matizes igualmente espaçados. Vibrante, e difícil de equilibrar sem que um domine.
Complementar dividida (Split complementary)	0°, 150°, 210°	3	Matiz	O matiz oposto, dividido em dois. Quase todo o contraste, com menos tensão.
Tetrádica (Tetradic)	0°, 90°, 180°, 270°	4	Matiz	Dois pares complementares. Rica, e normalmente um par a mais para uma interface.
Monocromática (Monochromatic)	Nenhum; luminosidade 0.32, 0.52 e 0.72	3	Luminosidade	Um matiz em luminosidades diferentes. Resiste a todo tipo de daltonismo.

A “separação máxima” da nota da complementar é separação de matiz. Como a próxima seção mostra, não é separação de contraste.

Por que uma harmonia não pode prometer contraste

A razão de contraste do WCAG é calculada a partir da luminância relativa e de mais nada. A luminância é uma soma ponderada dos canais vermelho, verde e azul linearizados, 0.2126 R + 0.7152 G + 0.0722 B, e não existe nenhum termo para o matiz na razão. Duas cores de quaisquer matizes com a mesma luminância dão 1:1.

A ferramenta de harmonias deixa isso concreto. Cada cor girada é construída com a mesma luminosidade e o mesmo croma OKLCH da base, só com o matiz girado. Quando um matiz girado não consegue manter aquele croma na tela, o croma é reduzido e a luminosidade fica como está. Assim, todo membro de um conjunto complementar, triádico, análogo, complementar dividido ou tetrádico tem a mesma luminosidade OKLCH da base.

Em cores neutras, a mesma luminosidade OKLCH significa exatamente a mesma luminância, então a razão seria exatamente 1:1. Matizes reais com a mesma luminosidade diferem um pouco em luminância, então espere razões entre os membros perto de 1:1, muito longe dos 3:1 de que até o texto grande precisa. Um par complementar pode parecer chamativo e ainda assim ficar ilegível quando um é usado como texto sobre o outro.

A monocromática é a exceção, porque varia a luminosidade. Suas três cores são construídas com luminosidade OKLCH 0.32, 0.52 e 0.72 no matiz da base, seja qual for a luminosidade da própria base, então a cor que você digitou não está entre elas, a menos que a luminosidade dela coincida com uma delas. Numa versão neutra, em que a luminância relativa é o cubo da luminosidade OKLCH, a conta fica assim:

• a mais escura sobre a mais clara: (0.72³ + 0.05) ÷ (0.32³ + 0.05) ≈ 5.1:1
• a do meio sobre a mais clara: (0.72³ + 0.05) ÷ (0.52³ + 0.05) ≈ 2.2:1
• a mais escura sobre a do meio: (0.52³ + 0.05) ÷ (0.32³ + 0.05) ≈ 2.3:1

Só a mais escura sobre a mais clara serve como par de texto de corpo, e não com folga. A ferramenta mostra a razão de cada cor contra o branco e contra o preto, mas não entre os membros; para comparar duas amostras entre si, divida o valor maior sobre branco pelo menor. O 1.05 da fórmula se cancela, o que torna esse resultado exato antes do arredondamento.

Montando uma harmonia e lendo a auditoria

1. Defina a cor base. Use a amostra ou digite no campo hex ao lado; ele aceita hex, rgb(), hsl() ou oklch(). A ferramenta abre com #2563eb.
2. Escolha uma harmonia. São seis botões sob Harmony (harmonia), com a nota da harmonia atual logo abaixo. A tecla H passa para a próxima harmonia com a mesma base, e Random base (base aleatória), ou a tecla R, mantém a harmonia e escolhe uma nova base.
3. Leia cada amostra. Abaixo do código hex há duas linhas, “on white” (sobre branco) e “on black” (sobre preto), cada uma com uma razão e um veredito: “AA”, “large only” (só texto grande) ou “fails” (reprovada). Como as duas razões de uma cor sempre multiplicam 21, toda amostra passa no AA sobre um dos dois fundos. O que importa é sobre qual deles o seu texto vai ficar.
4. Leia o painel de auditoria. O título dele diz “Every pair survives colour blindness” (todos os pares resistem ao daltonismo) ou informa quantos pares se confundem. Cada par que se confunde aparece listado com os tipos de visão em que falha. O teste simula oito tipos de deficiência de visão de cores e aponta um par quando a distância CIEDE2000 dele fica abaixo de 11.
5. Copie o CSS. O painel na parte de baixo escreve o conjunto como --palette-1, --palette-2 e assim por diante, e Copy (copiar) o coloca na área de transferência. Share (compartilhar) copia um link para o mesmo conjunto, e Save here (salvar aqui) o guarda neste dispositivo.

Deixando cada harmonia legível

O movimento comum a todas: use a harmonia para preenchimentos, destaques e séries de gráfico, e tire o texto de uma mudança de luminosidade em um dos seus matizes.

Complementar

Duas cores com a mesma luminosidade. Nenhuma funciona como texto sobre a outra, então deixe uma ocupar a maior parte da área e use a outra com moderação. Para texto, use um passo escuro de qualquer um dos dois matizes; o gerador de escalas e tokens monta onze passos de um matiz e indica qual deles passa de 4.5:1 sobre branco.

Triádica e complementar dividida

Três matizes com a mesma luminosidade, todos disputando o mesmo peso visual. Escolha um para dominar, como a nota da ferramenta recomenda, e tire o texto de um neutro ou de um passo escuro, não do conjunto. Estes também são os conjuntos em que o matiz faz toda a separação, então leia a auditoria antes de usá-los para distinguir qualquer coisa, como as séries de um gráfico.

Análoga

Vizinhos a 30° de distância e com a mesma luminosidade dependem inteiramente do matiz para continuar distinguíveis. Isso os torna calmos como fundos e destaques, e significa que a auditoria de visão de cores é a verificação em que confiar se dois deles tiverem de significar coisas diferentes. Separe esses dois pela luminosidade ou acrescente uma segunda pista: as notas da ferramenta apontam para o WCAG 1.4.1, que pede que a cor nunca seja a única portadora de significado.

Monocromática

Já vem separada pela luminosidade, e é por isso que a nota da ferramenta diz que ela resiste a todo tipo de daltonismo. É a única harmonia que contém o próprio par de texto: o membro mais escuro sobre o mais claro, a cerca de 5:1 na conta neutra acima.

Outras formas de fazer isso

Não existe recurso nativo no macOS, no Windows ou no iPhone para montar harmonias de cores, nem um caminho por linha de comando entre os que estes guias garantem. No papel, um círculo cromático dá os ângulos; depois, o verificador de contraste diz quais dos resultados podem carregar texto e qual é a versão mais próxima de cada um que pode.

Como verificar que nada é enviado

Nada é enviado porque não há nada para enviar: a cor base e a harmonia ficam guardadas depois do # na barra de endereços, e os navegadores não mandam essa parte da URL para o servidor. Observe o painel Network no DevTools enquanto troca de harmonia e você não verá nada levando esses dados.

Abra as harmonias de cores, teste a sua base como tríade e depois como conjunto monocromático e compare o que a auditoria diz. Para montar desde o início um conjunto que resista à deficiência de visão de cores, veja Como criar uma paleta de cores segura para daltônicos.