Como verificar o contraste de cores
Use com duas cores sólidas que realmente se encostam no layout. A ferramenta verifica contraste de texto, não a página inteira.
- Informe a cor do texto em HEX de 3 ou 6 dígitos.
- Informe a cor sólida do fundo.
- Selecione Verificar contraste.
- Leia a relação e cada resultado escrito.
- Teste separadamente todos os outros estados reais.
Cálculo oficial
Os canais sRGB são normalizados e linearizados no ponto 0,04045. A luminância é 0,2126R + 0,7152G + 0,0722B e a relação é (L1 + 0,05) / (L2 + 0,05).
Limites AA e AAA
AA exige 4,5:1 para texto normal e 3:1 para texto grande. AAA exige 7:1 e 4,5:1. Texto grande tem pelo menos 18 pt normal ou 14 pt em negrito, com equivalentes para CJK.
Arredondamento e escopo
O valor interno completo decide: 4,499:1 não atinge 4,5:1 mesmo exibido como 4,50. Aceita somente duas cores HEX opacas, sem alpha, gradiente, imagem ou varredura de site.
Outras verificações
- Links, foco, erros e estados desativados.
- Texto sobre imagens e temas alternativos.
- Tamanho, peso e família tipográfica reais.
- Teclado, zoom, semântica e outros requisitos.
Exemplos
#000000 sobre #FFFFFF resulta em 21,00:1 e passa nos quatro limites.
#767676 sobre branco supera 4,5:1; #777777 fica abaixo.
Perguntas frequentes
Posso omitir #?
Sim. Três ou seis dígitos são aceitos com ou sem #.
Por que não aceita transparência?
A cor efetiva depende da composição; aqui são comparadas duas cores opacas.
Passar significa que todo o site está em conformidade?
Não. Só este par e estes limites são verificados.
Qual limite vale para texto de 16 px?
Texto normal: pelo menos 4,5:1 para AA.