Como escolher cores para uma interface digital

Para escolher cores para um site ou uma aplicação, começar por definir o que cada cor deve fazer. Texto, fundo, ligações, ações principais, avisos e erros não precisam de tonalidades escolhidas ao acaso. Depois de estabelecer estes papéis, selecionar uma cor de partida, obter os formatos técnicos necessários e testar a paleta nos componentes reais. A verificação do contraste deve ser feita separadamente.

Este processo aplica-se ao design digital. Não pretende responder a escolhas de tinta, decoração ou vestuário, ainda que a pesquisa "como escolher cores" também possa aparecer nesses contextos.

Definir as funções antes das tonalidades

Uma paleta cromática torna-se mais fácil de manter quando cada valor tem uma função documentada. O GOV.UK Design System associa cores a usos concretos, como texto, ligações, estados de erro e superfícies. Os seus valores não formam uma paleta universal para marcas portuguesas, mas a organização funcional é uma referência útil.

Antes de abrir um seletor, criar uma pequena lista:

1. cor do texto principal;
2. fundo da página e das superfícies;
3. cor de destaque para a ação principal;
4. estados de foco, passagem e desativação;
5. cores para erro, aviso e sucesso.

Num site de uma pequena empresa portuguesa, esta lista pode ser curta. O objetivo não é atingir um número fixo de cores. É garantir que cada cor resolve um problema identificável e que funções iguais mantêm o mesmo tratamento.

Escolher uma cor de partida com contexto

A cor de partida pode vir da identidade existente, de um produto ou de uma decisão visual do projeto. Convém observá-la ao lado de texto, fotografias e fundos, e não apenas como amostra isolada. Evitar justificações como "esta cor significa sempre confiança". A ficha académica da Universidad de La Sabana resume um estudo que encontrou padrões partilhados e diferenças ligadas à proximidade linguística e geográfica.

Para manter a escolha reproduzível, registar o valor técnico. O runtime verificado do seletor SmartPlusLab aceita uma cor hexadecimal com três ou seis algarismos. Esta validação permite converter o valor, mas não avalia se a cor é adequada ao setor, à marca ou ao público.

Construir uma hierarquia visual coerente

Usar a cor para reforçar a hierarquia, não para a substituir. Um botão principal pode ter uma cor de destaque, mas a sua importância também depende do texto, da posição, da forma e do espaço em redor. Se cada botão receber uma cor diferente, a ação prioritária pode deixar de ser evidente.

Testar a paleta nos elementos que serão realmente publicados:

• parágrafo e título sobre o fundo final;
• ligação dentro de um bloco de texto;
• botão principal e botão secundário;
• mensagem de validação ou erro;
• estados de foco e elemento desativado.

Esta passagem revela conflitos que uma fila de amostras não mostra. Também permite verificar se a cor é o único sinal de uma alteração. Sempre que a compreensão depender apenas da tonalidade, acrescentar texto, ícone ou outra indicação visual adequada.

Verificar contraste e legibilidade

As WCAG 2.2 do W3C estabelecem, no critério 1.4.3, uma relação mínima de contraste de 4,5:1 para texto normal e de 3:1 para texto de grande dimensão, com as exceções previstas na norma. O cálculo deve usar a cor do conteúdo e o fundo efetivamente aplicado.

O seletor SmartPlusLab não calcula esta relação. O runtime apresenta uma estimativa de luminosidade ponderada numa escala de 0 a 255, mas esse número não é um resultado WCAG. Não serve para declarar um texto acessível. Mesmo uma relação de contraste conforme não permite concluir que toda a interface é acessível: é necessário avaliar componentes, estados, navegação e utilização da cor.

Escolher entre HEX, RGB e HSL

A especificação CSS Color Module Level 4 descreve várias sintaxes e espaços de cor usados na Web. HEX, RGB e HSL podem representar o mesmo valor sRGB com notações diferentes. A escolha prática depende do sistema de design ou do código onde o valor será usado.

No comportamento verificado, um input hexadecimal de três ou seis algarismos pode ser convertido para HEX, RGB e HSL. Com format igual a all, as três representações são devolvidas. Ao selecionar hex, rgb ou hsl, o resultado contém apenas o formato escolhido. A especificação CSS inclui possibilidades mais amplas, mas isso não prova que o seletor suporte outros formatos.

Exemplo verificado com #3498db

Suponha-se que a cor de destaque de um site é #3498db. Ao introduzir esse valor e escolher all, o caso runtime verificado devolve:

• HEX: #3498db;
• RGB: rgb(52, 152, 219);
• HSL: hsl(204, 70%, 53%).

Os três resultados representam a mesma cor no caso testado. Não constituem uma paleta completa nem uma recomendação estética. Para aplicar a cor num botão, escolher primeiro o texto e o fundo, calcular a relação de contraste com um instrumento próprio e repetir o teste nos estados de foco, passagem e desativação.

Rever a paleta no produto real

Antes de fechar a escolha, observar a interface em diferentes tamanhos de ecrã e condições de utilização. Confirmar que os estados continuam distinguíveis e que as cores funcionais mantêm o mesmo significado. A orientação do W3C WAI sobre avaliação recorda que nenhuma ferramenta automática determina, sozinha, a conformidade global de um produto digital.

O seletor não gera harmonias, não escolhe cores complementares, não mede contraste WCAG e não garante reprodução idêntica em todos os ecrãs. Também não há, neste pacote, factos aprovados sobre conservação ou tratamento dos valores introduzidos.

A página portuguesa do seletor e as páginas dos instrumentos relacionados ainda não estão publicadas. Por esse motivo, este texto não contém ligações internas para destinos inexistentes.

Perguntas frequentes

Quantas cores deve ter uma paleta?

Não existe um número obrigatório. Definir os papéis necessários e adicionar apenas os valores que tenham uma função clara.

HEX, RGB e HSL produzem cores diferentes?

No exemplo verificado são notações diferentes do mesmo valor sRGB. A conversão não altera, por si só, a qualidade da combinação.

A luminosidade apresentada prova que o contraste é suficiente?

Não. É uma estimativa ponderada e não a relação de contraste definida pelas WCAG.

Quando está concluída a escolha?

Quando os valores foram testados nos componentes e estados reais, o contraste foi verificado separadamente e a informação continua compreensível sem depender apenas da cor.