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 irá obter deste verificador de contraste: - Rácio 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 integrada com um analisador de contraste e alternativas sugeridas, - pré-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 website que analisa 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 necessita da permissão 'debugger'. Uma vez anexado, o Chrome mostra uma barra de informações em todas as abas e não a oculta ao desanexar. ⚡ Fluxo de trabalho altamente otimizado: • Veja todos os elementos com problemas de acessibilidade de cor destacados de relance. • Pré-visualize as alterações imediatamente, com rácios 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 integrada: clique com o botão esquerdo para definir o primeiro plano, clique com o botão direito para o fundo, e o rácio é atualizado instantaneamente. • Use a aba Exclusões para ocultar tudo, exceto os elementos que está a corrigir. 📐 Critérios por trás dos veredictos. Este verificador de rácio de contraste testa a acessibilidade de cor em relação aos requisitos WCAG e APCA. O APCA Lc é avaliado em relação aos limiares Bridge-PCA, que são mais rigorosos do que os rácios WCAG correspondentes — portanto, uma aprovação Bridge-PCA implica sempre uma aprovação WCAG. 🔬 O que é APCA? APCA (Algoritmo de Contraste Perceptual Acessível) é um modelo que rastreia como as pessoas leem texto numa tela. Dois pares de cores com o mesmo rácio WCAG podem parecer visivelmente diferentes, e o 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 calcula ambos os números. 🚧 Limitações: 1. Como qualquer outro verificador de acessibilidade de websites, este fornece estimativas de melhor esforço, não um certificado de conformidade. 2. A cobertura é apenas para 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 analisados. 4. Fundos complexos e animações são amostrados a um número finito de pontos espaciais e temporais; o rácio da pior amostra é reportado, 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 web sai da sua máquina. ▸ Apenas 'activeTab': o script de análise é injetado quando clica no ícone da barra de ferramentas. ▸ A permissão 'debugger' é necessária para analisar 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 o seu verdadeiro fundo antes que a luminância seja medida, de modo que o rácio reportado corresponda ao que os utilizadores realmente veem. Funções de cor 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 nem confia no que 'getComputedStyle' / 'CSS.getBackgroundColors' reportam. Ela analisa a ordem de pintura do navegador para compor o verdadeiro fundo — opacidade, modos de mistura, 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. ❓ Q&A 📌 Por que é que o mesmo par de cores às vezes recebe veredictos diferentes sob WCAG e APCA? ↳ O WCAG mede a luminância; o APCA mede o contraste perceptual. Um par que passa 4.5:1 pode ainda não atingir o limiar Lc do Bridge-PCA — 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 reporta ambos. 📌 Posso escanear um ficheiro local ou o meu servidor de desenvolvimento com este verificador de acessibilidade? ↳ Sim. Ative "Permitir acesso a URLs de ficheiros" nas definiçõ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.