Verificador de Contraste (WCAG 2.1)
Verifique o contraste texto/fundo com os padrões WCAG.
Sugere automaticamente cores aprovadas e emite certificados de conformidade.
🔤 Cor do Texto
🎨 Cor de Fundo
Isto é uma prévia de texto normal (16px)
Isto é texto em negrito (16px bold)
Isto é texto grande (24px)
Isto é texto grande em negrito (18px bold)
Proporção de Contraste
12.63 : 1
AA Texto Normal
≥ 4.5:1
AA Texto Grande
≥ 3:1
AAA Texto Normal
≥ 7:1
AAA Texto Grande
≥ 4.5:1
💡 Cores sugeridas para atender ao padrão AA:
Ajustar cor do texto:
Ajustar cor de fundo:
🏆 Certificado de Conformidade WCAG AA
* Clicar em 'Compartilhar no 𝕏' também salvará o certificado automaticamente.
📋 Código CSS
Sobre
Uma ferramenta gratuita para verificar instantaneamente se as combinações de cores da sua web ou app atendem aos padrões de contraste WCAG 2.1. Baixo contraste dificulta a leitura de texto para pessoas com deficiências visuais.
Quando suas cores falham, a ferramenta sugere automaticamente a cor aprovada mais próxima, ajudando você a melhorar a acessibilidade sem alterar drasticamente seu design.
Assim que você passar no padrão AA, você pode salvar um Certificado Oficial de Conformidade WCAG AA para compartilhar globalmente.
Como Usar
Inserir Cores
Clique no seletor de cores ou digite um código HEX/RGB diretamente para a cor do texto e cor de fundo.
Verificar Resultados
A proporção de contraste e o status WCAG AA/AAA atualizam em tempo real com prévia ao vivo.
Emitir Certificado
Se você passar no limiar AA, pode salvar um certificado oficial e compartilhá-lo facilmente.
Glossário
- Proporção de Contraste
- Um valor numérico representando a diferença de luminosidade entre as cores do primeiro plano e do fundo. Varia de 1:1 (nenhuma diferença) a 21:1 (preto sobre branco).
- WCAG (Diretrizes de Acessibilidade para Conteúdo Web)
- Padrões internacionais estabelecidos pelo W3C definindo como tornar o conteúdo web mais acessível. Governos em todo o mundo exigem conformidade com essas diretrizes.
- Padrão AA
- O alvo intermediário para contraste. Texto normal requer pelo menos uma proporção de 4,5:1, enquanto texto grande (18pt+) requer 3:1. Este é o padrão legal para a maioria dos ambientes corporativos.
- Padrão AAA
- O padrão WCAG mais rigoroso para necessidades especializadas de acessibilidade. Requer 7:1 para texto normal e 4,5:1 para texto grande. Pode restringir fortemente as escolhas de design.
- Luminância Relativa
- O brilho relativo de qualquer ponto em um espaço de cores. Usa cálculos matemáticos de gama ajustados para a percepção do olho humano para pontuar cores em uma escala de 0 a 1.
- Acessibilidade (a11y)
- A prática de criar ambientes utilizáveis para pessoas com deficiências, incluindo deficiência visual, restrições cognitivas e declínio relacionado à idade.
FAQ
- Q.Qual é a proporção de contraste recomendada para texto na web?
- Pelos padrões WCAG AA, o texto normal requer uma proporção mínima de 4,5:1. Texto maior (tipicamente 18pt ou 14pt em negrito) requer apenas 3:1.
- Q.Esta ferramenta simula daltonismo?
- Não, esta versão foca exclusivamente na verificação matemática de proporções de contraste. Use softwares dedicados de simulação de daltonismo em conjunto com esta ferramenta.
- Q.Como o algoritmo calcula a proporção?
- Implementa a fórmula exata recomendada pela WCAG calculando a Luminância Relativa de ambas as cores e comparando-as utilizando a escala (L1 + 0,05) / (L2 + 0,05).
- Q.Devo buscar conformidade AA ou AAA?
- O padrão industrial global e o requisito legal para a maioria das operações comerciais é o nível AA. O AAA é altamente restritivo e geralmente exigido apenas para plataformas governamentais especializadas ou de acessibilidade.
- Q.Os dados das cores da minha marca são enviados a um servidor em nuvem?
- Nunca. Toda a análise cromática e renderização de certificado acontece estritamente dentro da memória do navegador do seu dispositivo local, garantindo total privacidade corporativa.
- Q.Posso inserir cores usando formatos diferentes de códigos HEX?
- Sim, além dos formatos HEX (como #ffffff), você também pode selecionar cores visualmente usando o seletor de cores ou inserir valores de coordenadas RGB diretamente.
- Q.O certificado gerado tem valor legal?
- É uma prova matemática confiável das suas combinações aprovadas sob as fórmulas do W3C, mas não substitui uma auditoria de acessibilidade abrangente de terceiros.
Casos de Uso
Validação de Design Web
Verifique o contraste durante o design para garantir conformidade WCAG para landing pages e sites corporativos.
Revisão de UI de App Mobile
Verifique o texto de botões e rótulos quanto à legibilidade por usuários com deficiências visuais.
Conformidade de Acessibilidade
Audite sites para problemas de contraste para atender aos requisitos ADA, EN 301 549 ou WCAG globalmente.
Apresentações
Verifique se as cores do texto em slides e documentos são legíveis por todos os membros do público.
Enviar feedback
Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.
O feedback está temporariamente suspenso
O servidor está ocupado ou a proteção contra spam está ativa. Tente novamente mais tarde.