Relatório de Conformidade WCAG

• Relatório instantâneo de conformidade com a paleta completa: O relatório de conformidade com as WCAG calcula as taxas de contraste para cada par de primeiro plano e plano de fundo em sua paleta instantaneamente enquanto você digita. Nenhum botão para pressionar - adicione ou altere qualquer cor e todo o relatório será atualizado em tempo real, mostrando aprovação/reprovação para todos os critérios WCAG 2.1.
• Cobertura abrangente de critérios: Cada par de cores é avaliado de acordo com o Critério de Sucesso WCAG 2.1 1.4.3 (Contraste Mínimo - AA), 1.4.6 (Contraste Aprimorado - AAA) e 1.4.11 (Contraste Sem Texto - AA). Os resultados são mostrados para texto normal, texto grande e componentes de UI com um indicador claro de aprovação/reprovação para cada um.
• Processamento 100% privado do navegador: todos os cálculos de contraste acontecem localmente no seu navegador usando JavaScript. Os valores da sua paleta de cores nunca saem do seu dispositivo e nunca são enviados para nenhum servidor - completamente seguro para cores de marcas proprietárias e projetos de clientes.
• Gratuito e sem necessidade de inscrição: gere relatórios ilimitados de conformidade com WCAG sem inscrição, sem assinatura e sem limites de uso. A ferramenta é totalmente gratuita para sempre, sem anúncios bloqueando a interface.

• Validação do sistema de design: os mantenedores do sistema de design usam o relatório de conformidade WCAG para validar se cada token de cor no sistema atende aos padrões de acessibilidade. Insira a paleta completa – texto, plano de fundo, acento, link, sucesso, erro e aviso – e obtenha uma matriz de conformidade completa para todas as combinações.
• Desenvolvimento de tema CSS: os desenvolvedores front-end usam o relatório de conformidade WCAG para verificar se suas paletas de cores de tema claro e escuro atendem aos requisitos de acessibilidade antes da implantação. O relatório detecta problemas de contraste antecipadamente, evitando regressões de acessibilidade na produção.
• Auditoria de acessibilidade: Os auditores de acessibilidade usam o relatório de conformidade WCAG para avaliar rapidamente o contraste de cores de todo um sistema de design. A análise abrangente par a par identifica exatamente quais combinações de cores falham e em que nível, agilizando o processo de correção.
• Documentação de conformidade: Os consultores de acessibilidade usam o relatório de conformidade WCAG para gerar documentação para relatórios VPAT (modelo voluntário de acessibilidade de produto) e declarações de conformidade de acessibilidade. A função copiar para a área de transferência facilita a inclusão de resultados na documentação formal.
• Design de marca e marketing: Os designers de marca usam o relatório de conformidade WCAG para garantir que os materiais de marketing, páginas de destino e diretrizes da marca usem combinações de cores que atendam aos padrões de acessibilidade sem comprometer a identidade da marca.
• Plataformas SaaS e de comércio eletrônico: as equipes de produto usam o relatório de conformidade WCAG para validar se todo o sistema de cores da UI - desde botões e links até estados de formulário e alertas - fornece contraste suficiente para todos os usuários, reduzindo o risco legal e melhorando as taxas de conversão para usuários com deficiência visual.

Um relatório de conformidade com as WCAG avalia se as combinações de cores em uma paleta de design atendem aos requisitos de contraste definidos nas Diretrizes de acessibilidade para conteúdo da Web (WCAG) 2.1. Dado um conjunto de cores - normalmente texto, plano de fundo, destaque, link e outras cores da interface do usuário - o relatório calcula a taxa de contraste para cada par significativo de primeiro plano e plano de fundo e verifica-a em relação aos limites WCAG para texto normal (AA: 4,5:1, AAA: 7:1), texto grande (AA: 3:1, AAA: 4,5:1) e componentes da interface do usuário (AA: 3:1). O resultado é uma matriz abrangente que mostra exatamente quais combinações de cores são aprovadas ou reprovadas em cada critério.

1. Insira sua paleta de cores: comece com as quatro cores essenciais – texto, plano de fundo, destaque e link – digitando valores HEX ou usando o seletor de cores. Adicione cores opcionais como título, borda, sucesso, erro e aviso conforme necessário. Você também pode carregar uma paleta de amostra para ver como o relatório funciona.
2. As taxas de contraste são calculadas: a ferramenta converte cada cor em seus componentes sRGB e calcula a luminância relativa usando a fórmula WCAG 2.1. Para cada par exclusivo de primeiro plano-fundo, a taxa de contraste é calculada como (L₁ + 0,05) / (L₂ + 0,05) onde L₁ é a luminância mais clara. O resultado é um valor entre 1:1 (sem contraste) e 21:1 (contraste máximo).
3. O relatório é gerado instantaneamente: cada par de cores é avaliado em relação a todos os cinco critérios WCAG (texto normal AA e AAA, texto grande AA e AAA, componentes de UI AA). O relatório mostra uma pontuação geral de conformidade, classificações por par e recomendações de uso para pares que não atendem a todos os critérios. Todo o processamento acontece inteiramente no seu navegador - nenhum dado é carregado.

• Texto normal - AA (4,5:1): A taxa de contraste mínima necessária para corpo de texto abaixo de 18 pontos (ou negrito de 14 pontos). Este é o requisito de acessibilidade mais comum e é exigido pela maioria das leis de acessibilidade em todo o mundo, incluindo ADA, EN 301 549 e AODA.
• Texto Normal - AAA (7:1): Uma taxa de contraste aprimorada para texto normal que proporciona melhor legibilidade para usuários com deficiência visual. AAA é recomendada para conteúdo essencial, mas não é exigida para conformidade geral com as WCAG.
• Texto Grande - AA (3:1): Um requisito de contraste reduzido para texto com pelo menos 18 pontos ou 14 pontos em negrito, uma vez que caracteres maiores são mais fáceis de distinguir. Texto grande que passa de 3:1 é considerado aceitável para conformidade com AA.
• Texto Grande - AAA (4,5:1): O requisito de contraste aprimorado para texto grande. Texto grande passando de 4,5:1 atende aos padrões AAA.
• Componentes UI - AA (3:1): Aplica-se a objetos gráficos e componentes UI (botões, campos de formulário, ícones) onde as informações visuais precisam ser distinguíveis. Isto é definido no Critério de Sucesso 1.4.11 das WCAG 2.1.

A pontuação geral de conformidade mostra a porcentagem de pares de cores que passam nas WCAG AA para texto normal - isso representa o critério mais rigoroso comumente exigido. Uma pontuação de 100% significa que todas as combinações de cores em sua paleta são seguras para uso no corpo do texto. A tabela por par fornece a taxa de contraste exata e o status de aprovação/reprovação para cada critério. Pares marcados como AA Grande podem ser usados ​​para texto grande e elementos de interface do usuário, mas não para corpo de texto. Pares marcados como Falha não devem ser usados ​​juntos para qualquer texto ou elemento interativo. Use a seção de recomendações para entender as limitações de cada par não aprovado e planejar seus ajustes de cores.