Gerador de paleta de cores acessível a partir da sua marca

A forma mais simples de clarear ou escurecer uma cor é misturá-la com branco ou preto em sRGB ou alterar o L do HSL. Ambas produzem escalas irregulares. A luminosidade do HSL não é percetual: um amarelo a 50 % parece muito mais claro do que um azul a 50 %, pelo que o «mesmo» passo tem contrastes muito diferentes consoante o tom. Misturar com branco em sRGB desvia o tom: os azuis puxam para o roxo e os vermelhos para o cor-de-rosa.

O OKLCH, forma cilíndrica do espaço OKLab publicado por Björn Ottosson em 2020 e hoje parte do CSS Color Level 4, separa as três coisas que importam no design:

Como o L acompanha o quão clara a cor parece, passos iguais em L geram escalas uniformes em qualquer tom, e o contraste com branco ou preto varia de forma previsível de passo para passo. É por isso que o Tailwind CSS v4 define a sua paleta predefinida em OKLCH.

Como este gerador constrói a escala

1. A cor da marca é convertida para OKLCH e colocada no passo com a luminosidade de referência mais próxima (ou no passo escolhido). Mantém o HEX exato.
2. Os passos mais claros distribuem-se uniformemente em L entre a cor da marca e L ≈ 97,5 % (passo 50); os mais escuros, entre a cor da marca e L ≈ 25 % (passo 900).
3. O tom não muda. O croma diminui em direção ao extremo claro — tons muito claros com croma total parecem fluorescentes — e desce no máximo um terço em direção ao escuro.
4. Qualquer cor fora do gamut sRGB regressa a ele por redução de croma, mantendo L e H, como recomenda o CSS Color 4.
5. Cada HEX é arredondado a 8 bits por canal e o contraste é calculado com esse valor arredondado — o mesmo que vai para o código.

Para cada passo, a tabela mostra o rácio de contraste das WCAG 2.2 com texto branco puro (#fff) e preto puro (#000):

• AA — pelo menos 4,5:1: adequado para texto corrido, rótulos e ligações.
• Grande — entre 3:1 e 4,5:1: apenas para texto a partir de 24 px (18,66 px a negrito) e elementos não textuais como ícones, contornos e indicadores de foco (WCAG 1.4.11).
• Não — abaixo de 3:1: apenas decoração, nunca texto.

Como os passos seguem a luminosidade percetual, o resultado é semelhante na maioria dos tons: o texto branco cumpre AA de 600 a 900 e o preto de 50 a 500. Praticamente nenhuma cor cumpre com ambos: 4,5:1 face a branco e a preto ao mesmo tempo só é possível numa faixa muito estreita de luminância relativa (0,175–0,183). É por isso que os design systems usam 600 ou 700 para botões principais com texto branco e reservam 400–500 para preenchimentos, gráficos e texto grande.

A coluna APCA mostra o contraste de luminosidade (Lc) do rascunho das WCAG 3 para texto branco e preto. Acima de 75 é confortável para texto corrido, acima de 60 para rótulos de interface e acima de 45 para títulos. O APCA ainda não é norma: use-o para escolher entre opções que já cumprem as WCAG 2.2.

Pares dentro da paleta

Interfaces com tons — avisos informativos, linhas selecionadas, etiquetas, dicas de onboarding — colocam um passo escuro sobre um passo claro do mesmo tom. A lista de pares indica, para cada fundo, que passos de texto atingem 4,5:1. Como regra prática, passos separados por cinco posições ou mais (50 com 600, 100 com 700) costumam cumprir; vizinhos, nunca.

• Dê nomes por função, não por valor. Exporte a escala como --brand-50 … --brand-900 e atribua funções por cima: --color-primary: var(--brand-600), --color-primary-text: var(--brand-700), --color-info-bg: var(--brand-50). Se a marca mudar, altera apenas uma lista.
• Documente os pares aprovados. Registe que passo de texto vai em que fundo, para que ninguém ponha texto 400 sobre fundo 100 à pressa.
• O tema escuro é outro mapeamento. Reutilize a escala ao contrário — passos claros para texto, escuros para superfícies — e volte a verificar os pares: combinações escuras que cumprem as WCAG 2 podem continuar a parecer apagadas, algo que o APCA mostra melhor.
• Os estados também precisam de contraste. Hover e pressionado costumam descer um passo; o indicador de foco precisa de 3:1 face ao fundo envolvente.
• As cores semânticas (sucesso, aviso, erro) geram-se da mesma forma, cada uma a partir da sua cor base. O amarelo e o verde-lima só são reconhecíveis em passos claros, onde o texto branco não cumpre — use texto escuro sobre eles.

Para verificar um par específico, incluindo cores fora da paleta ou camadas semitransparentes, use o verificador de contraste de cores.

1. Ottosson B. A perceptual color space for image processing, 2020 — OKLab e OKLCH, matrizes de conversão.
2. W3C. CSS Color Module Level 4 — notação oklch() e ajuste ao gamut por redução de croma.
3. W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — critérios 1.4.3, 1.4.6 e 1.4.11, luminância relativa e rácio de contraste.
4. Somers A. APCA — Accessible Perceptual Contrast Algorithm, apca-w3 0.0.98G-4g — valores Lc.
5. W3C Design Tokens Community Group. Design Tokens Format Module, rascunho — estrutura $type e $value da exportação de tokens.