Verificador de Contraste de Cor
Verifique o rácio de contraste WCAG entre uma cor de texto e de fundo — veja as classificações de aprovação/reprovação AA/AAA para texto normal, texto grande e componentes de interface, com pré-visualização em direto e sugestões de cores acessíveis.
The quick brown fox
O texto grande é confortável de ler quando o contraste é suficiente.
Este é um parágrafo de amostra de texto de corpo normal. Um bom contraste de cor mantém o seu conteúdo legível para todos, incluindo pessoas com baixa visão ou daltonismo. uma ligação de amostra.
Letras pequenas e legendas são as mais difíceis de ler — precisam do maior contraste.Tudo é calculado em direto no seu browser usando a fórmula de luminância relativa WCAG 2.x — sem envios, sem registo, completamente gratuito.
Sobre Verificador de Contraste de Cor
O Color Contrast Checker mede o rácio de contraste WCAG entre uma cor de texto e uma cor de fundo, e classifica o par segundo os níveis de acessibilidade AA e AAA para texto normal, texto grande e componentes de interface. O rácio e cada veredito de aprovado/reprovado atualizam-se em tempo real à medida que ajusta qualquer uma das cores.
Um painel de pré-visualização realista mostra títulos, texto corrido, letra pequena, um botão e uma ligação na combinação escolhida, para que possa avaliar a legibilidade com conteúdo real em vez de amostras abstratas. Quando um par reprova, a ferramenta sugere a cor de texto acessível mais próxima que atinge o limiar AA de 4.5:1, pronta a aplicar com um clique.
O cálculo segue a fórmula de luminância relativa da WCAG 2.x e é executado inteiramente no seu navegador — nada é enviado e as verificações são gratuitas. Também pode copiar um relatório de texto compacto com o rácio e as classificações para colar numa revisão de acessibilidade ou num pull request.
Como usar Verificador de Contraste de Cor
- Defina a cor do texto e a cor de fundo com os seletores ou digitando valores.
- Leia o rácio de contraste e os resultados AA/AAA para texto normal, texto grande e componentes de interface.
- Inspecione a pré-visualização ao vivo para ver títulos, parágrafos, botões e ligações reais nas suas cores.
- Se o par reprovar, aplique a cor de texto acessível sugerida ou troque as duas cores.
- Clique em "Copiar relatório" para partilhar o rácio e os resultados de conformidade.