Verificador e simulador de contraste WCAG

Como usar o verificador de contraste

1. Definir cores de primeiro plano e fundo
   Insira a cor do texto (primeiro plano) e a cor de fundo usando os seletores de cor ou digitando valores HEX, RGB ou HSL. A relação de contraste é atualizada instantaneamente.
2. Leia o resultado da sua WCAG
   A ferramenta mostra a relação de contraste (por exemplo, 5,2:1) e se ela é compatível com WCAG AA (4,5:1 para texto normal) e AAA (7:1). Textos grandes (18 pt+) têm limites mais baixos.
3. Simular daltonismo
   Mude para o separador Simulador para visualizar como a sua combinação de cores aparece para utilizadores com deuteranopia, protanopia, tritanopia ou outros tipos de visão.
4. Use a correção automática, se necessário
   Se as suas cores falharem, clique em Auto-Corrigir. A ferramenta calcula o tom mais próximo compatível com AA ou AAA, preservando o máximo possível a sua tonalidade e saturação.

Casos de uso comuns

Como funciona

Todos os cálculos são executados no seu navegador usando a fórmula de luminância WCAG 2.1 — sem necessidade de contato com o servidor.

Luminância relativa

A WCAG define a luminância como uma soma ponderada dos canais RGB linearizados: L = 0,2126R + 0,7152G + 0,0722B. A relação de contraste é então (L1 + 0,05) / (L2 + 0,05), onde L1 é a cor mais clara.

Simulação de daltonismo

O simulador aplica matrizes de daltonização padrão (Machado et al., 2009) para transformar os valores sRGB conforme percebidos por cada tipo de deficiência na visão das cores.

Algoritmo de correção automática

A correção automática itera sobre o canal de luminosidade no espaço HSL, encontrando o ajuste mínimo que atinge a proporção alvo (AA ou AAA) enquanto mantém o matiz e a saturação inalterados.

Dicas para um design mais acessível

• Tenha sempre como meta o WCAG AA (4,5:1) como referência e procure atingir o AAA (7:1) para o corpo do texto — especialmente em sites de saúde, governamentais e financeiros.
• Execute a simulação de daltonismo para todos os 8 tipos, não apenas para a deuteranopia. Cada tipo afeta diferentes pares de cores de maneira diferente.
• Nunca confie apenas na cor para transmitir informações — sempre combine sinais de cor com ícones, padrões ou rótulos de texto.
• Use HSL para ajustar o contraste: aumente a diferença de luminosidade entre o primeiro plano e o fundo, em vez de alterar a tonalidade.
• Teste num dispositivo móvel físico sob luz solar intensa — as condições reais revelam problemas de contraste que os monitores ocultam.

Por que o contraste de acessibilidade é importante

• Aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres têm algum tipo de deficiência na visão das cores — o contraste fraco exclui diretamente esses utilizadores.
• A ADA (EUA) e a Lei Europeia de Acessibilidade (UE 2025) exigem a conformidade com a WCAG 2.1 AA para produtos digitais voltados ao público.
• O contraste insuficiente é uma das três falhas mais comuns das WCAG encontradas em auditorias de acessibilidade a nível global (relatório WebAIM Million).
• O design de cores acessível melhora a legibilidade para todos os utilizadores — sob luz solar intensa, em ecrãs de baixa qualidade e à medida que os utilizadores envelhecem.

Nota educativa: WCAG e visão cromática

Sabia que?

Crie produtos que todos possam usar

O contraste de cores acessível não é apenas uma questão de conformidade — é uma qualidade fundamental do design que beneficia todos os utilizadores. Esta ferramenta gratuita oferece verificação WCAG em tempo real, simulação de daltonismo e correção automática inteligente num só lugar, sem que os dados saiam do seu navegador. Teste a sua paleta agora, corrija o que não funciona e entregue um produto que funcione para todos.

Ferramentas gratuitas relacionadas