Verificador de Contraste – Contrast Checker

Este Verificador de Contraste audita o contraste de cores WCAG e APCA para conformidade com a ADA — um teste de acessibilidade de…

✅ O que você obterá deste verificador de contraste: - razão de contraste WCAG 2.2 e APCA Lc, - elementos com problemas destacados na página, - regras CSS que produziram as cores, rastreadas através de mapas de origem (se disponíveis), - ferramenta de seleção de cores embutida com um analisador de contraste e alternativas sugeridas, - visualização ao vivo das correções, - exportação das correções para CSS (com comentários de localização de origem). 🔍 Construído como um verificador de contraste de cores de site que percorre estados pseudo, shadow DOM, iframes de mesma origem e texto sobre imagens e gradientes — não apenas fundos planos. ⚠️ Permissão de depuração necessária. A cobertura deste verificador de contraste só é possível através do Protocolo Chrome DevTools, que requer a permissão 'debugger'. Uma vez conectado, o Chrome exibe uma barra de informações em todas as abas e não a oculta ao se desconectar. ⚡ Fluxo de trabalho altamente otimizado: • Veja todos os elementos com problemas de acessibilidade de cores destacados de relance. • Visualize as mudanças imediatamente, com razões de contraste e veredictos recalculados. • Aplique CSS personalizado na aba Folha de Estilos; os problemas afetados são marcados na lista. • Para verificar o contraste de cores manualmente, use a ferramenta de seleção de cores embutida: clique com o botão esquerdo para definir o primeiro plano, clique com o botão direito para o fundo, e a razão é atualizada instantaneamente. • Use a aba Exclusões para ocultar tudo, exceto os elementos que você está corrigindo. 📐 Critérios por trás dos veredictos. Este verificador de razão de contraste testa a acessibilidade de cores em relação aos requisitos WCAG e APCA. O APCA Lc é avaliado em relação aos limites do Bridge-PCA, que são mais rigorosos do que as razões WCAG correspondentes — portanto, uma aprovação no Bridge-PCA sempre implica uma aprovação no WCAG. 🔬 O que é APCA? APCA (Algoritmo de Contraste Perceptual Acessível) é um modelo que rastreia como as pessoas leem texto em uma tela. Dois pares de cores com a mesma razão WCAG podem parecer visivelmente diferentes, e seu APCA Lc (contraste de luminância) reflete isso: um par pode passar no WCAG, mas parecer difícil de ler. Este verificador de acessibilidade de cores do site calcula ambos os números. 🚧 Limitações: 1. Como todo verificador de acessibilidade de sites, este fornece estimativas de melhor esforço, não um certificado de conformidade. 2. A cobertura é apenas de texto; a verificação de elementos não textuais (WCAG 1.4.11) está no roteiro. 3. Iframes de origem cruzada não são acessados. 4. Fundos complexos e animações são amostrados em um número finito de pontos espaciais e temporais; a razão da pior amostra é relatada, mas pode ainda ser otimista; o amostrador também pode ser enganado por artefatos de renderização. 5. Sites altamente dinâmicos podem produzir problemas espúrios. 6. Este verificador de contraste de cores não executa OCR em imagens automaticamente; teste imagens com texto significativo através da ferramenta de seleção de cores incluída. 🔒 Privacidade e permissões. ▸ Executa localmente; nenhum dado da página da web sai da sua máquina. ▸ 'activeTab' apenas: o script de análise é injetado quando você clica no ícone da barra de ferramentas. ▸ A permissão 'debugger' é necessária para acessar o Shadow DOM e iframes, rastrear fontes CSS e amostrar fundos complexos. 🧮 Detalhes de precisão. Texto semi-transparente e opacidade de ancestrais são tratados corretamente: o primeiro plano é composto sobre seu verdadeiro fundo antes que a luminância seja medida, de modo que a razão relatada corresponda ao que os usuários realmente veem. Funções de cores de amplo espectro — oklch, lab, lch, color(display-p3) — também são suportadas, limitadas a sRGB quando fora do espectro. 🎨 Texto sobre imagens e gradientes. Ao contrário da maioria das ferramentas semelhantes, esta não desiste de fundos não planos ou confia no que 'getComputedStyle' / 'CSS.getBackgroundColors' relatam. Ela percorre a ordem de pintura do navegador para compor o verdadeiro fundo — opacidade, modos de mesclagem, gradientes lineares, filtro de fundo — e quando isso não é suficiente, esta ferramenta de contraste de cores amostra os pixels renderizados na localização do texto. ❓ Perguntas e Respostas 📌 Por que o mesmo par de cores às vezes recebe veredictos diferentes sob WCAG e APCA? ↳ WCAG mede luminância; APCA mede contraste perceptual. Um par que passa em 4.5:1 ainda pode não atingir o limite do APCA Lc — um modelo mais rigoroso. 📌 O APCA substitui o WCAG? ↳ Não — o APCA não é uma substituição, mas uma segunda opinião útil. Este verificador de contraste relata ambos. 📌 Posso escanear um arquivo local ou meu servidor de desenvolvimento com este verificador de acessibilidade? ↳ Sim. Ative "Permitir acesso a URLs de arquivos" nas configurações da extensão. Abra a URL file:// ou localhost e clique no ícone da barra de ferramentas. Apenas chrome://, a Chrome Web Store e outros esquemas restritos são ignorados. 📌 Esta ferramenta certifica a conformidade com a ADA? ↳ Não. Ela verifica apenas o contraste de cores — um aspecto da acessibilidade. A conformidade com a ADA é uma determinação legal que abrange muitos padrões e critérios (semântica, acesso por teclado, texto alternativo, legendas e mais) e deve ser avaliada por um profissional qualificado.