Construindo uma paleta de cores
que ninguém lê errado

Nas telas finais, todo texto passa no nível AAA da WCAG, a norma internacional de acessibilidade digital. O contraste é medido como uma razão entre o brilho do texto e o do fundo. 4,5:1 é o mínimo aceito e 7:1 é o nível mais alto.

Texto principal a 14,61:1, secundário a 9,21:1, etiquetas de status entre 7,09:1 e 12,62:1. Uma única exceção, declarada. Na paleta anterior, os rótulos dos gráficos ficavam perto de 3,5:1, abaixo do mínimo.

HSL é o padrão da indústria e erra a luminosidade. Com a mesma receita, saturação 60% e luminosidade 40%, o verde fica com 3,25:1 sobre o branco e reprova. O vermelho fica com 7,23:1 e passa no nível mais alto. O número é igual, o brilho que o olho vê não é.

Escolhi OKLCH, um modelo que descreve a cor por luminosidade, croma e matiz seguindo a percepção do olho, e não a forma como a tela emite luz. Nele, a escala deixa de ser uma coleção de cores escolhidas e vira uma função. O tom 600 tem luminosidade 0,61 nas seis famílias de cor. É medida, não aproximação.

Os passos entre um tom e o próximo passaram a variar de 0,034 a 0,081. Duas vezes mais regular que antes.

Alta em verde e baixa em vermelho é a convenção mais forte do mercado financeiro e uma das piores para acessibilidade. É o caso clássico de daltonismo, que atinge cerca de 8% dos homens. Aqui o erro não é estético, é o saldo da pessoa.

Abandonar a convenção não era opção, porque quem opera lê a cor antes do número. A saída foi não deixar a cor sozinha. O sinal de mais ou de menos vem sempre colado no número, e no gráfico cada série ganha traço e marcador próprios.

Aqui o OKLCH se pagou. O verde e o vermelho de alta e baixa estão no mesmo tom da escala, o 800, com a mesma luminosidade, 0,45. A linha de baixa não pesa mais que a de alta sem motivo. O preço dessa escolha é que, sem o matiz, os dois viram o mesmo tom. O sinal deixou de ser detalhe e virou regra.

Não. Cor muito saturada sobre fundo escuro parece vibrar e sair do plano, um efeito que cansa rápido em leitura longa. Essas cores ficaram fora do modo escuro, com o sistema da Atlassian como referência de tonalidade. As superfícies escuras passaram de três para quatro níveis.

Em vez de redefinir as mesmas variáveis conforme o contexto, montei dois conjuntos completos de primitivos, as cores cruas que o sistema inteiro referencia. Um para fundo claro, outro para escuro. A alternativa deixaria o arquivo mais enxuto e quebraria a entrega para desenvolvimento, porque o Dev Mode do Figma perde o rastro de um valor que muda de significado dependendo de onde está. Arquivo menor não vale entrega pior.

Um documento vivo de oito seções, do tipo que um time consulta em vez de perguntar. Propriedades, paleta, acessibilidade tipográfica, matriz de tokens no nível AAA, contraste de elementos que não são texto, aparência de foco, séries de gráfico e o guia de migração da versão anterior.

No Figma, 224 variáveis em três coleções. Primitivos com as cores cruas, semânticos com o significado de cada uso, como fundo, texto, alta e baixa, e componentes. Dois modos, claro e escuro.

A exceção declarada é o texto de exemplo (placeholder) do campo de busca, a 5,75:1. Passa no AA e não no AAA. Está documentada como exceção em vez de arredondada para cima, porque um sistema que esconde a própria exceção deixa de ser verificável.