Verificador de contraste
Verifique a relação de contraste WCAG e se passa em AA/AAA entre duas cores.
Os valores de cor que você insere são processados localmente no seu navegador e nada é enviado para um servidor.
Trabalhando com códigos de cor? Experimente o Conversor de Cores CSS.
Sobre Verificador de contraste
Este verificador de contraste mede a razão de contraste de cores WCAG entre quaisquer duas cores e diz instantaneamente se elas passam nos níveis de acessibilidade AA ou AAA. Insira uma cor de primeiro plano (texto) e uma cor de fundo como hex ou rgb/rgba, ou escolha-as com as amostras de cor embutidas, e a ferramenta calcula a razão exata mais os veredictos de aprovação/reprovação para texto normal e grande. Foi feita para desenvolvedores, designers e engenheiros de QA que precisam de uma verificação rápida da razão de contraste de cores ao construir interfaces acessíveis, design systems ou páginas de marketing. Um preview ao vivo renderiza um texto de amostra nas cores escolhidas para você avaliar a legibilidade em um relance e pegar problemas de contraste de acessibilidade cedo. Tudo roda localmente no seu navegador, então seus valores de cor são processados no seu dispositivo e nada é enviado para um servidor.
Recursos
- Calcula a razão de contraste exata WCAG 2.x entre duas cores
- Aceita formatos de cor hex (3 ou 6 dígitos), rgb() e rgba()
- Mostra aprovação/reprovação AA para texto normal (4.5:1) e texto grande (3:1)
- Mostra aprovação/reprovação AAA para texto normal (7:1) e texto grande (4.5:1)
- Amostras nativas de seletor de cor para primeiro plano e fundo
- Preview ao vivo que renderiza um texto de amostra nas cores selecionadas
- Mensagem de validação clara quando um valor de cor não pode ser interpretado
Como usar Verificador de contraste
- Insira a cor do texto no campo Primeiro plano (texto), ou escolha-a com a amostra de cor.
- Insira a cor de fundo no campo Fundo, ou use sua amostra.
- Leia a razão de contraste exibida acima dos selos de veredicto.
- Confira os selos de aprovação/reprovação AA e AAA para texto normal e grande.
Exemplo
Entrada
Primeiro plano (texto): #777777
Fundo: #ffffff
Saída
razão de contraste: 4.48
AA · texto normal (4.5:1): Falha
AA · texto grande (3:1): Passa
AAA · texto normal (7:1): Falha
AAA · texto grande (4.5:1): Falha
Cinza médio sobre branco falha por pouco em AA para texto de corpo de tamanho normal.
Erros comuns e solução de problemas
- Colar um nome de cor CSS como "red" ou "rebeccapurple" retorna um erro de cor inválida. — Use um valor hex (ex.: #ff0000), ou rgb()/rgba() em vez de cores nomeadas.
- Um hex de 8 dígitos com alfa (#rrggbbaa) é rejeitado como cor inválida. — Remova o canal alfa e forneça um hex de 6 dígitos; o verificador lê apenas cores opacas.
- O texto passa em AA grande, mas falha em AA normal, e você não sabe qual se aplica. — Texto grande significa aproximadamente 18pt+ (ou 14pt+ em negrito); o corpo do texto precisa atingir o limite mais rígido de 4.5:1 para texto normal.
- Um valor alfa de rgba() não muda a razão de contraste. — A razão é calculada apenas nos canais RGB, então achate a transparência sobre a cor de fundo real antes de verificar.
Perguntas frequentes
- O que é um verificador de contraste e por que a razão WCAG importa?
- Um verificador de contraste compara duas cores e reporta a razão de contraste WCAG entre elas, que prevê o quão legível o texto será. O Verificador de Contraste da ArrayKit mostra a razão exata mais os veredictos AA e AAA para você confirmar que o texto é legível para usuários com baixa visão.
- Qual razão de contraste preciso para passar no WCAG?
- O WCAG AA exige pelo menos 4.5:1 para texto normal e 3:1 para texto grande, enquanto o AAA exige 7:1 para texto normal e 4.5:1 para texto grande. O Verificador de Contraste mostra os quatro veredictos de uma vez.
- Como verifico a razão de contraste do meu texto e fundo?
- Insira a cor do texto no campo Primeiro plano e a cor de fundo no campo Fundo (hex, rgb ou rgba), ou use as amostras. O Verificador de Contraste atualiza a razão e os selos AA/AAA ao vivo enquanto você digita.
- O que conta como texto grande para o limite de 3:1?
- Texto grande geralmente é cerca de 18pt para cima, ou 14pt para cima quando em negrito. Qualquer coisa menor é tratada como texto normal e precisa atingir a razão mais alta de 4.5:1.
- A razão de contraste leva em conta a opacidade?
- Não. A razão é baseada nos valores RGB sólidos, então achate qualquer cor semitransparente sobre seu fundo real antes de verificá-la no Verificador de Contraste.
- As cores que insiro no Verificador de Contraste são enviadas para algum lugar?
- Não. O Verificador de Contraste roda inteiramente no seu navegador, então as cores que você insere ficam no seu dispositivo e nada é enviado para um servidor.
Ferramentas relacionadas
Todas as ferramentas de ArrayKit