As cinco funções de cor
Em “Design” e “Cores” encontras “A tua paleta de cores”. Cada cor tem uma tarefa: “Fundo” é a base de toda a página, “Superfície” é tudo o que assenta nela — cartões, caixas, campos. “Cor do texto” aplica-se ao texto corrido, “Cor de destaque” aos botões, às ligações e a tudo o que executa ações. “Texto nos botões” é o texto sobre o destaque; se o deixares vazio, calculamo-lo de forma a ser legível.
Defines uma cor com um clique na respetiva amostra ou escreves o valor hexadecimal por baixo, por exemplo #8A4B2E, e confirmas com Enter. Uma amostra tracejada significa: ainda não definida, o modelo decide. O × ao lado de uma cor definida volta a libertá-la, e o pequeno i ao lado de cada função explica-a numa frase.
- Abre “Design” e escolhe “Cores”.
- Clica na amostra de uma função ou escreve o respetivo valor hexadecimal.
- Vê o resultado na pré-visualização — tudo é guardado automaticamente.
Combinações na roda de cores
“Explorar combinações de cores” abre a roda de cores. O ponto grande é a “Cor base”, que é a tua cor de destaque: o que escolheres na roda é guardado de imediato como cor de destaque. Arrastas o ponto com o rato ou com o dedo; quando tem o foco, também funcionam as teclas de seta, e com a tecla Shift em passos maiores. O controlo deslizante “Brilho” por baixo torna a cor mais clara ou mais escura.
Ao lado escolhes uma “Harmonia”: “Análogo”, “Monocromático”, “Complementar”, “Complementar dividido”, “Triádico”, “Quadrado”, “Tons” ou “Próprias”. A “Paleta” por baixo mostra as cores correspondentes com o valor hexadecimal; “Usar como…” por baixo de uma cor aplica-a a uma única função.
“Aplicar à marca” distribui a paleta de uma só vez: a base como destaque e ainda um fundo claro, uma superfície clara, uma cor de texto escura e um texto de botão a preto ou branco — calculado para ser legível. Depois podes alterar cada função individualmente.
- Em “Cores”, expande “Explorar combinações de cores”.
- Arrasta o ponto grande para a tua cor principal e escolhe uma harmonia.
- Clica em “Aplicar à marca”.
Legibilidade
Por baixo da paleta, a caixa “Legibilidade” mede quatro pares de cores: “Texto sobre fundo”, “Texto sobre superfície”, “Texto nos botões” e “Destaque sobre fundo” — segundo as WCAG, no mínimo 4,5:1. Cada par mostra o seu contraste e uma avaliação em palavras: “Muito boa legibilidade”, “Boa legibilidade”, “No limite — difícil de ler” ou “Ilegível”. Um par em que uma das cores ainda não está definida não é medido.
Se um par não for legível, o aviso aparece junto das duas cores (“Contraste insuficiente com: …”) e a caixa mostra a consequência em cada ferramenta. “Substituído em: …” significa que essa ferramenta mostra aí uma cor legível em vez da tua — o website, o formulário e o WordPress usam preto ou branco, a loja usa primeiro a sua própria cor. “Mantém-se em: …” significa que a ferramenta mostra exatamente as tuas cores, mesmo que sejam difíceis de ler.
Por baixo aparece então “Assim fica legível”: até três paletas prontas, em que todos os pares passam. Calculamos todos os pares em conjunto, para que nenhuma correção estrague outro par — cada cor fica apenas mais clara ou mais escura e mantém o seu tom; o texto nos botões mantém a tua cor ou passa a preto ou branco. Uma pequena pré-visualização mostra os quatro pares de cada sugestão e, ao lado, como muda cada cor. “Aplicar” aplica a paleta à tua marca, “Anular” repõe as tuas cores.
Cores legíveis ajudam toda a gente: pessoas com problemas de visão e todos os que olham para o telemóvel à luz do sol.
Verificar o contraste em detalhe
“Verificar o contraste em detalhe” analisa um par em pormenor. No topo escolhes o par; a sua relação de contraste aparece em grande, por exemplo 5,20 : 1. Por baixo estão o primeiro plano e o fundo, cada um com uma amostra e um controlo deslizante “Brilho” — o que alterares aqui altera a cor da tua marca.
A tabela mostra que níveis o par atinge: “Texto grande”, “Texto pequeno” e “Gráficos e interface”, cada um para AA e AAA, com “Passa” ou “Falha”. O texto corrido precisa de 4,5:1 e os títulos grandes de 3:1; para um destaque ao lado do fundo bastam 3:1. Ao lado vês o par como uma pequena página com título e parágrafo.
Se o contraste não chegar, aparecem “Sugestões — o mesmo tom, só mais claro ou mais escuro”: um clique aplica a cor sugerida à função. Se com esse tom não for possível de todo, a caixa indica que tens de escolher de novo uma das duas cores.
- Em “Cores”, expande “Verificar o contraste em detalhe”.
- Escolhe no topo o par que não é legível.
- Clica numa sugestão ou arrasta o controlo deslizante “Brilho” até aparecer “Passa”.