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 é mostrado como uma razão 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 informa indicadores de aprovação e reprovação no estilo WCAG para texto normal e texto grande. É útil para decisões de design iniciais, 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 o texto do corpo regular. |
| AA texto grande | 3:1 | Aplica-se a texto maior ou mais pesado, 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 indicador forte, mas não é uma auditoria completa de acessibilidade. A legibilidade real também depende da tipografia, peso da fonte, estados de hover/foco, estados desativados, cores adjacentes, qualidade da tela e se o texto aparece sobre imagens ou gradientes.
- Transparências 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 um par e falhar em outro.
- O contraste para leitura de QR e o contraste de legibilidade de texto estão relacionados, mas não são a mesma verificação.
Maneiras de melhorar contraste fraco
Escurecer o primeiro plano
Para fundos claros, aproxime a cor do texto de um neutro mais escuro ou de um tom de marca mais intenso.
Clarear o fundo
Pequenas alterações no fundo podem fazer uma cor de marca passar sem alterar o token de primeiro plano.
Aumentar o tamanho ou peso do texto
Texto grande ou mais pesado tem um limiar AA mais baixo, mas ainda precisa de separação visual suficiente.
Verifique cada estado
Estados de hover, foco, desativado, 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 de teclado, semântica, estados de foco, alternativas de texto e tipografia realmente renderizada.
O que conta como texto grande?
A orientação da WCAG trata texto grande como aproximadamente 18 pt regular ou 14 pt em negrito e acima. No trabalho web, verifique o tamanho e 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 usar transparência, mescle o primeiro plano e o fundo final renderizados 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 pequenos, fundos ocupados e displays de baixa qualidade ainda podem tornar o texto difícil de ler. Trate a razão como um importante sinal.
Isto é o mesmo que o contraste de código QR?
Não. O contraste de códigos QR afeta a confiabilidade do leitor, enquanto esta ferramenta foca nos limiares de legibilidade do texto. A matemática está relacionada, mas a decisão prática é diferente.