Pular para o conteúdo
patrache.tools

Verificador de contraste

Verificador de contraste de cor online e gratuito. Verifique conformidade WCAG AA/AAA e meça proporções de contraste para acessibilidade web. No navegador.

Primeiro plano
Fundo
21.00:1
Taxa de contraste
Texto normal
AA (4.5:1)Aprovado
AAA (7:1)Aprovado
Texto grande
AA (3:1)Aprovado
AAA (4.5:1)Aprovado
Pré-visualização

Um pequeno jabuti xerófilo viu dez cegonhas felizes 1234567890

Um pequeno jabuti xerófilo viu dez cegonhas felizes 1234567890

lockOs arquivos não são enviados a nenhum servidor
Compartilhar
Incorporar

Incorpore esta ferramenta no seu site

Verificador gratuito de contraste de cores que testa proporções contra padrões WCAG 2. 1 (AA, AAA). Tudo no navegador.

Como usar Verificador de contraste?

  1. Insira cores de primeiro plano e fundo.
  2. Verifique a proporção e grau WCAG.
  3. Ajuste cores para atender aos padrões.

Perguntas frequentes sobre Verificador de contraste

Qual a diferença entre WCAG AA e AAA?

AA exige 4.5:1 para texto normal e 3:1 para grande. AAA é mais rigoroso: 7:1 e 4.5:1.

E se a proporção não passar?

Ajuste as cores mais claras ou escuras. A ferramenta mostra resultados em tempo real.

Texto grande tem limite menor — a partir de que tamanho conta como grande?

A WCAG considera texto grande a partir de 18pt (cerca de 24px) em peso normal, ou 14pt (cerca de 18,7px) em negrito. Atender a isso baixa a exigência AA de 4,5:1 para 3:1. Lembre-se de que são pisos, não metas: o texto do corpo ainda precisa ser legível numa tela de laptop com brilho baixo ou sob a luz do dia, então mirar perto de 7:1 é o hábito mais seguro.

Como verifico o contraste de texto sobre foto ou painel translúcido?

O cálculo de contraste pressupõe duas cores chapadas, então numa fotografia é preciso amostrar o ponto mais claro e o mais escuro sob o texto e fazer a checagem duas vezes. Se um dos dois reprovar, o texto some em algum trecho da imagem. Na prática, colocar uma faixa de cor sólida atrás do texto é mais confiável do que uma camada preta translúcida ou uma sombra, ambas dependentes do que está por baixo.

Como aproveitar Verificador de contraste ao máximo?

  • Texto corrido pede 4,5:1; a partir de 18pt ou 14pt em negrito bastam 3:1 para o nível AA.
  • No Brasil, o eMAG segue os mesmos limites de contraste definidos pela WCAG.
  • Elementos não textuais, como ícones e bordas de campos, também exigem 3:1.

Powered by Patrache Studio Tools

Permita anúncios neste site

Para usar estas ferramentas, permita anúncios neste site. A publicidade mantém este serviço gratuito.

Abra o bloqueador, desative o bloqueio neste site e verifique novamente.