Contraste do texto e contraste dos componentes são verificações diferentes. Na WCAG 2.2 nível AA, texto comum precisa atingir 4,5:1; texto grande (pelo menos 18 pt regular ou 14 pt em negrito) pode usar 3:1. O critério 1.4.11 pede 3:1 contra cores adjacentes para a informação visual necessária para identificar controles, estados e gráficos essenciais.
Verifique cada componente e estado
- Liste campos, botões, caixas de seleção, links, ícones funcionais, gráficos e indicadores de foco.
- Para cada um, registre as cores em contexto real: fundo adjacente, preenchimento, borda, ícone, texto e estado. Faça a medição de texto pelo critério 1.4.3 e a do contorno/indicador pelo 1.4.11; não use a razão do texto para validar uma borda.
- Repita para normal, hover, foco, pressionado, selecionado, erro e expandido. Cor sozinha não deve ser a única forma de comunicar erro/seleção: acrescente texto, ícone ou forma quando necessário.
- Confirme a cor de foco contra o fundo e a superfície do próprio controle. Critério AA exige foco visível (2.4.7); 2.4.13 acrescenta tamanho mínimo e mudança de contraste, mas é nível AAA, não um requisito AA universal.
- Teste tema claro/escuro, zoom e telas reais; campos sobre fotografia/gradiente podem ter relação diferente conforme a área. Escolha a combinação de menor contraste quando um gráfico usar várias cores.
Como interpretar exceções
Controles inativos e aparência determinada pelo navegador sem modificação do autor têm exceções no critério não textual. Elementos puramente decorativos, logotipos e representações cuja aparência seja essencial também têm exceções específicas. Não aplique a exceção a um botão ativo apenas porque é “secundário”; se precisa ser reconhecido ou indicar estado, examine o requisito.
Use um verificador de contraste para obter a razão entre cores sRGB, mas confira se amostrou as cores adjacentes corretas. Valores próximos ao limite devem ficar acima dele; a W3C esclarece que 2,999:1 não arredonda para 3:1. Linhas muito finas podem parecer menos visíveis que o valor nominal, portanto prefira margem confortável.
Consulte os textos oficiais de Contraste mínimo (1.4.3), Contraste não textual (1.4.11), Foco visível (2.4.7) e Aparência do foco (2.4.13, AAA). Para revisar outras áreas, veja o núcleo de desempenho e acessibilidade.