Como usar o verificador de contraste de cores
- Informe a Cor do texto (HEX) e ajuste as opções conforme necessário.
- Execute a ferramenta e analise os resultados, as evidências e as limitações.
- Copie ou baixe o resultado e depois confira-o com o site real, os dados de origem ou os registros da empresa.
Experimente um exemplo concreto
Compare um botão na cor da marca com texto branco e escuro antes de escolher a cor do rótulo.
Como interpretar os resultados
O contraste usa as cores informadas e os cálculos padrão de luminância relativa. Tamanho e peso do texto, estados e a interface completa ainda precisam de revisão de acessibilidade. Um par de cores aprovado não comprova a conformidade geral.
Perguntas frequentes
Passar no contraste de cores atende a todos os requisitos de acessibilidade?
Não totalmente. Também são necessários navegação por teclado, tags semânticas, indicadores de foco e texto alternativo.
O que conta como texto grande?
Na WCAG, texto grande geralmente se refere a cerca de 18pt ou 14pt em negrito ou mais, dependendo da renderização da fonte.
Cores transparentes são suportadas?
No momento são exigidos valores HEX opacos. Calcule antes a cor resultante da mistura.
Quais são os requisitos de contraste de cores da WCAG?
A WCAG 2 exige, no nível AA, razão de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande (cerca de 24 px normal ou 18,66 px em negrito ou mais); no nível AAA, pelo menos 7:1 para texto normal e 4,5:1 para texto grande. Elementos não textuais, como ícones e bordas de campos, também precisam de pelo menos 3:1 no AA. Preto sobre branco é 21:1, e texto cinza-claro sobre branco muitas vezes fica abaixo de 4,5:1, a falha mais comum.