AnyTools
🌓
Calculadora de contraste de cor
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.
Entradas de cor
Primeiro plano
Fundo
Visualização
Texto de amostra
Título de visualizaçãoInterfaces acessíveis combinam cores de marca vibrantes com contraste suficiente para manter a cópia legível.
Resultados de contraste
Proporção de contraste
19.79:1
Luminância relativa
Primeiro plano0.003
Fundo1.000
| Critério | Requerido | Status | Notas |
|---|---|---|---|
| AA – texto normal | 4.5:1 | Aprovado | Corpo do texto ≥ 4.5:1 |
| AAA – texto normal | 7.0:1 | Aprovado | Cópia de alta importarância ≥ 7:1 |
| AA – texto grande | 3.0:1 | Aprovado | Texto ≥ 18pt regular ou 14pt negrito ≥ 3:1 |
| AAA – texto grande | 4.5:1 | Aprovado | Texto grande ≥ 4.5:1 |
| Gráficos/ícones de IU | 3.0:1 | Aprovado | Ícones essenciais e estados visuais ≥ 3:1 |
Orientação de design
Use a tabela de proporções como guia e itera até que cada estado atinja o nível alvo.
- Adicione transparência ou sobreposições ao colocar texto em fotografias para preservar o contraste.
- Reserve AAA para cópia de missão crítica; AA é um excelente padrão para a maioria dos painéis.
- Documente os pares de cores aprovados em seu sistema de design para que os desenvolvedores reutilizem paletas conformes.
❓O que é teste de contraste de cor
O teste de contraste de cor garante que o texto ou ícones permaneçam legíveis medindo a diferença entre a luminância de primeiro plano e fundo, um requisito fundamental no WCAG e na maioria das diretrizes de marca.
✨Recursos principais
🎨
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.
📋Guia de uso
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.
📚Introdução técnica
🔢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.
💡How To & Tips
🧭
Começar com paleta de marca
Troque cores rapidamente para testar temas claros e escuros da mesma paleta base.
🪄
Iterar em pequenos passos
Ajuste os valores HEX ou use o controle deslizante do seletor de cores para ver como pequenos ajustes afetam a conformidade.
📝
Visualizar conteúdo
Cole cópia de IU real no bloco de visualização para avaliar hierarquia e ênfase.
🔗Related Documents
📖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.
🧭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.
📝Registro de atualizações
📌v1.0.251117v1.0.0Lançamento inicial com tabela WCAG, leitura de luminância e cartão de visualização ao vivo.(2025-11-17)
📦Componentes recomendados
User Comments
Loading...