Paletas de cores vivas que continuam legíveis

Uma paleta de cores vivas mantém-se legível quando trata cada cor vibrante pela sua luminosidade e não pela sua intensidade. O limão #FFD60A, o verde vivo #34C759, o azul-turquesa #00C2FF e a tangerina #FF7A00 são todos suficientemente claros para pedir texto quase preto. O rosa choque #FF2D87 e o vermelho papoila #FF3B30 ficam num meio-termo difícil: o texto preto passa, mas o branco só funciona em títulos grandes. Junte uma cor âncora calma, dê a cada cor viva o seu espaço, e uma paleta que parece uma loja de doces passa a ser uma onde se pode mesmo escrever.

Que cores vivas pedem texto preto

A saturação faz uma cor parecer forte, mas a legibilidade depende da luminosidade. Muitas cores vivas são bem mais claras do que parecem, e é por isso que o texto branco sobre verde vivo ou amarelo é berrante e continua difícil de ler. A tabela abaixo mede onze cores vivas contra o branco e contra o quase preto #111111.

Uma regra prática: o lado claro da roda, do laranja ao amarelo e ao verde até ao ciano, leva preto, tal como os rosas e vermelhos mais quentes; o lado profundo, do azul ao violeta e ao carmesim, leva branco. Se desenha para um público amplo, leia também paletas amigas dos daltónicos, porque cores vivas que só diferem no matiz podem parecer iguais a alguns leitores.

Seis paletas de cores vivas com códigos hex

• Festa na piscina: azul-turquesa #00C2FF, verde vivo #34C759, limão #FFD60A, branco #FFFFFF, azul-marinho profundo #0B1F3A para o texto.
• Escola primária: azul cobalto #1D4ED8, vermelho sinal #C81D11, limão #FFD60A, papel #FAF7F0, tinta #111111.
• Impressão riso: rosa fluorescente #FF48B0, azul #0078BF, amarelo #FFE800, papel de jornal #F2EFE6, preto #1A1A1A.
• Tropical: framboesa #E0115F, manga #FFA51F, palmeira #00A86B, areia #F6EBD9, cacau #2B1B14.

Como manter legível uma paleta de cores vivas

1. 1

   Escolha primeiro uma âncora

   Escolha um quase preto ou um branco quente e deixe-o cobrir a maior parte da superfície. O branco quente #FFF8EC com tinta #111111 mede 17,89:1, por isso todas as palavras em tinta leem-se bem.

2. 2

   Componha o texto na âncora, não numa cor viva

   O texto corrido pertence à cor âncora. As cores vivas podem levar um título ou um único número grande, onde se aplica o limiar de 3:1 para texto grande.

3. 3

   Separe cores vivas de igual luminosidade

   O rosa choque ao lado de um azul elétrico como #2F6BFF mede 1,28:1, e a fronteira parece cintilar. Ponha branco, preto ou espaço entre eles, ou combine uma cor viva clara com uma profunda.

4. 4

   Limite quantas cores vivas tocam nas palavras

   Três cores vivas numa paleta é mais do que suficiente, e só uma deve ficar atrás de qualquer bloco de texto. A regra 60 30 10 ajuda: âncora 60, cor viva principal 30, acentos 10.

5. 5

   Teste-a num telemóvel, ao ar livre

   As cores vivas desbotam ao sol e em ecrãs com pouco brilho. Se as palavras ainda se leem num telemóvel com o brilho baixo, a paleta funciona.

A versão da direita é o que o Gradiently faz por defeito. Um Mark sabe onde estão as suas palavras, afasta delas a cor mais agitada e escolhe letra clara ou escura linha a linha, por isso pode manter uma paleta ruidosa sem caixa nem sombra atrás do texto.

Gradientes vivos sem meio cinzento

Misture duas cores vivas de lados opostos da roda em sRGB simples e o ponto médio fica cinzento ou castanho. Ou escolhe vizinhas, ou pede ao navegador que interpole em oklch, o que mantém o meio saturado. Interpolação de gradientes explica a diferença.

Para mais combinações, veja gradientes vibrantes e gradientes néon. Para orientação completa sobre contraste, leia contraste de cor.

Um aviso se a paleta for impressa: as cores de ecrã mais elétricas, sobretudo o azul-turquesa, o rosa choque e o verde vivo, ficam fora do que as tintas CMYK normais reproduzem, e saem da gráfica visivelmente mais baças. Peça uma prova ou conte com tintas diretas ou fluorescentes. RGB vs CMYK explica o que esperar.