GUIAS PRÁTICOS · Web e códigos
Confira o contraste sem arredondar um resultado insuficiente
Cores diferentes podem gerar texto difícil de ler. Meça o par efetivo e confira tamanho do texto, composição do fundo e estados da interface.
1. Identifique as cores efetivas
Verifique a cor das letras e o fundo imediatamente atrás. Uma paleta geral não basta quando o mesmo texto aparece em superfícies diferentes.
A ferramenta compara duas cores hexadecimais opacas. Não examina automaticamente uma página nem reconstrói transparências, imagens ou gradientes atrás do texto.
2. Escolha o critério adequado
WCAG AA exige pelo menos 4,5:1 para texto normal e 3:1 para texto grande. A categoria depende de tamanho e peso definidos no critério, não de ser um título.
Para escrita latina, grande significa pelo menos 18 pontos normais ou 14 em negrito, com equivalências para outras escritas. Em caso de dúvida, confira a exigência mais rigorosa.
Teste de contraste de cores WCAG3. Leia a razão e o resultado juntos
Insira as duas cores e leia o resultado da categoria correta. Duas casas decimais podem esconder uma diferença próxima ao limite.
Não arredonde para cima para declarar aprovação. A ferramenta avalia o valor antes do arredondamento de exibição, então confira também o resultado textual.
EXPERIMENTE ESTA ETAPA
Teste de contraste de cores WCAG
Use o calculador completo aqui: carregue os valores do exemplo, mude um dado por vez e compare o resultado com as etapas do guia.
Um exemplo reproduzível
Carregue #777777 sobre #FFFFFF: cerca de 4,48:1, insuficiente para AA de texto normal. Mude apenas o texto para #767676: cerca de 4,54:1, suficiente para esse limite. A avaliação usa a razão sem arredondamento.
Resultado
O resultado aparecerá aqui.
4. Exemplo: dois tons de cinza próximos
Sobre branco, #777777 dá aproximadamente 4,48:1 e não atende AA para texto normal. #767676 dá cerca de 4,54:1 e atende a esse limite. A diferença visual é pequena, mas o critério é preciso.
Dois cinzas no mesmo branco
- Dados iniciais
- Fundo #FFFFFF; texto #777777 ou #767676
- Resultado
- Cerca de 4,48:1: não atende AA normal. Cerca de 4,54:1: atende.
Os quadros são demonstrativos. Os rótulos informam cores, razões e resultados sem depender apenas da aparência.
-
#777777 sobre #FFFFFF
Cerca de 4,48:1 — insuficiente para AA normal.
-
#767676 sobre #FFFFFF
Cerca de 4,54:1 — atende a esse limite.
5. Repita por tema e estado
Confira corpo do texto, links, textos secundários e rótulos de botões nos fundos reais. Repita no tema escuro e em estados relevantes; inverter cores não resolve automaticamente tudo.
Fundos variáveis exigem conferir as combinações efetivas, incluindo a menos favorável. Um único ponto amostrado de uma imagem não representa toda a superfície.
| Critério | Razão mínima |
|---|---|
| AA normal | 4,5:1 |
| AA grande | 3:1 |
| AAA normal | 7:1 |
6. Avalie além da razão
Um resultado suficiente não demonstra acessibilidade completa. Tamanho, espessura, espaçamento, significado e uso exclusivo de cor precisam de outras verificações.
Se estiver apenas acima do limite, considere uma margem maior. Quando uma cor comunica um resultado, mantenha texto ou forma que também transmita a informação.
São dados de exemplo, não medições de um caso real. O resultado usa o mesmo mecanismo da ferramenta completa. Compare com as etapas do guia e marque as verificações após conferir.
Fontes e método
Perguntas frequentes
Atender ao contraste certifica conformidade WCAG?
Não. O teste verifica aquele contraste com as cores e condições informadas. Os outros requisitos precisam de avaliação separada.
Posso usar uma cor transparente?
Você precisa da cor efetiva depois de composta com o fundo. O teste de duas cores opacas não reconstrói a página inteira.