Como verificar o contraste das cores de um site

Identifique o texto e o fundo real

Comece por um elemento específico: um parágrafo, um rótulo de formulário ou o texto de um botão. Anote a cor das palavras e o fundo imediatamente abaixo. Uma cor declarada em uma classe pode ser substituída por outra regra; confira os estilos calculados do elemento no navegador. A transparência também muda a cor efetiva ao misturá-la com o fundo. O verificador aceita cores HEX opacas de três ou seis dígitos. Se o projeto usa transparência, determine primeiro a cor resultante da composição. Não substitua automaticamente o valor CSS por uma amostra de uma captura comprimida: a suavização pode gerar muitos tons nas bordas das letras. Guarde os códigos originais para comparar.

Interprete a relação e os quatro resultados

Digite os dois códigos e pressione Verificar contraste. Uma relação de 1:1 corresponde a cores com luminância igual; preto sobre branco dá 21:1. Os quatro resultados distinguem AA e AAA para texto normal e grande. AA exige 4,5:1 para texto normal e 3:1 para grande; AAA exige 7:1 e 4,5:1, respectivamente. A decisão usa o valor completo antes de arredondar o número exibido. Por isso, deixe uma margem ao escolher uma combinação próxima do limite. Um resultado aprovado verifica apenas esse contraste do texto. Não certifica a página inteira, que também depende de teclado, rótulos, ordem do conteúdo e outros critérios a verificar na interface real.

Faça uma prova que possa repetir

Carregue o exemplo preto e branco e confira a relação 21:1 com os quatro resultados atendidos. Depois altere o texto para #777777 sobre #FFFFFF. A relação será aproximadamente 4,478:1: o texto normal não atende AA, embora uma exibição com poucos decimais pareça próxima de 4,5. Volte a um tom mais escuro e compare. Mude apenas uma variável de cada vez para entender o motivo da melhora. Salve os dois códigos junto com o resultado e o componente revisado. O TXT baixado preserva a saída, mas um registro útil também identifica onde essas cores são utilizadas. Repita a verificação depois de alterar a folha de estilos.

#000000 / #FFFFFF → 21:1
#777777 / #FFFFFF → 4.478089453577214:1

Confira o tamanho sem confundir px e rem

A categoria de texto grande começa em 24 pixels CSS para peso normal, ou aproximadamente 18,67 pixels em negrito. Confira tamanho e peso calculados, não apenas a aparência da prévia. Se o projeto usa rem, configure no conversor a base real do elemento html. Com raiz de 16 px, 1,5 rem equivalem a 24 px; com raiz de 20 px, equivalem a 30 px. A base inicial é uma conveniência, não uma medição da página. Trocar a unidade não torna automaticamente legível um texto pequeno ou muito fino. Confira também a fonte escolhida e uma amostra representativa do conteúdo final no componente.

Revise estados e fundos variáveis

Confira separadamente links visitados, indicadores de foco, botões sob o ponteiro e mensagens de erro. Evite usar apenas uma diferença de cor para comunicar um estado: acrescente texto, um ícone reconhecível ou outra indicação. Ao usar o gerador de gradientes, lembre que um fundo de duas cores contém tons intermediários e muda conforme as dimensões do elemento. Duas amostras não validam automaticamente toda a transição. Examine as áreas sob o texto real ou coloque uma superfície uniforme atrás das palavras. Por fim, teste o componente em seu contexto, com zoom do navegador e em uma janela estreita. Guarde as cores finais junto aos estilos para conferir revisões posteriores.