Verifique as proporções de contraste WCAG 2.1 entre qualquer cor de primeiro plano e fundo, visualize texto de amostra e veja os resultados de aprovação AA/AAA instantaneamente.
Features
- Seleção de cor ao vivo: Ajuste as cores de primeiro plano e fundo com o seletor Ant Design ou digite valores HEX precisos.
- Matriz WCAG: Veja os requisitos AA/AAA para texto normal, texto grande e gráficos de IU em uma única tabela.
- Luminância precisa: As proporções de contraste seguem o WCAG 2.1 usando canais RGB linearizados e incluem leituras de luminância por cor.
- Bloco de visualização: Teste títulos e parágrafos dentro de um cartão de amostra ao vivo com sua paleta escolhida.
Usage Guide
- Escolher cores: Selecione ou cole valores HEX para primeiro plano e fundo.
- Revisar proporção: Verifique a proporção de contraste calculada e a tabela AA/AAA para obter insights de aprovação/falha.
- Ajustar cópia: Edite o texto de amostra para visualizar rótulos, botões ou cópia de marketing reais.
Technical Details
Luminância relativa
Cada canal RGB é convertido para um valor linear usando a curva gama WCAG antes de calcular a luminância com coeficientes 0.2126, 0.7152 e 0.0722.
Proporção de contraste
A fórmula da proporção (L1 + 0.05) / (L2 + 0.05) compara as cores mais claras e mais escuras para garantir legibilidade consistente em todos os dispositivos.
Limiares
O texto normal AA requer ≥ 4.5:1, texto grande ≥ 3:1, AAA normal precisa de 7:1, AAA grande 4.5:1, e objetos gráficos devem atender a 3:1.
Frequently Asked Questions
- O texto grande usa limiares diferentes?
- Sim. Texto ≥ 18px regular ou 14px negrito se qualifica como grande e precisa apenas de 3:1 para AA ou 4.5:1 para AAA.
- Como testar gradientes?
- Verifique as paradas mais claras e mais escuras no gradiente. Cada par de paradas deve atender à proporção desejada.
- Ícones contam como texto?
- Ícones sólidos e gráficos de IU essenciais devem atender a pelo menos 3:1 de contraste em relação ao seu fundo.
Related Documentation
- WCAG 2.1 Contraste (Critério de sucesso 1.4.3) - Orientação oficial sobre níveis de contraste mínimos para texto e imagens de texto.
- WCAG 2.1 Contraste (1.4.6) - Requisitos de contraste aprimorados para conformidade AAA.
- MDN - Cálculo de luminância - Contexto sobre a fórmula RGB linear usada em ferramentas de acessibilidade.
- W3C - Matemática da proporção de contraste - Detalhes sobre a fórmula da proporção, arredondamento e justificativa.
- Cartões de design inclusivo - Dicas sobre como combinar cores e tipografia para públicos diversos.