Analisador WCAG
Analise toda a paleta quanto à conformidade WCAG AA e AAA, identificando os pares de cores com contraste insuficiente e sugerindo correções acessíveis.
Paleta a analisar
Matriz de contraste
Primary | Secondary | Background | Text | Muted | |
|---|---|---|---|---|---|
Primary | — | 1.15 Fail | 3.68 AA-L | 3.98 AA-L | 1.29 Fail |
Secondary | 1.15 Fail | — | 4.23 AA-L | 3.45 AA-L | 1.12 Fail |
Background | 3.68 AA-L | 4.23 AA-L | — | 14.63 AAA | 4.76 AA |
Text | 3.98 AA-L | 3.45 AA-L | 14.63 AAA | — | 3.07 AA-L |
Muted | 1.29 Fail | 1.12 Fail | 4.76 AA | 3.07 AA-L | — |
Legenda WCAG 2.1
Nível AAA
Rácio ≥ 7:1 - Excelência
Nível AA
Rácio ≥ 4,5:1 - Padrão
AA grande
Rácio ≥ 3:1 - Texto grande
Reprovado
Rácio < 3:1 - Não conforme
Analise toda a paleta quanto à conformidade WCAG AA e AAA, identificando os pares de cores com contraste insuficiente e sugerindo correções acessíveis.
Analisador WCAG apresenta apenas os controlos e resultados ligados à sua função. As opções disponíveis dependem da ferramenta e da entrada.
Formatos suportados
Como funciona
Passo 1
Abra Analisador WCAG e prepare a entrada solicitada pela interface
Passo 2
Ajuste os controlos visíveis para o resultado pretendido
Passo 3
Verifique o resultado antes de copiar, exportar ou reutilizar
Erros comuns a evitar
- Não considere suportado um formato ou opção que não apareça na interface.
- Confira os valores antes de os reutilizar numa identidade, interface ou ficheiro final.
- Quando o resultado for usado em texto ou componentes de interface, verifique também o contraste.
Dicas de especialistas
- Guarde o valor de origem com o resultado para comparar variantes.
- Use os formatos realmente apresentados pela ferramenta em vez de estimar conversões.
- Em telemóvel e tablet, permita que textos e controlos quebrem linha.
Tratamento de dados
O tratamento depende da função usada. Consentimento, analítica e funcionalidades de conta do site são serviços separados da operação de cor.
O que esta ferramenta faz
Analise toda a paleta quanto à conformidade WCAG AA e AAA, identificando os pares de cores com contraste insuficiente e sugerindo correções acessíveis. Analisador WCAG concentra-se nesta tarefa e não pressupõe funções que não aparecem na interface. Use os controlos disponíveis para obter o resultado necessário e confirme os valores apresentados antes de os levar para outra ferramenta, folha de estilos, ficheiro de design ou documento.
Preparar uma entrada adequada
Comece pela entrada pedida por Analisador WCAG: cor, valor, imagem ou definição conforme o ecrã. Os formatos indicados nesta página são Palette, HEX, CSS Variables, JSON. Se um formato ou opção não aparecer na interface, não o considere suportado por esta função específica.
Ler e verificar o resultado
Leia o resultado no contexto da operação realizada. Compare-o com o valor de origem e reveja os controlos que influenciaram o cálculo. Para trabalho visual importante, confirme também o resultado na interface real onde será usado em vez de confiar apenas no código.
Utilização em telemóvel e tablet
Analisador WCAG usa o layout responsivo do site. Títulos, subtítulos, breadcrumbs e controlos podem quebrar linha em ecrãs estreitos para evitar cortar traduções longas. Mesmo assim, confirme o resultado final no dispositivo e no contexto onde pretende utilizá-lo.
Reutilizar o resultado no projeto
Depois de verificar o resultado, utilize apenas as ações realmente oferecidas por Analisador WCAG, como copiar ou exportar quando disponíveis. Guarde o valor de origem se precisar de reproduzir a definição e, em interfaces, documente também o papel da cor e o contraste necessário.
Ferramentas relacionadas
Guias e tutoriais
Aprenda a usar nossas ferramentas com nossos guias detalhados.
wcag-analyzer: guia prático de accessibility
Guia localizado para usar wcag-analyzer, entender boas práticas de accessibility e evitar erros comuns.
wcag-analyzer: guia prático de accessibility
Guia localizado para usar wcag-analyzer, entender boas práticas de accessibility e evitar erros comuns.
wcag-analyzer: guia prático de export
Guia localizado para usar wcag-analyzer, entender boas práticas de export e evitar erros comuns.
Perguntas frequentes
Aprenda a usar nossas ferramentas com nossos guias detalhados.