Como criar uma paleta acessível a partir de uma única cor da marca

A maioria dos manuais de marca entrega um código hex e um logo. Transformar isso em algo com que dê para construir uma interface é um trabalho sistemático, e é justamente quando ele é feito a olho que os problemas de acessibilidade entram no sistema e ficam por lá.

Passo 1: encontre o matiz

Converta a cor da marca para OKLCH e anote o ângulo do matiz. Esse número é a marca. Todo o resto pode ser ajustado.

#2563eb  →  oklch(54.6% 0.215 262.9)

O matiz 262.9 agora fica fixo para a escala inteira. Luminosidade e croma são as variáveis.

Passo 2: monte a escala

Dez passos, com a luminosidade em intervalos iguais e o croma no máximo no meio, diminuindo nas duas pontas. Cores muito claras e muito escuras não sustentam croma alto sem sair da faixa que a tela consegue exibir.

--brand-50:  oklch(97% 0.015 263);
--brand-100: oklch(93% 0.035 263);
--brand-200: oklch(87% 0.070 263);
--brand-300: oklch(79% 0.120 263);
--brand-400: oklch(67% 0.180 263);
--brand-500: oklch(55% 0.215 263);  /* the original */
--brand-600: oklch(48% 0.200 263);
--brand-700: oklch(40% 0.165 263);
--brand-800: oklch(31% 0.120 263);
--brand-900: oklch(22% 0.075 263);

Como a luminosidade do OKLCH é perceptualmente uniforme, esses passos parecem regulares. O mesmo exercício em HSL produz uma escala que se amontoa no meio e dá saltos nas pontas.

Passo 3: atribua papéis por medição, não a olho

É este passo que decide se o sistema é acessível, e é ele que costuma ser feito na intuição.

Não escolha “a mais bonita” para o texto. Parta da exigência de contraste e trabalhe de trás para a frente:

Papel	Requisito	Passo típico
Texto do corpo sobre branco	4.5:1	600–700
Texto grande sobre branco	3:1	500–600
Fundo de botão com rótulo branco	4.5:1 para o rótulo	600
Bordas e divisores	3:1 se tiverem significado	400 (o 300 mede 1.95:1 sobre branco, então serve só para decoração)
Fundos sutis	nenhum	50–100

A conclusão que importa: a cor da sua marca normalmente não é a cor do seu texto. Um 500 vibrante foi feito para ser visto em tamanho grande, num logo. Use-o como texto de corpo a 16px e ele quase sempre fica abaixo de 4.5:1. O passo 600 ou 700 é o que o texto de corpo pede, e continua sendo reconhecivelmente o seu azul.

Passo 4: gere as variantes do modo escuro

Não suponha que a escala simplesmente se inverte. Ela não se inverte, por dois motivos.

A fórmula do WCAG 2 soma uma constante fixa de reflexo que domina no lado escuro, então pares escuros podem mostrar razões aprovadas e ainda assim parecer apagados. Além disso, cores muito saturadas vibram sobre fundos escuros de um jeito que não acontece sobre o branco.

Por isso cada papel semântico precisa de um segundo valor, mais claro e normalmente menos saturado:

:root {
  --text-brand: var(--brand-700);
  --surface-brand: var(--brand-50);
  --border-brand: var(--brand-400);
}

:root[data-theme='dark'] {
  --text-brand: var(--brand-300);
  --surface-brand: var(--brand-900);
  --border-brand: var(--brand-700);
}

A mesma escala, passos diferentes. É por isso que montar a escala primeiro compensa: o modo escuro vira um remapeamento, e não um segundo projeto de design.

Passo 5: nomeie pelo papel, não pelo valor

--brand-600 é um valor. --text-brand é um papel. Os componentes devem referenciar papéis.

O motivo é prático: quando a cor da marca mudar (e ela vai mudar), você gera a escala de novo e os papéis continuam apontando para os passos certos. Se os componentes referenciam --brand-600 diretamente, cada um deles precisa ser revisto.

É também o que torna os temas possíveis. Um papel pode apontar para passos diferentes em temas diferentes. Um valor bruto não pode.

Passo 6: verifique os pares, não só a escala

Uma escala aprovada no contraste ainda pode falhar no uso. Há duas coisas a verificar:

Cada combinação de texto sobre superfície que você realmente publica. Não todos os pares possíveis, só os que aparecem na interface. Corpo sobre o fundo da página, corpo sobre o card, link sobre o card, rótulo do botão sobre o botão.

Se duas cores quaisquer se confundem para pessoas daltônicas. Se o seu sistema tem um segundo destaque, como um verde de sucesso ao lado do azul da marca, verifique esse par especificamente. A checagem de contraste compara primeiro plano com fundo, nunca primeiro plano com primeiro plano, então essa falha passa em qualquer auditoria de razão de contraste.

A versão mais curta

Fixe o matiz. Avance a luminosidade em passos. Reduza o croma nas pontas. Atribua papéis por medição, e não a olho. Gere variantes escuras em vez de inverter. Nomeie pelo papel.

Seis passos e uma única cor da marca dão a você um sistema aprovado nos dois temas, sem ninguém precisar negociar com o manual da marca.

O nosso verificador de contraste faz a parte da medição: dê a ele um par e ele mostra a razão, o valor APCA no seu tamanho e peso reais e a cor aprovada mais próxima, caso o par não passe.