256 Tools

Verificador de contraste de cor

Amostra de texto grande

Assim fica o texto de corpo normal com este contraste.

Proporção de contraste
4,48:1
AA · texto normal
AAA · texto normal
AA · texto grande
AAA · texto grande
Cor de texto sugerida:#717171

Ferramentas externas relacionadas

Alguns links são links de afiliados.

Ferramentas relacionadas

Verifique se o seu texto é legível sobre o fundo. Insira uma cor de texto e uma cor de fundo para ver a proporção de contraste WCAG e se passa nos níveis AA e AAA para texto normal e grande, com pré-visualização em tempo real. Se falhar, a ferramenta sugere uma cor semelhante que passe. Tudo funciona no seu navegador.

Como usar

  1. Escolha a cor do texto.
  2. Escolha a cor de fundo.
  3. Leia a proporção de contraste e os resultados AA / AAA.
  4. Se falhar, aplique a cor sugerida que passa.

O que significam os níveis WCAG

A proporção de contraste vai de 1:1 (sem contraste) a 21:1 (preto sobre branco). Para texto normal, AA exige pelo menos 4.5:1 e AAA exige 7:1. Para texto grande, AA exige 3:1 e AAA exige 4.5:1. Atingir pelo menos o nível AA ajuda pessoas com baixa visão a ler o conteúdo confortavelmente.

Duas amostras: uma com contraste forte e outra com contraste fracoAaAa

Recursos

Proporção de contraste exata

Veja a proporção WCAG precisa entre suas duas cores.

Resultados AA e AAA

Verifique aprovação ou reprovação para texto normal e grande de uma vez.

Pré-visualização em tempo real

Veja texto real nas suas cores para avaliar a legibilidade diretamente.

Cor aprovada sugerida

Se o contraste for insuficiente, obtenha uma cor próxima que atenda ao nível AA.

Privacidade por design

Tudo é calculado no seu navegador. Nada é enviado.

Casos de uso comuns

UI acessível

Certifique-se de que o texto da interface atende aos requisitos de acessibilidade.

Cores da marca

Verifique se os pares de cores da marca são legíveis como texto.

Botões e links

Verifique se os rótulos em botões e links coloridos são legíveis.

Documentos e apresentações

Confirme que o texto se destaca suficientemente em fundos coloridos.

Notas e dicas

  • Texto grande significa cerca de 18pt, ou 14pt negrito e acima, que tem requisitos de contraste menores.
  • Não dependa apenas da cor para transmitir significado; combine-a com texto ou ícones.
  • O contraste é um fator de legibilidade, assim como o tamanho da fonte e o espaçamento.
  • Tudo funciona no seu dispositivo — nada é enviado a um servidor.

Perguntas frequentes

O que é proporção de contraste?
Mede quão diferentes são duas cores em brilho, de 1:1 (idênticas) a 21:1 (preto sobre branco). Quanto maior, mais fácil de ler.
Qual a diferença entre AA e AAA?
AA é o nível de acessibilidade padrão (4.5:1 para texto normal); AAA é mais rigoroso (7:1) para maior legibilidade.
O que conta como texto grande?
Aproximadamente 18pt regular ou 14pt negrito e maior. Texto grande tem requisitos de contraste menores (3:1 para AA).
O que é a cor sugerida?
Se a cor do texto falhar no AA, a ferramenta a clareia ou escurece até atingir 4.5:1 em relação ao fundo e oferece essa cor.
Algo é enviado para um servidor?
Não. A verificação funciona inteiramente no seu navegador. Nada é enviado a um servidor.

Usamos cookies para anúncios e análises.