Verificador de contraste de cores

Verifique um par de cores

1. Digite cada cor em HEX de três ou seis dígitos ou use o seletor de cores. O fundo deve ser sólido e opaco.
2. Deixe a opacidade do primeiro plano em 100% para texto opaco ou informe um percentual menor para transparência. Os resultados são atualizados quando os três valores são válidos.
3. Confira a taxa e os resultados separados para texto normal, texto grande e elementos não textuais. Avalie o contexto real do projeto e copie o relatório com suas ressalvas, se precisar compartilhá-lo.

Entenda os resultados

Para texto normal, os limites numéricos são 4,5:1 no nível AA e 7:1 no AAA. O cálculo compara a luminância relativa, não a diferença entre os nomes das cores.

Para texto grande, os limites são 3:1 no AA e 4,5:1 no AAA. Texto grande tem pelo menos 18 pt normal ou 14 pt em negrito, ou tamanho equivalente para outras escritas. Isso equivale a aproximadamente 24 e 18,67 pixels CSS; a tipografia real ainda deve ser avaliada.

A opacidade do primeiro plano altera a cor efetiva sobre o fundo informado. Em 100% ela é opaca; em 0% desaparece no fundo e a taxa é 1:1. A transparência do fundo não é considerada.

A linha não textual de 3:1 compara este par para detalhes visuais essenciais em relação à cor adjacente. As decisões usam a taxa sem arredondamento; as duas casas decimais facilitam apenas a leitura.

Exemplos para conferir

Preto #000000 sobre branco #FFFFFF com opacidade de 100% resulta em 21:1 e atende aos cinco limites numéricos exibidos. Trocar as cores opacas não altera a taxa.

Cinza #777777 sobre branco resulta em cerca de 4,48:1. Não atinge 4,5:1 para texto normal em AA, embora supere 3:1 para texto grande em AA.

Preto com 50% de opacidade sobre branco resulta em cerca de 3,98:1 neste cálculo sRGB. Reduzir a opacidade pode diminuir o contraste mesmo quando o par opaco original tem contraste alto.

Verificar o par é apenas parte da acessibilidade

A ferramenta avalia cores sRGB sólidas, fundo opaco e opacidade opcional no primeiro plano. Ela não inspeciona páginas nem fontes, não coleta cores de imagens ou gradientes, não simula visão de cores e não avalia todos os requisitos e exceções das WCAG.

Atingir um limite numérico não certifica a acessibilidade de uma página ou produto. Verifique tamanho e peso reais do texto, cores adjacentes, formas e estados relevantes e outros requisitos de acessibilidade. Renderização e suavização também podem afetar a leitura.

Cálculo no navegador

A comparação ocorre no navegador, sem envios adicionados pela ferramenta nem histórico de cores salvo. O relatório atual só é enviado à área de transferência quando você solicita a cópia. Os serviços normais do site e as configurações de consentimento são independentes.