A ferramenta usa a fórmula oficial de luminância relativa do WCAG, por isso os valores coincidem com o verificador do WebAIM e a maioria das auditorias de acessibilidade. Tudo é calculado no seu navegador - as cores não são enviadas para nenhum servidor e não há limite de uso.
Verificador de contraste de cores
Funciona inteiramente no seu navegador - sem upload, sem cadastro.
Proporção de contraste
Aprovadonecessita 4.5:1
Aprovadonecessita 3:1
Reprovadonecessita 7:1
Aprovadonecessita 4.5:1
Grande = 18pt (24px), ou 14pt (18,66px) em negrito.
O que é um verificador de contraste de cores?
Um verificador de contraste de cores mede a proporção de contraste entre a cor do texto e o fundo, indicando se a combinação atende aos padrões de acessibilidade WCAG. O resultado vai de 1:1 a 21:1, com aprovação ou reprovação em AA e AAA para texto normal e grande.
Como usar
- 1Insira as cores. Digite um código hex, valor rgb() ou nome de cor CSS para o texto e o fundo, ou use a paleta de cores para selecionar.
- 2Leia a proporção. A proporção de contraste é atualizada em tempo real, com uma prévia do texto sobre o fundo escolhido.
- 3Verifique os badges. Cada badge indica aprovação ou reprovação no WCAG AA e AAA para texto normal e grande.
Para quem é
- Designers testando cores de marca antes do desenvolvimento.
- Desenvolvedores front-end verificando cores de botões, links e rótulos em relação ao WCAG AA.
- Auditores de acessibilidade documentando falhas de contraste com as proporções exatas.
- Equipes de conteúdo e e-mail confirmando que o texto permanece legível em fundos coloridos.
Perguntas frequentes
O verificador de contraste de cores é grátis?
Sim - é 100% grátis, sem cadastro e sem limites. Funciona inteiramente no seu navegador.
Qual proporção de contraste preciso para o WCAG AA?
O WCAG 2.1 Nível AA exige proporção mínima de 4,5:1 para texto normal e 3:1 para texto grande. O Nível AAA eleva esse requisito para 7:1 (texto normal) e 4,5:1 (texto grande).
O que é considerado texto grande?
Texto grande é aquele com pelo menos 18pt (cerca de 24px) em peso regular, ou 14pt (cerca de 18,66px) em negrito. Texto maior permite uma proporção de contraste menor, pois glifos maiores são mais fáceis de ler.
Como a proporção de contraste é calculada?
A fórmula é (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 é calculada a partir dos canais vermelho, verde e azul do sRGB conforme a definição WCAG 2.x.
Suporta hex, RGB e nomes de cores?
Sim. Você pode inserir hex de 3, 4, 6 ou 8 dígitos, valores rgb() e rgba(), ou qualquer nome de cor CSS como 'teal'. Também é possível selecionar cores com a paleta nativa.
Por que a mesma proporção às vezes passa e às vezes reprova?
O requisito depende do tamanho do texto e do nível alvo. Uma proporção de 3,5:1, por exemplo, reprova no AA para texto normal, mas passa no AA para texto grande - sempre verifique em relação ao tamanho e nível que você usa de fato.