./prontouso.com

UTILITÁRIOS DE DESIGN

Verificador de Contraste

Verifique a taxa de contraste WCAG entre uma cor de texto e uma cor de fundo, com resultados de aprovação para AA e AAA em texto normal e grande.

Status da ferramentaRoda no seu navegador
Prévia

Opções

O texto normal fica assim.

Texto grande

"Texto grande" é 18pt (24px) ou maior, ou 14pt (18,7px) e negrito.

Resultados

Atende ao nível AA para texto
Taxa de contraste
17.08:1
CategoriaAAAAA
Texto grandePassarPassar
Texto pequenoPassarPassar
Gráficos e interfacePassarN/A

Como funciona

  1. Informe os dados

    Preencha os valores, cole o texto ou envie o arquivo que esta ferramenta usa.

  2. Veja o resultado na hora

    A maioria das ferramentas atualiza enquanto você digita; algumas usam um único botão. De qualquer forma, o resultado aparece aqui mesmo.

  3. Use o resultado

    Copie, baixe ou compartilhe o que a ferramenta gerar — o controle é sempre seu.

Privacidade e processamento — Roda localmente no seu navegador. Esta ferramenta não faz upload da sua entrada.

O que é Verificador de Contraste?

O Verificador de Contraste é uma ferramenta para medir a relação de contraste entre texto e fundo e indicar se o par atende critérios WCAG para texto normal e grande.

ENTENDA A FERRAMENTA

Como verificar o contraste de cores

Use este guia para interpretar a taxa WCAG, conferir AA e AAA e ajustar pares de cor antes de usar em interfaces.

O que a taxa significa

A taxa de contraste varia de 1:1 (cores idênticas) a 21:1 (preto sobre branco), calculada a partir da luminância relativa de cada cor usando a fórmula definida na especificação WCAG 2.x.

Limites de AA e AAA

  • AA, texto normal: pelo menos 4,5:1.
  • AA, texto grande: pelo menos 3:1.
  • AAA, texto normal: pelo menos 7:1.
  • AAA, texto grande: pelo menos 4,5:1.
  • Texto grande significa 18pt (24px) peso regular, ou 14pt (cerca de 18,7px) em negrito, conforme a definição da WCAG.

Lendo a pré-visualização

A caixa de amostra mostra os dois tamanhos de texto renderizados com suas duas cores, uma forma mais rápida de avaliar a legibilidade do que só o número da taxa.

Como usar

  • Escolha ou digite uma cor de primeiro plano (texto) e uma cor de fundo.
  • Leia a taxa de contraste e os quatro resultados de aprovação.
  • Use o botão de trocar para verificar o par na direção contrária.

Notas de contraste

A taxa usa a matemática de luminância relativa da WCAG 2.x para cores sRGB. Transparência deve ser testada contra a cor final já composta sobre o fundo real.

Perguntas frequentes

Qual nível devo buscar?

AA é a base amplamente exigida para acessibilidade na web, inclusive na maioria das exigências legais de acessibilidade. AAA é mais rigoroso e recomendado sempre que possível, especialmente para o texto principal.

Isso verifica mais alguma coisa além do contraste?

Não. Contraste de cor é uma parte da acessibilidade de texto; tamanho da fonte, peso e espaçamento também afetam a legibilidade, mas não são avaliados aqui.

Por que existem limites separados para texto grande?

A WCAG permite uma taxa menor para texto grande porque traços maiores e mais grossos continuam legíveis com um contraste mais baixo do que um texto pequeno.

Alfa ou transparência afeta a taxa?

O cálculo de contraste da WCAG considera as cores finais visíveis. Se a interface usa transparência, primeiro amostre ou calcule a cor composta sobre o fundo real, depois teste esse par.

Ferramentas relacionadas