Como testar uma paleta antes de usar

Uma paleta funciona quando o texto se lê, a hierarquia aparece, a informação não depende só da cor e o conjunto continua bom em telas e situações diferentes. Para saber isso, faça seis testes curtos: contraste, escala de cinza, simulação de daltonismo, outra tela, uso real e um olhar de fora. Juntos levam cerca de meia hora e evitam refazer material depois de impresso ou publicado.

Teste 1: contraste dos pares que importam

Contraste é a diferença de claridade entre duas cores, medida numa razão (1:1 é nenhuma diferença, 21:1 é preto sobre branco). Liste os pares que de fato aparecem juntos: texto sobre fundo, texto sobre botão, borda sobre fundo. Digite os códigos HEX (os códigos de seis caracteres que identificam cada cor) num verificador como o da WebAIM, que mostra o resultado para texto normal, texto grande e componentes de interface.

Os limites vêm da WCAG, o conjunto de regras de acessibilidade do W3C (a versão 2.2, de outubro de 2023, manteve os valores). No nível AA: 4,5:1 para texto normal e 3:1 para texto grande. No nível AAA: 7:1 e 4,5:1. Elementos de interface e gráficos pedem 3:1 no AA. Não arredonde: o W3C avisa que 4,499:1 não atinge 4,5:1.

Cinco pares da loja de ferramentas, medidos

Vamos testar a paleta “Teste de bancada”, pensada para o site de uma loja de ferramentas de bairro: #2D3142 (azul-grafite), #4F5D75 (azul-acinzentado), #EF8354 (laranja), #BFC0C0 (cinza-prata) e #FFFFFF. Calculei as razões pela fórmula da WCAG:

Par	Razão	Veredito
#2D3142 sobre #FFFFFF	12,89:1	texto principal, passa AAA
#4F5D75 sobre #FFFFFF	6,66:1	texto de apoio, passa AA
#EF8354 sobre #2D3142	4,94:1	texto laranja no escuro, passa AA
#EF8354 sobre #FFFFFF	2,61:1	falha, não usar para texto
#BFC0C0 sobre #FFFFFF	1,82:1	falha, só como divisória decorativa

O teste já rendeu duas decisões: o laranja só vai sobre o azul-grafite, e o cinza-prata nunca vira texto. Isso tudo antes de desenhar uma página.

Teste 2: escala de cinza

Converta a tela, o cartaz ou a imagem para preto e branco. Em muitos celulares, há um modo de tela em escala de cinza nas configurações de acessibilidade. Em editores de imagem, basta tirar a saturação.

Veja se a hierarquia sobrevive. O título ainda é o que mais chama atenção? O botão principal ainda se distingue? Se tudo virar uma mancha cinza parecida, suas cores dependem só do matiz e não da claridade. Isso é um sinal de risco, porque a claridade é o que mais ajuda a ler. A diferença entre os conceitos está em matiz, saturação e luminosidade.

Teste 3: simulação de daltonismo

Daltonismo é a dificuldade de distinguir certas cores. Existem simuladores gratuitos que mostram como uma imagem aparece para quem tem essa condição, e alguns navegadores trazem emulação nas ferramentas do desenvolvedor. Passe a imagem por um simulador e procure dois problemas: cores diferentes que ficaram iguais e informações que só existiam pela cor.

Okabe e Ito, dois pesquisadores japoneses que escreveram um guia de cores para pessoas daltônicas, avisam que os simuladores servem de apoio, mas são imperfeitos, e recomendam também buscar a opinião de pessoas daltônicas. Eles sugerem evitar combinações de vermelho com verde e de cores de mesma claridade.

A WCAG tem uma regra de base para isso, o critério 1.4.1: a cor não deve ser o único meio de passar uma informação. Se “pago” é verde e “atrasado” é vermelho, escreva também as palavras. Veja o assunto em não use só a cor para passar informação.

Teste 4: outra tela, outra luz

Olhe a paleta em pelo menos três situações: no computador, no celular com brilho médio e no celular ao ar livre. Cores claras e pastéis somem com o reflexo do sol. Se for projetar, aproxime do cenário real: sala com luz acesa e brilho baixo.

Se o material vai ser impresso, imprima uma folha de teste antes da tiragem. Tela mistura luz e papel mistura tinta, e a cor muda.

Teste 5: uso real, com conteúdo de verdade

Paleta testada só em quadradinhos de cor engana. Aplique-a a um material real, com texto de verdade, foto de verdade e o botão mais longo que existir. Em um site, monte a página inicial e uma página de texto longo. Em um perfil de rede social, monte três posts seguidos e olhe como grupo, não um a um.

Observe:

• A cor de destaque aparece pouco o bastante para ainda destacar?
• Os links se distinguem do texto ao redor?
• Os campos de formulário têm borda visível?
• A página cansa a vista depois de dois minutos?

Para sites, o fluxo completo está em como montar a paleta de cores de um site.

Teste 6: o olhar de fora

Mostre o material a uma pessoa que não participou da criação. Peça duas coisas: que diga o que é a primeira coisa que vê e que leia em voz alta o texto menor. Não explique nada antes. Se a pessoa hesita, o problema é da paleta, não dela.

Se possível, escolha alguém com perfil parecido com o seu público: alguém mais velho, alguém com óculos, alguém que usa o celular com letra grande.

Quatro jeitos de estragar o teste

Testar só no seu aparelho. O seu monitor pode ter calibragem diferente da do público.

Aprovar porque “gostei”. Gosto conta, mas não substitui a conta de contraste.

Testar a paleta sem o conteúdo. Quadrados de cor não mostram o texto sobre foto, por exemplo.

Parar depois de corrigir um problema. Cada correção pode criar outro. Refaça o teste 1 depois de mexer em qualquer cor.

Se um teste reprovar: quatro ajustes pequenos

Falhar num teste é normal. Quase sempre o ajuste é pequeno:

• escureça o texto até chegar a 4,5:1;
• troque a cor de um botão pelo mesmo tom, mais escuro;
• acrescente texto ou ícone onde só havia cor;
• reduza para duas cores fortes se o conjunto está confuso.

Anote a versão final, com o código HEX de cada cor e o papel dela. Quem mexer no material depois vai saber o que pode e o que não pode mudar.