Verificador de contraste WCAG
Verifique a taxa de contraste entre uma cor de texto e uma cor de fundo de acordo com os limites de acessibilidade WCAG, antes de usá-las no seu site.
Exemplo de título
Aqui está um exemplo de parágrafo de texto usando a cor de texto e a cor de fundo escolhidas acima, para avaliar visualmente a legibilidade além da pontuação WCAG.
Como funciona
As recomendações WCAG definem taxas mínimas de contraste entre o texto e seu plano de fundo para garantir que um site continue legível para pessoas com baixa visão ou em condições de exibição difíceis (tela pouco iluminada, reflexos). Antes de validar uma combinação de cores escolhida no Figma ou em um guia de estilo, esta ferramenta calcula a taxa real entre as duas cores e indica se ela respeita os limites AA (nível mínimo recomendado) e AAA (nível reforçado).
Qual é a diferença entre "texto normal" e "texto grande"?
O limite de contraste exigido depende do tamanho do texto: um texto grande (a partir de aproximadamente 18pt, ou 14pt em negrito) permanece legível com um contraste mais baixo do que um texto de tamanho normal, pois as formas das letras são maiores e mais fáceis de distinguir.
Devo buscar AA ou AAA?
O nível AA é o padrão geralmente recomendado e suficiente para a maioria dos sites (e frequentemente uma obrigação legal dependendo da jurisdição). O nível AAA é mais rigoroso e recomendado para conteúdo em que a acessibilidade é prioritária, mas às vezes é difícil de alcançar com certas paletas de marca sem modificá-las sensivelmente.
Processamento 100% local: o cálculo da taxa de contraste é feito diretamente no seu navegador via WebAssembly, sem nenhuma chamada a um servidor externo.