Sites institucionais · GUIA PRÁTICO

Como revisar contraste de texto e controles

Meça texto, limites e estados de componentes contra o fundo. Priorize pares problemáticos e confira foco, links e estados sem depender só da cor.

Baixo contraste pode tornar textos, limites de campos e indicadores de foco difíceis de perceber. Faça a revisão por pares de cores e estados: texto normal, texto ampliado, controles, links e foco não são todos avaliados da mesma maneira.

Liste as combinações que aparecem na interface

Registre cor do texto e cor de fundo para cada componente importante: títulos, corpo, texto de ajuda, botão, borda de campo, link, estado desativado e foco. Verifique cada par no estado normal e nas variações de hover, seleção e erro.

O critério WCAG de contraste mínimo usa razões distintas por tipo de conteúdo: em geral, texto normal requer 4,5:1 e texto grande 3:1. Componentes de interface e informação gráfica necessária para identificar controles têm critérios próprios. Consulte a explicação de contraste textual da W3C e a de contraste não textual antes de concluir.

Corrija primeiro os elementos necessários à tarefa

Priorize texto de formulário, botões, links, mensagens de erro e foco do teclado. Um botão com texto legível ainda pode ter uma borda tão fraca que seu limite não seja identificável. Não comunique sucesso e erro só por verde e vermelho: acrescente texto, ícone com nome ou outro sinal que não dependa apenas da cor.

Quando trocar cores, preserve estados coerentes em todos os componentes e teste a marca inteira, não somente a home. Confira também imagens com texto, gráficos e capturas de tela: texto dentro de imagem tem limitações de leitura, ampliação e adaptação.

Valide com ferramenta e inspeção visual

Use um verificador de contraste para calcular os pares da paleta, mas confirme qual região da página e qual estado está sendo medido. Gradientes, transparências, imagens e elementos sobrepostos podem tornar o valor diferente da cor de base. Depois, veja a página com zoom e em tela pequena; o valor calculado não revela sozinho hierarquia, tamanho de fonte ou texto cortado.

Teste a navegação por teclado e confirme que o foco tem contraste suficiente contra a área ao redor. O critério WCAG 2.2 de aparência do foco é nível AAA, diferente do requisito AA de foco visível; consulte a explicação de Focus Appearance ao definir uma meta mais exigente.

Registre cor, componente, estado, ferramenta usada e correção para que a equipe possa repetir a verificação após trocar tema ou marca. Contraste é uma parte de uma avaliação de acessibilidade, não certificado completo.

Continue por aqui