Verificador de Contraste de Cores

O Verificador de Contraste de Cores ajuda designers, desenvolvedores e profissionais de acessibilidade a garantir que as combinações de cores atendam aos padrões de acessibilidade WCAG 2.x. O contraste adequado entre as cores do texto e do fundo é essencial para a legibilidade, especialmente para usuários com baixa visão ou deficiências na percepção das cores.

O que é Taxa de Contraste de Cores?

A taxa de contraste de cores mede a diferença na luminância percebida (brilho) entre duas cores. Ela varia de 1:1 (cores idênticas, sem contraste) a 21:1 (contraste máximo: preto no branco). A taxa é calculada usando a fórmula WCAG 2.x baseada nos valores de luminância relativa de ambas as cores.

Requisitos de Contraste WCAG

As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem dois níveis de conformidade para o contraste de cores:

O que conta como "texto grande"?

O WCAG define texto grande como tendo pelo menos 18 pontos (24px) com peso normal, ou pelo menos 14 pontos (18.66px) com peso negrito. O texto grande tem requisitos de contraste menores porque caracteres maiores são naturalmente mais fáceis de ler.

Como Usar Esta Ferramenta

1. Insira suas cores: Escolha as cores de primeiro plano (texto) e de fundo usando os seletores de cores, digite códigos hexadecimais ou clique em um exemplo predefinido.
2. Verifique a pré-visualização ao vivo: Veja instantaneamente como suas cores ficam em elementos reais da interface (títulos, corpo de texto, botões, links, entradas de formulário).
3. Clique em "Verificar Contraste": Obtenha a taxa de contraste exata e o status de conformidade WCAG para texto normal, texto grande e componentes de interface.
4. Aplique sugestões: Se suas cores falharem, use as sugestões automáticas para encontrar a alternativa acessível mais próxima.

Entendendo os Resultados

Taxa de Contraste

O número principal (ex: 8.59:1) informa o quão diferentes as duas cores parecem. Quanto maior, melhor para a legibilidade. Uma taxa de pelo menos 4.5:1 garante que a maioria dos usuários possa ler confortavelmente textos de tamanho normal.

Classificação Geral

• AAA (Excelente): Passa em todos os critérios WCAG, incluindo o nível aprimorado (7:1+). Melhor acessibilidade possível.
• AA (Bom): Passa nos requisitos padrão (4.5:1+). Atende aos requisitos legais na maioria das jurisdições.
• AA Grande (Parcial): Passa apenas para texto grande ou componentes de interface (3:1+). O texto normal falha.
• Falha (Ruim): Não atende a nenhum critério de contraste WCAG. O texto será difícil de ler para muitos usuários.

Sugestões de Cores

Quando suas cores não atendem aos requisitos de contraste, a ferramenta sugere a cor acessível mais próxima ajustando a luminosidade e preservando o matiz e a saturação. Você pode aplicar as sugestões com um único clique.

Por que o Contraste de Cores é Importante

• Conformidade legal: Muitos países exigem a conformidade WCAG AA por lei (ADA, Section 508, EN 301 549, EAA).
• Experiência do usuário: Um bom contraste melhora a legibilidade para todos os usuários, não apenas para aqueles com deficiências.
• Impacto no SEO: Páginas acessíveis tendem a ser mais fáceis de usar, o que favorece o engajamento.
• Alcance de audiência: Aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres têm deficiência de visão cromática.

Dicas para Escolher Cores Acessíveis

• Comece com contraste suficiente e depois refine o design — é mais difícil corrigir o contraste retroativamente.
• Evite colocar texto colorido sobre fundos coloridos sem testar. Mesmo cores que "parecem diferentes" podem falhar nas verificações de contraste.
• Texto cinza claro em fundos brancos é uma das falhas de acessibilidade mais comuns.
• Use esta ferramenta durante o design, não apenas durante a auditoria — identificar problemas cedo economiza um retrabalho significativo.
• Não dependa apenas da cor para transmitir informações; use formas, padrões ou etiquetas também.

Perguntas Frequentes

O que é taxa de contraste de cores?

A taxa de contraste de cores mede a diferença na luminância percebida entre duas cores. Ela varia de 1:1 (sem contraste, mesma cor) a 21:1 (contraste máximo, preto no branco). A taxa é calculada usando a fórmula WCAG 2.x: (L1 + 0,05) / (L2 + 0,05), onde L1 é a luminância relativa da cor mais clara e L2 é a da cor mais escura.

Qual taxa de contraste é necessária para a conformidade WCAG AA?

O WCAG AA exige uma taxa de contraste mínima de 4.5:1 para texto normal (abaixo de 18pt ou 14pt negrito) e 3:1 para texto grande (18pt+ ou 14pt+ negrito). Para componentes de interface não textuais e objetos gráficos, o mínimo é 3:1.

Qual é a diferença entre WCAG AA e AAA?

WCAG AA é o nível de conformidade padrão que exige 4.5:1 para texto normal e 3:1 para texto grande. WCAG AAA é o nível aprimorado que exige 7:1 para texto normal e 4.5:1 para texto grande. O AA é exigido pela maioria das leis de acessibilidade, enquanto o AAA é recomendado, mas normalmente não obrigatório para sites inteiros.

O que é considerado texto grande nas diretrizes WCAG?

Nas diretrizes WCAG, o texto grande é definido como um texto que tem pelo menos 18 pontos (24px) com peso normal, ou pelo menos 14 pontos (aproximadamente 18,66px) com peso negrito. O texto grande tem requisitos de contraste menores porque caracteres maiores são mais fáceis de ler.

Como corrijo o baixo contraste de cores?

Para corrigir o baixo contraste: (1) Escureça a cor do texto ou clareie o fundo, ou vice-versa. (2) Use nosso recurso de sugestão de cores que encontra automaticamente a cor mais próxima que seja aprovada. (3) Aumente o tamanho da fonte para se qualificar como "texto grande", que tem requisitos menores. (4) Evite usar apenas a cor para transmitir informações.

O contraste de cores se aplica apenas ao texto?

Não. O Critério de Sucesso WCAG 2.1 1.4.11 exige uma taxa de contraste mínima de 3:1 para elementos não textuais, incluindo bordas de campos de formulário, ícones e objetos gráficos essenciais para a compreensão do conteúdo. Isso se aplica a componentes de interface como botões, campos de formulário e indicadores de foco.

Recursos Adicionais

• WCAG 2.1: Entendendo o Contraste (Mínimo)
• WCAG 2.1: Entendendo o Contraste (Aprimorado)