Verificador Contraste Cor Grátis: WCAG AA AAA Acessibilidade Online

A AA: 4.5:1 normal, 3:1 grande. AAA: 7:1 e 4.5:1.

A Diretrizes de acessibilidade de conteúdo web.

A Escureça texto ou clareie fundo.

A Não, esta ferramenta só funciona com pares de cores sólidas. Para imagens, você vai precisar de outro software. Tire um print da área e use um conta-gotas para amostrar os pixels mais claros e mais escuros sob o texto. Teste ambos contra a cor do seu texto. Se algum falhar, adicione uma sobreposição semitransparente atrás do texto — preto com 40% de opacidade costuma resolver.

A Sim, você pode inserir cores em HEX, RGB ou HSL. Basta colar o valor no campo — a ferramenta detecta o formato automaticamente. Por exemplo, digite 'rgb(255, 0, 0)' ou 'hsl(0, 100%, 50%)' e funciona na hora. Isso é prático quando você pega cores direto do código CSS.

A Sim. Insira primeiro o par padrão, depois troque as cores de hover separadamente. A WCAG exige que estados de hover e focus também atendam aos contrastes mínimos — não só o texto estático. Por exemplo, se o fundo do seu botão mudar de #007bff para #0056b3 ao passar o mouse, teste ambos contra o texto branco. Um erro comum: designers clareiam demais os fundos no hover, o que arruína o contraste.

A Elementos não textuais também precisam de contraste, com regras um pouco diferentes. O WCAG exige proporção 3:1 para componentes de interface e objetos gráficos como ícones, botões e bordas de formulários. Teste aqui a cor do seu ícone contra o fundo. Se o valor ficar abaixo de 3:1, não atende AA. Dica prática: use a mesma cor do texto para ícones e veja se passa.

A Não confie nos seus olhos — eles são péssimos para julgar contraste. Duas cores que parecem boas para você podem atingir apenas 2,5:1, reprovando até mesmo no WCAG AA. Esta ferramenta calcula matematicamente, considerando a percepção humana de cor e luminância. Por exemplo, cinza claro #C0C0C0 sobre branco #FFFFFF parece legível, mas marca apenas 1,6:1. Sempre confirme com nosso indicador de aprovado/reprovado.