Contraste de Cores - Teste legibilidade de texto e fundo

O que é Contraste de Cores?

Contraste de Cores compara uma cor de texto com uma cor de fundo e mostra se essa combinação continua legível para conteúdo real. O resultado principal é a relação de contraste, apresentada no formato 7.90:1, junto com uma avaliação visual e verificações de legibilidade para texto normal, texto grande e usos que exigem mais segurança.

Este tipo de contrast checker é útil quando uma cor parece bonita isoladamente, mas perde força quando recebe texto, ícones pequenos ou botões por cima. Em vez de decidir apenas pelo olhar, pode testar o par exato, ajustar a luminosidade, rever a opacidade e confirmar se a leitura continua confortável em interfaces claras, escuras ou com cores de marca fortes.

A leitura mais importante é simples: quanto maior for a diferença de luminância entre as duas cores, maior tende a ser a legibilidade. Texto normal costuma precisar de mais contraste do que texto grande, e conteúdos importantes beneficiam de uma margem maior. Estes valores ajudam a decidir se uma combinação serve para parágrafos, menus, botões, etiquetas, alertas ou apenas elementos decorativos.

Como usar Contraste de Cores

Escolha a Cor do texto com o seletor de cor ou escreva o valor HEX no campo correspondente.
Escolha a Cor de fundo da mesma forma, usando o seletor visual ou o campo HEX.
Ajuste Luminosidade quando quiser clarear ou escurecer uma das cores sem mudar totalmente a tonalidade.
Ajuste Opacidade apenas quando o seu design usar transparência real; mantenha 100% para validar cores sólidas.
Veja a pré-visualização do texto, do parágrafo e do botão para perceber como a combinação funciona em elementos de interface.
Leia a Relação de contraste e confirme os estados AA normal, AA grande, AAA normal e AAA grande.
Use Trocar cores para inverter texto e fundo, ou Repor para voltar ao exemplo inicial.
Quando precisar de sugestões, consulte o assistente de contraste e aplique uma alternativa que melhore o par sem abandonar a intenção visual.

Como interpretar a relação de contraste

A relação de contraste compara a luminância relativa da cor mais clara com a da cor mais escura. Uma relação de 1:1 significa que as cores têm praticamente a mesma luminosidade; 21:1 é o contraste máximo possível entre preto e branco. Entre esses extremos, a utilidade depende do tamanho do texto, do peso da fonte e da importância do conteúdo.

Para texto pequeno, nomes de campos, links, mensagens de erro e botões principais, use a leitura de texto normal como referência. Para títulos grandes ou texto muito destacado, a regra de texto grande pode ser suficiente, mas convém não tratar 3:1 como uma solução universal. Em ecrãs móveis, luz exterior, fontes finas ou interfaces densas, uma margem maior costuma evitar fadiga visual.

Resultado visível	Uso mais seguro	Cuidado prático
AAA normal	Parágrafos, navegação, formulários e texto crítico.	Pode parecer demasiado forte em áreas decorativas muito grandes.
AA normal	Texto comum, botões e etiquetas importantes.	Teste também estados hover, disabled e modo escuro.
AA grande	Títulos grandes, números grandes e destaques curtos.	Não use como referência para parágrafos pequenos.
Falha	Decoração, fundos suaves ou separadores sem texto essencial.	Não use para conteúdo que o utilizador precisa de ler.

Quando testar texto e fundo

Teste contraste antes de publicar uma paleta, antes de transformar uma cor de marca em botão, e sempre que usar texto sobre fundos saturados. Tons como amarelo, ciano, laranja claro, vermelho vivo e roxo intenso podem parecer fortes, mas nem sempre criam leitura suficiente com branco ou preto. O valor exato depende da luminância, não apenas do nome da cor.

Contraste de Cores também ajuda durante pequenas decisões de UI. Um badge, uma etiqueta de formulário ou um botão secundário pode falhar mesmo quando o cabeçalho principal parece legível. A melhor prática é verificar cada função visual: texto sobre fundo, ícone sobre botão, link sobre painel, mensagem sobre alerta e texto claro sobre fotografia ou gradiente.

