Verificador de contraste (Contrast Checker)

Verifique o contraste do texto antes de publicar

Um bom contraste de cores é uma das formas mais simples de tornar um site mais legível. Este verificador de contraste compara a cor do texto e a cor do fundo usando a fórmula de luminância relativa da WCAG e depois mostra a relação de contraste e os resultados de aprovado ou reprovado para os níveis AA e AAA. É útil para botões, navegação, selos, cartões, mensagens de alerta e qualquer lugar em que o texto apareça sobre uma superfície colorida.

O cálculo é executado no seu navegador e não exige nenhum envio de arquivos. Escolha duas cores, troque-as se necessário e use o bloco de pré-visualização para ver como um texto real se comporta. A relação é objetiva, mas a pré-visualização continua importante, pois o peso da fonte, o tamanho das letras e o layout ao redor influenciam a legibilidade. Um par que tecnicamente passa ainda pode cansar a vista se o texto for minúsculo ou a superfície estiver visualmente poluída.

Entendendo os resultados AA e AAA

O nível WCAG AA é a meta comum para a maioria dos sites e produtos. O texto normal deve atingir pelo menos 4,5:1 e o texto grande pelo menos 3:1. O AAA é mais rigoroso: 7:1 para texto normal e 4,5:1 para texto grande. Texto grande significa 18pt normal ou 14pt em negrito, ou mais. O limite mais baixo existe porque letras maiores e mais grossas continuam mais fáceis de distinguir com menos contraste do que o texto pequeno do corpo. Se não tiver certeza de qual categoria se aplica, trate o texto como normal e busque o requisito mais alto.

Projetando sistemas de cores acessíveis

O contraste deve ser verificado cedo, e não apenas depois de o design visual estar pronto. Ao escolher as cores da marca, teste-as nas superfícies em que realmente aparecerão: cartões brancos, barras de navegação escuras, fundos neutros e estados desativados. Documente as combinações acessíveis como tokens para que as equipes não precisem descobri-las de novo. Lembre-se de que o contraste é apenas uma parte da acessibilidade. Use contornos de foco visíveis, rótulos claros, HTML semântico e não dependa apenas da cor para comunicar estados importantes, como erros, sucesso e avisos.