Verificador de contraste de cores

Verifique localmente o contraste entre a cor do primeiro plano e a cor do fundo usando a fórmula de luminância relativa WCAG, determine separadamente os limites para textos comuns e textos grandes AA/AAA e exporte o relatório.

Processamento local no navegador
Esta página passou na verificação do diretório público; ative JavaScript para usar todos os recursos.
Guia de uso

Como usar o verificador de contraste de cores

Os valores de cor são usados apenas para calcular a luminância relativa e o contraste no navegador atual; nada é enviado ou salvo.

  1. Digite duas cores

    Use o seletor de cores ou cole um valor #RRGGBB para definir as cores do primeiro plano e do fundo; a pré-visualização será atualizada simultaneamente.

  2. Limite de verificação

    Clique em verificar para consultar separadamente o status de aprovação do texto normal AA, do texto normal AAA e do texto grande AA.

  3. Copiar registro de verificação

    Após a aprovação, você pode copiar o relatório ou baixar TXT, registrando os valores das cores, as proporções e os resultados de cada limite.

Restrições e observações

  • A versão inicial aceita apenas RGB ou RRGGBB sem transparência; para cores semitransparentes, é necessário determinar primeiro o fundo real da composição.
  • 4.5:1 aplica-se a texto normal AA, 3:1 aplica-se a textos grandes AA, e 7:1 é o limite de referência para texto normal AAA; também é necessário verificar o tamanho da fonte, o peso da fonte e o contraste de elementos não textuais.
  • A ferramenta calcula apenas um par de cores sólidas; não simula gradientes, imagens, sombras, renderização de fontes ou fundos complexos.

Perguntas frequentes

O que significa 4.5:1?

É WCAG o limite mínimo de contraste AA para textos comuns; o limite AA para textos grandes é 3:1.

Por que não é possível avaliar diretamente uma cor transparente?

A cor final de um primeiro plano ou fundo transparente depende da ordem de composição e da imagem subjacente; é mais confiável determinar primeiro a cor sólida exibida de fato.

Ter contraste aprovado garante acessibilidade?

Não necessariamente. Também é preciso verificar o tamanho da fonte, o peso da fonte, os estados, o foco, os componentes não textuais, as imagens de fundo e a aparência em dispositivos reais.

Feedback da páginaEncontrou um problema ou tem uma sugestão de melhoria?
Recursos de feedback precisam ser usados na versão online

Envie somente após ativar JavaScript na versão online; a funcionalidade local da ferramenta ou do exemplo não é afetada.

Ir para o feedback na versão online