O que um verificador de contraste mede?
Um verificador de contraste compara a luminância relativa de uma cor de primeiro plano e uma cor de fundo. O resultado é exibido como uma razão a partir de 1:1, onde as cores são visualmente idênticas, até 21:1, onde preto e branco têm contraste máximo.
Esta ferramenta apresenta indicadores de aprovação e reprovação no estilo WCAG para texto normal e texto grande. É útil para decisões iniciais de design, estados de componentes, tokens de tema e verificações rápidas antes de uma revisão de acessibilidade mais completa.
Como ler os resultados
| Check | Razão mínima | Meaning |
|---|---|---|
| AA texto normal | 4.5:1 | Alvo comum para texto de corpo regular. |
| AA texto grande | 3:1 | Aplica-se a textos maiores ou mais pesados, onde as formas das letras são mais fáceis de ler. |
| AAA texto normal | 7:1 | Alvo mais rigoroso para texto normal em contextos de alta acessibilidade. |
| AAA texto grande | 4.5:1 | Alvo mais rigoroso para texto grande. |
O que esta ferramenta não comprova
Uma razão é um forte sinal, mas não constitui uma auditoria completa de acessibilidade. A legibilidade real também depende de tipografia, peso da fonte, estados de hover/foco, estados desabilitados, cores circundantes, qualidade da tela e se o texto aparece sobre imagens ou gradientes.
- Transparência e gradientes precisam de revisão separada.
- Ícones pequenos e traços finos podem exigir contraste mais forte do que o texto próximo.
- Cores de marca podem passar em uma combinação e falhar em outra.
- O contraste para leitura de QR e o contraste de legibilidade de texto estão relacionados, mas não são o mesmo teste.
Maneiras de melhorar contraste fraco
Escurecer o primeiro plano
Para fundos claros, aproxime a cor do texto para um neutro mais escuro ou um tom de marca mais forte.
Clarear o plano de fundo
Pequenas alterações no fundo podem fazer com que uma cor de marca passe sem alterar o token de primeiro plano.
Aumentar tamanho ou peso do texto
Textos grandes ou mais pesados têm um limite AA menor, mas ainda precisam de separação visual suficiente.
Verificar todos os estados
Estados de hover, foco, desabilitado, selecionado e erro frequentemente usam pares de cores diferentes.
Perguntas Frequentes
Isto é uma auditoria completa de conformidade com a WCAG?
Não. Ele calcula limiares de contraste no estilo WCAG para pares de cores. Uma revisão completa também verifica layout, comportamento do teclado, semântica, estados de foco, alternativas de texto e a tipografia realmente renderizada.
O que conta como texto grande?
A orientação da WCAG trata texto grande como aproximadamente 18 pt em texto regular ou 14 pt em texto em negrito e acima. No trabalho web, verifique o tamanho e o peso realmente renderizados, não apenas o rótulo de design.
Posso usar isto para cores transparentes?
Este verificador compacto usa cores sRGB opacas. Se sua interface usa transparência, faça o blend do primeiro plano e do fundo renderizados finais primeiro, então verifique o par resultante.
Passar no AA significa que o design é sempre legível?
Nem sempre. Fontes muito finas, rótulos de interface muito pequenos, fundos com muito detalhe e telas de baixa qualidade ainda podem dificultar a leitura. Considere a razão como um dos sinais importantes.
Isto é o mesmo que contraste para códigos QR?
Não. O contraste de códigos QR afeta a confiabilidade do leitor de QR, enquanto esta ferramenta foca nos limiares de legibilidade do texto. A matemática é relacionada, mas a decisão prática é diferente.