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.
Serviços de sites institucionais
Veja o escopo e os próximos passos do serviço relacionado a este tema.
Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.