A acessibilidade e a identidade de marca são muitas vezes colocadas em oposição, como se uma tivesse de ceder. O verdadeiro problema é muito mais restrito. Este texto destina-se às equipas de comunicação e aos designers responsáveis por uma paleta a quem disseram que ela falha.
O que a norma exige
As WCAG 2.2 exigem um rácio de contraste de, pelo menos, 4,5:1 para o texto e 3:1 para o texto grande, que definem como tendo, pelo menos, 18 pontos, ou 14 pontos a negrito. Os componentes de interface e os gráficos com significado precisam de 3:1 face ao que têm ao lado. A cor também não pode ser a única forma de transmitir informação. O texto que faz parte de um logótipo ou de um nome de marca não tem requisito de contraste.
Esta é a falha mais comum que existe. O estudo de 2026 da WebAIM sobre o milhão de páginas iniciais mais visitadas encontrou texto de baixo contraste em 83,9% delas, com uma média de 34 ocorrências por página.
“A maioria das paletas não falha. Falham certas combinações.”
Como isto se traduz numa paleta real
O nosso próprio logótipo usa seis cores, uma para cada língua da animação no topo da nossa página inicial. Sobre branco, o azul mede 6,16:1, o violeta 5,72:1 e o rosa 4,84:1, pelo que os três podem ser usados em texto corrido. O laranja mede 4,30:1, o verde 4,38:1 e o âmbar 3,65:1. Estes três falham no texto pequeno e passam no texto grande.
Não mudámos as cores. Mudámos as suas funções. As seis aparecem em tamanho de destaque e no logótipo. Todo o texto pequeno do site é quase preto ou cinzento-escuro, com 7,23:1 ou mais, mesmo a pequena legenda imediatamente acima da animação colorida. A marca mantém a sua cor e ninguém tem de ler âmbar de 14 pixels.
Como verificar uma paleta
- Liste todas as combinações: cada cor de texto em cada fundo onde vai aparecer, incluindo estados de passagem do cursor e texto sobre fotografias.
- Assinale cada combinação como boa para texto corrido, boa apenas para texto grande ou reprovada.
- Atribua a cada cor uma função a partir dessa tabela: texto, destaque, preenchimento ou decoração.
- Quando uma cor tiver de ser usada em texto pequeno, escureça-a ligeiramente em vez de a substituir. Os leitores reconhecem a tonalidade, não o valor exato.
- Identifique o que é transmitido apenas pela cor, como ligações, erros e linhas de gráficos, e acrescente um sublinhado, um ícone ou uma etiqueta.
Deixar por escrito
Uma paleta sobrevive à transferência quando as diretrizes dizem o que cada cor pode fazer, e não apenas qual é o seu valor. Inclua a tabela no guia da marca. A próxima pessoa que construir uma página de campanha não terá de descobrir tudo de novo, e a marca continuará a parecer ela própria.