Como corrigir o contraste de cores sem mudar a cor da marca

Toda auditoria de acessibilidade produz o mesmo momento constrangedor. O azul da marca reprova sobre o branco, o verificador diz 3.02:1, e o conselho disponível é “escolha uma cor acessível”. Ninguém que já esteve nessa reunião achou isso útil. A cor está no logo. Está na apresentação. Foi aprovada por alguém que não está na sala.

A boa notícia é que o conselho está errado, ou pelo menos muito incompleto. Na maioria dos casos, você pode manter a cor.

O contraste quase não liga para o matiz

A razão de contraste compara a luminância relativa, ou seja, mais ou menos quanta luz a cor emite. A luminância é, de longe, função da luminosidade. O matiz contribui um pouco, porque o olho é mais sensível ao verde do que ao azul, e a saturação quase não contribui.

A consequência prática merece ser dita com todas as letras: você pode mudar o quanto uma cor é clara sem mudar qual cor ela é. Um azul mais escuro continua sendo, reconhecidamente, o seu azul. Ele carrega a mesma associação com a marca, pertence à mesma família e combina com as mesmas cores secundárias. O que ele não faz é reprovar na auditoria.

É por isso que “escolha outra cor” é um conselho tão ruim. Ele trata a cor como uma coisa única e indivisível, quando na verdade ela tem uma propriedade que importa para o contraste e duas que importam para a identidade.

Trabalhe em OKLCH, não em hex

Se você ajustar um valor hex na mão, vai mudar matiz e saturação sem querer. Hex é um formato de armazenamento; não é um espaço útil para raciocinar sobre cor.

O OKLCH separa as três propriedades de forma limpa:

• L: luminosidade, de 0 a 100%. É ela que move o contraste.
• C: croma, mais ou menos a saturação.
• H: matiz, de 0 a 360°. É ele que carrega a sua marca.

Mantenha o H, mantenha o C sempre que puder e mova o L. Como a luminosidade do OKLCH é perceptualmente uniforme (ao contrário do HSL, em que 50% de luminosidade significa uma coisa no amarelo e outra no azul), passos iguais em L parecem passos iguais ao olho. Isso torna o ajuste previsível.

O CSS aceita OKLCH diretamente, então você pode publicar o resultado sem converter de volta:

--brand: oklch(68% 0.14 240);      /* fails on white */
--brand-text: oklch(52% 0.14 240); /* same hue, passes AA */

Duas custom properties, um só matiz. A cor da marca continua sendo a cor da marca e ganha uma variante segura para texto.

Quanto você precisa mover

Menos do que as pessoas esperam. Ir de 3:1 para 4.5:1 contra o branco costuma exigir uma mudança de luminosidade de algo em torno de 8–15%, dependendo do matiz. Essa mudança fica visível se você puser as duas cores lado a lado, e praticamente invisível se não puser.

Existe um limite real, e vale saber onde ele está. Cores quentes muito saturadas (amarelo, laranja, verde-claro) têm um teto baixo contra o branco, porque são intrinsecamente claras. Um amarelo saturado não chega a 4.5:1 contra o branco em nenhuma luminosidade sem deixar de ser um amarelo saturado. Quando você bate nessa parede, as opções honestas são reduzir o croma ou mudar o fundo.

Mudar o fundo costuma ser o menor compromisso

Essa opção é pouco usada. Quando a cor da marca é o texto, a restrição é a cor da marca. Quando ela é o fundo, você tem duas coisas para mover, e o texto costuma ser a menos preciosa das duas.

Um botão com fundo na cor da marca e texto branco que reprova muitas vezes se resolve melhor escurecendo um pouco o fundo do que abandonando o texto branco. A maioria das ferramentas nunca sugere isso, porque foi feita para avaliar um par, não para resolvê-lo.

Confira o resultado no tamanho que você vai publicar

O WCAG 2 compara duas cores e ignora todo o resto. Isso significa que uma legenda de 12px em Light e um título de 32px em Bold recebem a mesma nota, e qualquer pessoa que já publicou uma legenda tecnicamente aprovada sabe que a leitura não funciona assim.

O APCA, o algoritmo candidato para o WCAG 3, pontua tamanho e peso, além da cor. Ele produz alguns resultados realmente incômodos. 14px em peso regular não passa com nenhum contraste, nem com preto puro sobre branco puro. Precisa de 16px, ou precisa de negrito. O WCAG 2 deixa essa legenda passar direto.

Nenhum dos dois números basta sozinho. O WCAG 2 é a referência de conformidade hoje. O APCA prevê melhor se uma pessoa consegue ler o conteúdo. Quando os dois discordam, siga o mais rigoroso.

O modo escuro merece uma rodada própria

Não presuma que uma paleta aprovada sobre o branco vai passar quando invertida. A fórmula do WCAG 2 soma uma constante fixa de reflexo (flare) que domina na ponta escura, o que significa que pares perto do preto podem registrar uma razão confortavelmente aprovada e ainda assim parecer apagados e turvos. Essa é uma das falhas específicas que o APCA foi criado para corrigir.

Na prática, a cor da marca costuma precisar de duas variantes: uma escurecida para fundos claros e uma clareada para fundos escuros. Mesmo matiz, mesmo croma, dois valores de luminosidade. Isso é um sistema de cores, não uma cor, e é o que publicar nos dois temas realmente exige.

A versão curta

1. Mantenha o matiz. Mova a luminosidade.
2. Trabalhe em OKLCH para mudar só o que você pretendia mudar.
3. Se a cor for um fundo, considere movê-la em vez do texto que está sobre ela.
4. Confira no tamanho e no peso reais, não só como duas amostras.
5. Gere uma segunda variante para o modo escuro em vez de presumir que a primeira se inverte.

O verificador de contraste faz as cinco coisas. Ele desenha o eixo de luminosidade do seu próprio matiz, mostra quais trechos passam e oferece o valor aprovado mais próximo, classificado pelo quanto a cor se move.