Verificador de Contraste de Cores
Verifique a relação de contraste de cores para acessibilidade WCAG. Teste cores de primeiro plano e fundo.
The quick brown fox jumps over the lazy dog
Texto do corpo em 16px — é isso que seus visitantes vão realmente ler.
Diretrizes de acessibilidade WCAG
AA Normal (4.5:1): Contraste mínimo para texto normal. Necessário para a maioria do conteúdo web.
AA Large (3:1): Contraste mínimo para texto grande (18pt+ ou 14pt+ negrito).
AAA Normal (7:1): Contraste aprimorado para texto normal. Padrão de acessibilidade mais alto.
AAA Large (4.5:1): Contraste aprimorado para texto grande. Recomendado para conteúdo crítico.
Predefinições
Histórico
Diretrizes de acessibilidade WCAG
O verificador de contraste de cores ajuda a garantir que seu site atende aos padrões de acessibilidade WCAG.
Ferramentas populares
Sobre Verificador de Contraste de Cores
Defina uma cor de frente e uma cor de fundo por código hexadecimal ou pelo seletor de cores e este verificador informa a razão de contraste WCAG 2.1, com marcas de aprovado ou reprovado para AA em texto normal (4,5:1), AA em texto grande (3:1), AAA normal (7:1) e AAA grande (4,5:1). Uma amostra ao vivo mostra o par em tamanhos de título e de corpo, que é o que designers precisam antes de aprovar uma paleta. A conta de luminância relativa acontece no seu navegador, e os pares salvos ficam no armazenamento local.
Casos de uso
Como usar
Defina a cor do texto no campo Primeiro Plano, usando a amostra de cor ou digitando um valor hexadecimal como #4f46e5 na caixa ao lado.
Defina a cor da página no campo Fundo da mesma forma; a prévia grande com o Aa é repintada na hora e o selo com a taxa, no canto superior direito, é atualizado.
Leia os quatro cartões da WCAG abaixo da prévia - AA Normal, AA Grande, AAA Normal e AAA Grande - cada um com um visto verde ou um xis vermelho em relação ao seu limite.
Clique nas setas de troca entre os dois campos de cor para testar a combinação invertida, ou escolha um preset como Branco no Escuro ou GitHub Dark para carregar uma dupla já conhecida.
Clique em Copiar abaixo do número grande da taxa para levar a taxa e os quatro resultados de aprovação ou reprovação para a área de transferência, ou clique em Salvar para guardar o par na faixa de Histórico.
Dicas Pro
- Cole o conteúdo direto — o Verificador de Contraste de Cores identifica os formatos de entrada mais comuns e aplica configurações padrão adequadas automaticamente.
- Use os atalhos de teclado (Ctrl/Cmd+A para selecionar tudo, Ctrl/Cmd+C para copiar) e agilize seu trabalho dentro do Verificador de Contraste de Cores.
- Para entradas muito grandes, divida o conteúdo em partes — a maioria das abas do navegador aguenta megabytes de texto, mas processar payloads enormes pode travar a interface por alguns instantes.
- O Verificador de Contraste de Cores não registra nem armazena o que você digita. Se precisar de histórico, copie os resultados importantes para um arquivo local ou um app de notas.
- Combine o Verificador de Contraste de Cores com as outras ferramentas do site (formatadores, conversores, codificadores) e monte fluxos de dados completos sem sair do navegador.
Perguntas frequentes
Sim, totalmente gratuito: sem cadastro, sem chave de API, sem marca d'água e sem limites de uso.
Não. O Verificador de Contraste de Cores funciona inteiramente no seu navegador. O que você digita nunca chega aos nossos servidores.
Não há um limite rígido, mas espere lentidão em entradas maiores que alguns megabytes, dependendo da memória do seu dispositivo.
Sim. Os resultados gerados com o Verificador de Contraste de Cores são seus e podem ser usados livremente em qualquer projeto pessoal ou comercial.
A maior parte da lógica roda em JavaScript no lado do cliente, então, depois do carregamento inicial, você costuma conseguir continuar trabalhando sem conexão com a internet.
Nenhum. Como o Verificador de Contraste de Cores roda no seu navegador, você pode processar quantas entradas o seu hardware aguentar, sem chaves de API nem bloqueios.