LÂMINA · CORES
Verificador de contraste WCAG
Escolha a cor do texto e a do fundo e veja a razão de contraste, os selos AA e AAA pra texto normal e grande e um preview de verdade — antes de alguém não conseguir ler seu site.
razão de contraste: 10.37:1
- AA texto normal (mín. 4.5:1)✓ passa
- AAA texto normal (mín. 7:1)✓ passa
- AA texto grande (mín. 3:1)✓ passa
- AAA texto grande (mín. 4.5:1)✓ passa
Como fica na prática
Texto normal: o rato roeu a roupa do rei de Roma em 16 pixels.
Texto grande fica assim.
Processado no seu navegador — seus arquivos não saem do seu computador.
Como funciona
-
Escolha as duas cores
Digite o hex (ou rgb/hsl) da cor do texto e da cor do fundo, ou use o seletor visual ao lado de cada campo. Os dois ficam sincronizados.
-
Leia o veredito
A razão de contraste aparece na hora (ex.: 4.62:1) com quatro selos: AA e AAA pra texto normal e pra texto grande. Verde passa, vermelho falha.
-
Confira no preview e ajuste
O bloco de preview mostra texto real nas cores escolhidas. Não passou? Escureça uma das cores, ou clique em inverter pra testar a combinação ao contrário.
Perguntas frequentes
O que significam AA e AAA?
São os dois níveis de exigência da WCAG, a norma internacional de acessibilidade. AA é o mínimo aceito (e o que leis e editais costumam exigir): contraste 4.5:1 pra texto normal. AAA é o nível confortável, pensado pra quem enxerga pouco: 7:1. Se passou em AAA, passou em AA também.
O que é a razão de contraste?
É um número de 1 a 21 que mede a diferença de claridade entre duas cores. 1:1 é texto invisível (cor igual ao fundo); 21:1 é preto no branco. Quanto maior, mais fácil de ler — principalmente em tela ruim, no sol ou pra quem tem baixa visão.
Por que texto grande tem regra mais folgada?
Letra grande é mais fácil de ler mesmo com pouco contraste, então a WCAG pede só 3:1 (AA) e 4.5:1 (AAA). Conta como grande: a partir de 24 px, ou 18.66 px se for negrito.
Passei no AA. Preciso me preocupar com AAA?
Depende do público. Pra um site comum, AA resolve. Se o público inclui muita gente idosa ou com baixa visão — ou se o texto é longo e importante — vale mirar AAA, que garante leitura confortável pra quase todo mundo.
O cálculo é o mesmo das ferramentas oficiais?
Sim. A razão usa a fórmula de luminância relativa da WCAG 2, a mesma do inspetor do Chrome e dos validadores de acessibilidade. O resultado pode ser citado em relatório.
As cores que eu testo são enviadas pra algum servidor?
Não. O cálculo roda inteiro no seu navegador, no seu aparelho. Nada do que você digita sai do seu computador.