Verificador de Contraste de Cores
Verifique a razão de contraste WCAG entre duas cores e veja se elas atingem os níveis de acessibilidade AA e AAA.
Texto de exemplo grande
O texto de exemplo pequeno mostra como o corpo de texto fica legível com este contraste.
Verifique o contraste entre qualquer cor de texto e de fundo com este verificador de contraste de cores WCAG gratuito. Escolha ou cole duas cores hex e veja na hora a razão de contraste e se a combinação atinge os níveis AA e AAA da WCAG 2.1 para texto normal e grande. Uma pré-visualização ao vivo mostra texto de exemplo real nas suas cores, e tudo é calculado no seu navegador — sem cadastro e sem enviar nada.
O que é um verificador de contraste de cores?
Um verificador de contraste de cores mede o quanto uma cor de texto se destaca do seu fundo e apresenta o resultado como uma razão de contraste. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem razões de 1:1 (sem contraste) até 21:1 (preto sobre branco) e estabelecem limites mínimos para que o texto continue legível para pessoas com baixa visão ou daltonismo. Esta ferramenta calcula a razão a partir da luminância relativa de cada cor e informa quais níveis de acessibilidade a combinação atende.
Como verificar o contraste de cores
Defina as cores do texto e do fundo e leia os resultados, que se atualizam ao vivo conforme você altera qualquer uma das cores.
- Escolha uma cor de texto com o seletor ou digite um valor hex como #1f2937.
- Escolha uma cor de fundo da mesma forma, por exemplo #ffffff.
- Leia a razão de contraste e os selos de aprovado ou reprovado para AA e AAA.
- Use Trocar cores para testar a combinação invertida na hora.
- Ajuste qualquer cor até atingir o nível desejado.
Requisitos de contraste WCAG AA e AAA
A WCAG define dois níveis de conformidade. Para o nível AA, o texto normal precisa de uma razão de contraste de pelo menos 4,5:1 e o texto grande de pelo menos 3:1. Para o nível AAA, mais rigoroso, o texto normal precisa de pelo menos 7:1 e o texto grande de pelo menos 4,5:1. Texto grande significa aproximadamente 18pt (24px) regular ou 14pt (18,66px) em negrito ou maior. Busque o AA como base e o AAA quando possível para interfaces mais legíveis e acessíveis.
Por que usar este verificador de contraste de cores?
- Mostra a razão de contraste WCAG exata para quaisquer duas cores.
- Selos de aprovado/reprovado para AA e AAA, texto normal e grande.
- A pré-visualização ao vivo renderiza texto de exemplo nas suas cores.
- Seletores de cor e campos hex, com troca em um clique.
- 100% gratuito, sem anúncios, cadastro ou limites.
- Roda inteiramente no seu navegador — suas cores nunca saem do seu dispositivo.
Perguntas frequentes
Qual é uma boa razão de contraste?
Busque pelo menos 4,5:1 para texto comum e 3:1 para texto grande para atingir o nível AA da WCAG, que é a base legal e de design mais comum. Para o nível AAA, mais rigoroso, mire em 7:1 para texto normal e 4,5:1 para texto grande. Razões mais altas são sempre mais legíveis, com preto puro sobre branco chegando ao máximo de 21:1.
Como a razão de contraste é calculada?
A razão usa a fórmula da WCAG (L1 + 0,05) / (L2 + 0,05), onde L1 e L2 são a luminância relativa da cor mais clara e da mais escura. A luminância relativa é calculada a partir dos canais vermelho, verde e azul com correção gama, ponderados em 0,2126, 0,7152 e 0,0722. Esta ferramenta faz toda essa conta para você automaticamente.
O que conta como texto grande?
A WCAG define texto grande como cerca de 18pt (24px) ou maior em peso regular, ou 14pt (cerca de 18,66px) ou maior em negrito. O texto grande tem uma exigência de contraste menor (3:1 para AA, 4,5:1 para AAA) porque letras maiores são mais fáceis de ler com menos contraste.
Códigos hex abreviados funcionam?
Sim. Você pode informar abreviações de três dígitos como #abc ou hex completo de seis dígitos como #aabbcc, com ou sem o # inicial. A abreviação é expandida automaticamente antes do cálculo do contraste.
Ele verifica transparência ou opacidade?
Não. O contraste é medido entre duas cores sólidas. Se o seu texto ou fundo usa transparência, primeiro descubra a cor efetiva que ele exibe sobre o pano de fundo e depois informe esse valor hex sólido aqui.