Contraste de cores da marca: teste textos e botões

Para testar o contraste das cores da marca, compare a cor exata do texto com a do fundo na aplicação real. Registre os códigos, meça a relação de contraste e confira o tamanho da letra e os estados do componente. Uma paleta aprovada pode precisar de pares diferentes para títulos, textos, botões e avisos.

O problema aparece quando uma escolha funciona como detalhe decorativo e passa a ser usada em uma frase pequena. O laranja do logotipo, por exemplo, não precisa assumir a função de texto em todas as peças. Podemos preservar a identidade e escolher uma aplicação mais legível.

Este guia mostra como conferir esses pares e documentar a decisão. O guia de branding explica como identidade, comunicação e experiência se relacionam; aqui, o recorte é a leitura de textos e controles em páginas digitais.

Separe a paleta da combinação que será usada

Uma lista de cores não informa qual delas será letra, fundo ou contorno. Comece por uma peça concreta, como a página de um serviço, e registre cada combinação. Inclua corpo do texto, links, rótulos, mensagens de erro e botões. Quando o fundo mudar, trate a combinação como outro caso.

Os códigos precisam representar a versão publicada. Um arquivo de criação pode mostrar branco sobre um tom escuro, enquanto o site aplica transparência ou outro fundo. No navegador, o responsável pela implementação pode conferir as cores e o tamanho efetivamente usados. Em fotografias e gradientes, examine também a região de menor contraste sob a mensagem.

Use a referência adequada para cada elemento

No nível AA, o critério 1.4.3 das WCAG 2.2 estabelece pelo menos 4,5:1 para texto comum e 3:1 para texto grande, observadas suas exceções. A referência de texto grande é 18 pontos ou 14 pontos em negrito. Para a aplicação em CSS, podemos usar aproximadamente 24 px ou 18,67 px em negrito como correspondência, conferindo a fonte realmente renderizada.

Não arredonde uma relação inferior para aprová-la no limite. Um resultado de 4,499:1 não atende ao requisito de 4,5:1. Prefira uma margem de contraste em vez de trabalhar deliberadamente no ponto mais próximo da reprovação. Tipos muito finos também podem dificultar a leitura mesmo com um par nominalmente suficiente.

A exceção de logotipos não libera o restante da comunicação da marca. A frase de um botão e o corpo de uma página precisam de avaliação própria. Da mesma forma, não transforme qualquer texto em “grande” apenas porque recebeu uma classe chamada título.

Para controles e gráficos, o critério 1.4.11 examina informações visuais necessárias à identificação de componentes, estados e partes gráficas, com relação mínima de 3:1 contra cores adjacentes e as exceções descritas no documento. Isso exige analisar a função: a letra do botão e um contorno necessário para reconhecer um campo são verificações diferentes.

Exemplo calculado: três aplicações do laranja

Exemplo didático: considere uma página fictícia com rótulos de botão de 16 px, sem transparência, usando branco #ffffff, grafite #242424, laranja #ff8200 e um tom mais escuro #984700. Os cálculos abaixo usam pares sólidos em sRGB. São demonstrações de aplicação, sem promessa de efeito sobre cliques ou vendas.

Demonstração de pares sólidos para texto comum de 16 px. Os exemplos abaixo são amostras, sem botão funcional.

2,49:1. Não atende

NÃO ATENDE ao mínimo de texto comum.

Ver a proposta

Texto #ffffff; fundo #ff8200.

6,24:1. Atende

ATENDE ao contraste de texto comum.

Ver a proposta

Texto #242424; fundo #ff8200.

6,49:1. Atende

ATENDE ao contraste de texto comum.

Ver a proposta

Texto #ffffff; fundo #984700.

Descrição da figura

Para o caso de teste de texto comum de 16 px, o mínimo considerado é 4,5:1. Branco #ffffff sobre laranja #ff8200 tem contraste aproximado de 2,49:1 e não atende. Grafite #242424 sobre #ff8200 tem 6,24:1 e atende. Branco sobre laranja escuro #984700 tem 6,49:1 e atende. A decisão usa valores completos; duas casas são apenas apresentação. As amostras não são botões funcionais. A avaliação cobre pares sólidos, sem validar todos os estados, a identificação do componente ou a acessibilidade completa da página.

Os valores foram calculados pela definição de luminância relativa das WCAG e pela relação entre as luminâncias mais clara e mais escura: (mais clara + 0,05) ÷ (mais escura + 0,05). As casas decimais exibidas facilitam a consulta; a decisão usa o resultado completo.

No primeiro par, aumentar um pouco a letra não resolve o problema do rótulo de 16 px. As alternativas mostradas mudam a cor da letra ou a do fundo. Não são as únicas escolhas possíveis. Depois de escolher um par, confira também a identificação do controle, seu foco e o conjunto da página.

