Verificador de Contraste de Cor (WCAG)
Verifique se suas cores atendem aos padrões de acessibilidade WCAG — grátis, instantâneo.
O que é
O Verificador de Contraste de Cor é uma ferramenta gratuita de acessibilidade que calcula o ratio de contraste entre uma cor de primeiro plano e uma de fundo de acordo com a especificação WCAG 2.1. Insira ou escolha duas cores e a ferramenta mostra instantaneamente o ratio de contraste, se passa nos níveis WCAG AA e AAA para texto normal e grande, e uma prévia ao vivo.
Como usar
- Escolha a cor do texto com o seletor de cor ou digitando um código hex.
- Escolha a cor de fundo da mesma forma.
- O ratio de contraste e os badges WCAG atualizam ao instante.
- Verifique a prévia ao vivo para ver a legibilidade real do texto.
- Clique em "Exportar Relatório PNG" para baixar um resumo do resultado.
Por que usar
A acessibilidade web não é apenas uma boa prática — em muitos países é um requisito legal. As diretrizes WCAG 2.1 especificam que o texto normal deve atingir pelo menos um ratio de 4,5:1 (AA) e idealmente 7:1 (AAA). Detectar problemas de contraste cedo no processo de design evita correções custosas.
Perguntas frequentes
Qual é o requisito de contraste WCAG?
WCAG 2.1 Nível AA requer um ratio de 4,5:1 para texto normal e 3:1 para texto grande. Nível AAA requer 7:1 para texto normal e 4,5:1 para texto grande.
O que conta como "texto grande" no WCAG?
Texto grande é definido como pelo menos 18 pontos (24px) em peso normal, ou pelo menos 14 pontos (18,66px) em negrito.
Posso inserir cores como RGB ou HSL?
Os campos aceitam códigos hex e você pode usar o seletor de cor integrado que suporta qualquer modelo de cor.
Passar no nível AA garante a acessibilidade do site?
O contraste é um fator importante, mas a acessibilidade completa também inclui tamanho de fonte, navegação por teclado e compatibilidade com leitores de tela.
O que contém o PNG exportado?
O PNG mostra ambas as cores, o ratio de contraste e o status pass/fail para os quatro critérios WCAG.