Verificador de contraste de cores de links

• Verificação instantânea de contraste duplo: O verificador de contraste de cores do link avalia o contraste em relação ao plano de fundo e ao corpo do texto ao redor a cada pressionamento de tecla. Nenhum botão para pressionar - insira suas três cores e veja instantaneamente os resultados de aprovação/reprovação das WCAG para todos os critérios críticos de contraste de link.
• Identificação de Link WCAG SC 1.4.1: Valida especificamente o Critério de Sucesso WCAG 1.4.1 (Uso de Cor) para links. Verifica se as cores dos links têm uma taxa de contraste de pelo menos 3:1 em relação ao corpo do texto, garantindo que os usuários com deficiências de visão de cores possam distinguir os links do conteúdo normal.
• Processamento de navegador 100% privado: todos os cálculos de contraste são executados inteiramente em seu navegador usando a fórmula de luminância relativa WCAG 2.1. Seus valores 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: verifique o contraste da cor do link quantas vezes precisar, sem inscrição, sem assinatura e sem limites de uso. A ferramenta é totalmente gratuita para sempre, com uma visualização ao vivo que é atualizada em tempo real.

• Desenvolvimento Web e Design CSS: Os desenvolvedores front-end usam o verificador de contraste de cores do link para verificar se os estilos dos links passam no WCAG SC 1.4.1 antes do envio. Garantir que os links sejam distinguíveis do corpo do texto pela cor E pelo contraste evita falhas de acessibilidade nas folhas de estilo de produção.
• Validação de token de link do sistema de design: os mantenedores do sistema de design usam o verificador de contraste de cores do link para validar se os tokens de cores do link - padrão, visitado, pairar, ativo - todos têm contraste suficiente em relação aos tokens de fundo e aos tokens de cor do texto do corpo antes da publicação.
• Sites de comércio eletrônico e conteúdo: as equipes de comércio eletrônico usam o verificador de contraste de cores de links para garantir que links de páginas de produtos, links de navegação e links de rodapé atendam aos requisitos WCAG - fundamental para usuários com baixa visão que dependem de uma diferenciação clara de links para navegação.
• Auditorias WCAG e conformidade de acessibilidade: Os auditores de acessibilidade usam o verificador de contraste de cores do link durante as auditorias WCAG 2.1 AA. SC 1.4.1 é um ponto de falha comum - esta ferramenta fornece resultados claros de aprovação/reprovação e sugestões práticas para correção.
• Gerenciamento e publicação de conteúdo: Editores e editores de conteúdo usam o verificador de contraste de cores de links para verificar se os links embutidos em artigos e postagens de blog são claramente distinguíveis do corpo do texto ao redor - melhorando a legibilidade para todos os usuários.
• Design móvel e responsivo: os designers móveis usam o verificador de contraste de cores dos links para garantir que as cores dos links funcionem em temas claros e escuros em telas pequenas, onde distinguir links apenas pela cor é mais desafiador devido ao brilho e aos tamanhos menores de texto.

O contraste da cor do link refere-se à distinção visual dos hiperlinks tanto do fundo em que estão quanto do texto do corpo ao redor, conforme medido pela fórmula de taxa de contraste WCAG 2.1. Ao contrário da verificação de contraste de texto padrão, a avaliação da cor do link envolve duas verificações distintas: o link deve ter contraste suficiente em relação ao fundo (padrão SC 1.4.3) E a cor do link deve ter contraste de pelo menos 3:1 em relação à cor do texto ao redor (SC 1.4.1 Uso de cores). Este duplo requisito existe porque os usuários precisam identificar links mesmo que não consigam perceber diferenças de matiz - por exemplo, usuários com protanopia (cegueira para vermelho) podem não ser capazes de distinguir um link azul de um texto cinza escuro se a diferença de luminância for muito pequena. Nosso verificador de contraste de cores de links baseado em navegador avalia ambos os critérios simultaneamente, fornecendo uma avaliação abrangente de aprovação/reprovação com sugestões práticas.

1. Insira suas três cores: digite valores HEX ou RGB (ou use o seletor de cores) para a cor do link, cor do texto do corpo e cor de fundo. A área de visualização ao vivo mostra exatamente como suas cores ficarão junto com um exemplo de parágrafo contendo um link embutido.
2. Cálculo instantâneo de eixo duplo: A ferramenta calcula a luminância relativa WCAG 2.1 para cada cor e calcula três taxas de contraste: link-vs-fundo, link-vs-corpo-texto e corpo-texto-vs-fundo. Todos os cálculos usam a fórmula WCAG padrão e são executados inteiramente no seu navegador.
3. Revise os resultados e corrija problemas: o painel de resultados mostra o status de aprovação/reprovação para cada critério com barras de proporção, uma tabela de conformidade detalhada e uma lista de problemas específicos com sugestões acionáveis. Utilize o botão “Copiar Relatório” para exportar os resultados para documentação.

• SC 1.4.1 - Uso da Cor (Nível AA): A cor não deve ser o único meio visual de transmissão de informações. Para links identificados apenas pela cor, a cor do link deve ter uma taxa de contraste de pelo menos 3:1 em relação à cor do texto ao redor. Isso garante que os usuários possam distinguir links, mesmo que não consigam diferenciar matizes. Recomenda-se adicionar sublinhados, ícones ou outros indicadores que não sejam coloridos.
• SC 1.4.3 - Contraste Mínimo (Nível AA): O texto do link (como todo texto) deve ter pelo menos 4,5:1 de contraste em relação ao fundo para texto normal e 3:1 para texto grande (≥18pt ou ≥14pt em negrito). Isso se aplica à cor do link em relação à cor de fundo.
• SC 1.4.11 - Contraste não textual (Nível AA): Se os links usarem sublinhados, bordas ou outros indicadores não textuais, esses indicadores deverão ter contraste de pelo menos 3:1 em relação ao fundo. Isto se aplica ao limite visual de qualquer elemento de link interativo.

Embora o verificador de contraste de cores do link avalie relações matemáticas de contraste, a verdadeira acessibilidade do link envolve mais do que apenas cor:

• Não confie apenas na cor: sempre combine cores com sublinhados, ícones, negrito ou outros indicadores que não sejam de cor. WCAG SC 1.4.1 exige isso explicitamente - a identificação do link somente por cor falha no critério, mesmo que as taxas de contraste sejam suficientes.
• Considere todos os estados do link: os estados padrão, visitado, pairar, foco e ativo têm cores diferentes. Cada estado deve passar independentemente nas verificações de contraste em relação ao plano de fundo e ao corpo do texto.
• Teste com simulações de deficiência de visão de cores: uma combinação de cores que passe nas verificações de contraste ainda pode ser indistinguível para usuários com certos tipos de daltonismo. Use simuladores de daltonismo para verificar a distinção do link.
• Forneça um texto descritivo do link: mesmo com contraste perfeito, os links “clique aqui” e “leia mais” são inacessíveis para usuários de leitores de tela. Use um texto de link descritivo que faça sentido fora do contexto.