A fotografia da capa apresenta materiais impressos apenas como contexto ilustrativo. A medição deste roteiro se refere à aplicação digital. Papel, tinta, acabamento e iluminação pedem uma conferência própria; os números da tela não validam automaticamente uma impressão.

Faça a conferência da peça em uma sequência curta

Primeiro, escolha o elemento e anote as cores em hexadecimal, como #242424. Em um verificador que aplique a fórmula das WCAG, informe o texto como primeiro plano e a superfície atrás dele como fundo. Leia o resultado conforme o uso e guarde o par medido. Se o elemento tiver opacidade, descubra a cor resultante ou use um método que considere a composição; não compare códigos que nunca aparecem juntos na tela.

Depois, examine o tamanho e o peso reais da fonte. A classificação usada para ler o resultado precisa corresponder ao que a pessoa recebe. Uma imagem de texto que é reduzida no celular pode deixar de ter o tamanho visual considerado no projeto.

Por fim, teste o componente em repouso, ao receber foco e nos demais estados disponíveis. Passe pelo percurso com teclado e confira os avisos que surgem. Um botão pode começar legível e perder contraste quando o estilo muda. Faça esse teste na página publicada, com os textos finais, em vez de encerrar a revisão na amostra da paleta.

Registre o que foi testado e o que ficou pendente. Se você apenas mediu quatro pares sólidos, descreva esse alcance. Navegação, estrutura, ampliação, alternativas textuais e outras necessidades exigem verificações adicionais.

Mantenha o significado quando a cor não for percebida

O critério 1.4.1 sobre uso de cor pede que ela não seja o único meio visual de transmitir informação ou indicar uma ação. Em um aviso, escreva a dificuldade e o ajuste esperado. Em uma comparação, identifique as séries ou situações com rótulos, além dos tons.

No exemplo visual deste artigo, “não atende” e “atende” aparecem por escrito ao lado dos valores. A interpretação não depende de distinguir laranja de grafite. Nos links em meio ao texto, uma pista como o sublinhado também ajuda a reconhecer a interação.

Ao criar as orientações da marca, reserve espaço para essas aplicações. Nosso guia de cores no marketing situa a paleta no contexto da mensagem e do teste. Associações emocionais presumidas não substituem legibilidade nem uma observação do uso.

Modelo para registrar e liberar uma combinação

Página, peça e versão:
Elemento e finalidade:
Texto ou informação apresentada:
Cor do texto ou elemento:
Cor do fundo e superfícies adjacentes:
Opacidade, fotografia ou gradiente envolvidos:
Tamanho e peso da fonte renderizada:
Estado examinado: padrão, foco, hover, erro ou outro
Método ou verificador utilizado:
Relação calculada sem arredondamento:
Referência e limite aplicáveis:
Resultado, ajuste necessário e responsável:
Pista de significado além da cor:
Dispositivos e condições conferidos:
Data da nova conferência e evidência:
Pendências fora deste teste:

Depois de corrigir o par, repita a medição e confira a publicação. Inclua o exemplo aprovado no guia da equipe com sua finalidade. Se o modelo do site ou a paleta mudar, revise as aplicações afetadas, preservando o registro da decisão.

Perguntas frequentes sobre contraste de cores

Posso usar a cor do logotipo em todos os textos?

O uso precisa ser conferido por combinação e finalidade. A exceção aplicável a logotipos não se estende automaticamente a parágrafos, links e botões. Você pode preservar a identidade e escolher outra aplicação para a leitura.

O branco funciona sobre qualquer laranja?

Não. O tom exato altera a relação de contraste. No exemplo, branco sobre #ff8200 não alcança o mínimo para texto comum. Confira os códigos e a aplicação real antes de liberar a combinação.

Basta aumentar a fonte para corrigir o contraste?

Não necessariamente. Há uma exigência própria para texto grande, e o tamanho precisa corresponder à apresentação final. Escolher um par mais contrastante pode ser uma solução mais adequada do que ampliar todos os rótulos.

Um botão com texto legível já está totalmente conferido?

Ainda é preciso examinar como o controle é identificado, seus estados e o foco, conforme o caso. O contraste do rótulo é uma parte da revisão, não uma avaliação completa da interação.

Conferir contraste certifica a acessibilidade do site?

Não. O roteiro examina combinações e usos específicos. Acessibilidade envolve outras verificações, dispositivos e necessidades de acesso. Registre o alcance do teste e encaminhe as demais pendências.

Se a equipe precisa transformar escolhas visuais em orientações de produção, converse conosco sobre o contexto da marca. Podemos ajudar a organizar prioridades e critérios para os materiais, com escopo definido.