Quando estiver a escolher uma nova cor, abra também o Seletor de Cor para encontrar um HEX mais adequado e volte a testar o par. Se tiver várias cores para comparar ao mesmo tempo, use Contraste de cores Pro para rever a matriz de combinações antes de decidir a paleta final.

Erros comuns em verificações de contraste

Validar só a cor principal: uma marca pode ter bom contraste no logótipo e mau contraste em botões, links ou textos pequenos.
Ignorar opacidade: texto a 70% de opacidade pode falhar mesmo quando a versão sólida passaria.
Confiar apenas no branco ou no preto: algumas cores médias precisam de um tom claro ou escuro ajustado, não de uma escolha automática.
Esquecer estados de interface: hover, foco, disabled, erro e sucesso podem usar cores diferentes das versões normais.
Usar contraste para substituir significado: contraste melhora leitura, mas erros e avisos também precisam de texto, ícones ou padrões além da cor.

Boas práticas para pares acessíveis

Comece pelo conteúdo mais importante. Se um par de cores serve para texto de corpo, provavelmente também funcionará para muitos elementos curtos. O contrário nem sempre é verdade: uma combinação aceitável para um título grande pode falhar em parágrafos, menus ou legendas. Por isso, valide primeiro o cenário mais exigente.

Quando a combinação falha por pouco, ajuste a luminosidade de uma das cores em pequenos passos. Normalmente é melhor escurecer o fundo ou clarear o texto sem alterar demasiado a identidade visual. Se a cor tiver valor de marca rígido, experimente criar variantes específicas para texto, fundos e estados interativos.

Use o resultado como uma decisão de design, não como uma formalidade. Um color contrast checker confirma números, mas a aplicação final ainda precisa de hierarquia clara, tamanhos legíveis, espaçamento suficiente e estados de foco visíveis. O melhor par é aquele que mantém a intenção visual e permite ler sem esforço.

Como ajustar sem perder a intenção visual

Quando uma combinação falha, nem sempre é necessário abandonar a paleta. Muitas vezes basta criar uma variante ligeiramente mais escura para fundos claros, uma variante mais clara para fundos escuros, ou uma versão sólida quando a opacidade está a reduzir a legibilidade. O controlo de luminosidade ajuda a testar esse tipo de ajuste sem trocar completamente de cor.

Para botões e chamadas de ação, valide também o estado inverso. Um botão pode usar texto claro sobre fundo escuro no estado normal, mas passar para um tom mais claro no hover e perder contraste. O mesmo acontece com focos, bordas, sombras e indicadores de seleção. Se o par só passa numa condição, documente a condição exata para não ser reutilizado de forma errada.

Em interfaces com temas, crie pares aprovados em vez de guardar apenas cores isoladas. Por exemplo, uma cor de texto primária deve ter fundos aprovados; uma cor de fundo de aviso deve ter texto aprovado; uma cor de link deve funcionar no fundo onde aparece. Esta abordagem evita que boas cores individuais formem más combinações.

Exemplos práticos de leitura do resultado

Se o resultado passa em AA normal, a combinação é uma candidata razoável para texto comum, mas ainda vale rever se a fonte é muito fina, se o texto aparece sobre uma área pequena ou se o utilizador verá o conteúdo em telemóvel. Se passa apenas em AA grande, reserve o par para títulos, números grandes ou blocos curtos com forte peso visual.

Se a relação fica abaixo de 3:1, trate o par como decorativo. Pode servir para fundos suaves, divisores ou ilustrações, mas não para informação que precise de leitura imediata. Para alertas, mensagens de erro e botões de confirmação, prefira uma margem de contraste superior, porque esses elementos normalmente exigem compreensão rápida.

Para equipas que reutilizam componentes, guarde o par aprovado juntamente com o uso recomendado. Assim, a mesma cor não é aplicada por engano em texto pequeno, botões compactos ou fundos translúcidos.