Verificador de contraste de cores (WCAG AA/AAA)

• Cálculo instantâneo do contraste WCAG: o verificador de contraste de cores calcula a proporção de contraste WCAG e todos os resultados de aprovação/reprovação a cada tecla digitada. Sem botão para clicar: insira suas cores e veja os resultados na hora.
• Seguro e 100% privado: todos os cálculos de contraste rodam inteiramente no seu navegador com a fórmula de luminância relativa do WCAG 2.1. Nenhum dado de cor é enviado a nenhum servidor.
• Cobertura completa do WCAG 2.1: AA e AAA: verifica todos os critérios relevantes do WCAG 2.1: AA e AAA para texto normal, AA e AAA para texto grande, e AA para componentes de interface (SC 1.4.11). Inclui pré-visualização ao vivo mostrando como suas cores ficam em cada tamanho de texto.
• 100% grátis e sem cadastro: totalmente grátis, sem conta, sem plano premium, sem limites de uso e sem anúncios bloqueando a interface. Verifique o contraste de cores quantas vezes precisar.

• Desenvolvimento web e design de interface: desenvolvedores front-end e designers de UI usam o verificador de contraste de cores para confirmar que as combinações de cor de texto e fundo atendem aos requisitos WCAG AA antes de publicar. Detectar falhas de contraste cedo evita correções caras de acessibilidade.
• Validação das cores da marca: designers usam o verificador de contraste de cores para validar que as cores da marca atendem aos padrões de acessibilidade quando usadas como texto sobre fundos. Muitas paletas de marca reprovam no WCAG AA, e o verificador identifica quais combinações são seguras.
• E-commerce e páginas de produto: equipes de e-commerce usam o verificador de contraste de cores para garantir que descrições de produto, preços e botões de call-to-action atendam aos requisitos de contraste WCAG AA, melhorando a legibilidade para todos os usuários, inclusive os com baixa visão.
• Design de documentos e apresentações: criadores de conteúdo e designers de apresentações usam o verificador de contraste de cores para verificar se o texto dos slides, os rótulos dos gráficos e o texto dos infográficos são legíveis sobre os fundos escolhidos.
• Design de apps móveis: designers de apps móveis usam o verificador de contraste de cores para garantir que os elementos de interface atendam aos requisitos WCAG AA em temas claros e escuros, algo essencial para usuários com deficiência visual em telas pequenas.
• Auditorias e conformidade de acessibilidade: consultores de acessibilidade e equipes de QA usam o verificador de contraste de cores como ferramenta rápida de primeira análise durante auditorias WCAG. Ele identifica falhas de contraste que precisam ser corrigidas antes dos testes formais com tecnologias assistivas.

O contraste de cor WCAG refere-se à proporção de contraste mínima entre as cores de primeiro plano (texto) e fundo exigida pelas Diretrizes de Acessibilidade para Conteúdo Web (WCAG) para garantir que o conteúdo seja legível por pessoas com baixa visão ou deficiências de cor. A proporção de contraste é calculada usando a luminância relativa de cada cor, um valor derivado dos valores de canal sRGB linearizados. As proporções vão de 1:1 (sem contraste, cores idênticas) a 21:1 (contraste máximo, preto sobre branco). Nosso verificador de contraste de cores baseado no navegador calcula essa proporção instantaneamente e a avalia com base em todos os critérios de sucesso relevantes do WCAG 2.1.

1. Insira suas cores: digite um valor HEX (por exemplo, #0066cc ) ou um valor RGB (por exemplo, rgb(0, 102, 204) ) nos campos de primeiro plano e fundo, ou use o seletor de cores nativo. Você também pode escolher um par de cores predefinido para começar rapidamente.
2. Cálculo instantâneo: o verificador de contraste de cores calcula a luminância relativa WCAG 2.1 de cada cor e obtém a proporção de contraste. Todos os cálculos rodam localmente no seu navegador: nenhum dado de cor é enviado a um servidor.
3. Veja os resultados: a tabela de resultados mostra o status de aprovação/reprovação para todos os critérios relevantes do WCAG 2.1. A pré-visualização ao vivo mostra como suas cores ficam em texto normal, texto grande e tamanhos de componentes de interface.

• AA - Texto normal (4,5:1): a proporção de contraste mínima para corpo de texto, rótulos e legendas menores que 18 pt (24 px) com peso normal ou 14 pt (18,67 px) em negrito. Exigida para conformidade com o WCAG 2.1 nível AA.
• AA - Texto grande (3:1): a proporção de contraste mínima para texto de 18 pt (24 px) ou mais com peso normal, ou 14 pt (18,67 px) ou mais em negrito. Títulos geralmente se qualificam como texto grande.
• AA - Componentes de interface (3:1): a proporção de contraste mínima para a apresentação visual de componentes de interface (botões, campos de formulário, indicadores de foco) e objetos gráficos. Definida no WCAG 2.1 SC 1.4.11.
• AAA - Aprimorado (7:1 / 4,5:1): os requisitos de contraste aprimorados para conformidade AAA: 7:1 para texto normal e 4,5:1 para texto grande. AAA é o nível mais alto e não é obrigatório para todo o conteúdo.

O verificador de contraste de cores avalia as proporções de contraste em relação aos limiares matemáticos do WCAG 2.1. Passar na verificação de proporção de contraste não garante acessibilidade completa: a conformidade com o WCAG também exige HTML semântico correto, navegação por teclado, compatibilidade com leitores de tela e outros fatores não relacionados a cores. Além disso, a fórmula de contraste do WCAG não considera todos os tipos de deficiência de visão de cores. A validação completa de acessibilidade exige testes manuais com tecnologias assistivas (leitores de tela, softwares de ampliação) e revisão especializada em acessibilidade.