Verificador de contraste de cores (WCAG)
Confira se a cor do texto tem contraste suficiente com o fundo pelas regras de acessibilidade WCAG AA e AAA, com prévia ao vivo.
Como usarTestar contraste de cores
Texto grande de exemplo
Texto normal de exemplo: a acessibilidade ajuda todo mundo a ler melhor, em qualquer tela.
Texto pequeno, como legendas e rodapés.
Disponível em: 
Verificador de contraste de cores (WCAG): para que serve
Escolha a cor do texto e a do fundo para ver a taxa de contraste e se ela passa nos critérios de acessibilidade WCAG para texto normal, texto grande e ícones. A prévia mostra como fica o texto em vários tamanhos.
Aceita cores em hexadecimal (#RRGGBB ou #RGB) e tem botão para inverter as cores.
Como usar
- Escolha ou digite a cor do texto.
- Escolha a cor do fundo.
- Veja o contraste e os níveis AA e AAA.
Quando usar
- Validar as cores de um site ou app.
- Escolher a cor de botões e links.
- Corrigir alertas de acessibilidade do Lighthouse.
Perguntas frequentes
Qual o contraste mínimo recomendado?
Pela WCAG nível AA, texto normal precisa de pelo menos 4,5:1 e texto grande (a partir de 24 px, ou 18,66 px em negrito) de 3:1. No nível AAA, os mínimos sobem para 7:1 e 4,5:1.
Por que o contraste importa?
Texto com pouco contraste fica difícil de ler para pessoas com baixa visão, daltonismo ou usando o celular no sol. Além disso, ferramentas de SEO e acessibilidade apontam esse problema.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.