Verificador de contraste de cores

Um contraste insuficiente entre o texto e o fundo torna o conteúdo difícil de ler – em especial para pessoas com deficiência visual, utilizadores idosos ou aqueles que consultam o seu site num ecrã ao sol. As diretrizes WCAG 2.1 definem limiares mínimos de contraste para garantir a acessibilidade.

Esta ferramenta calcula o rácio de contraste entre duas cores, avalia a conformidade WCAG (AA e AAA) para texto normal, texto grande e ícones, e propõe uma função de ajuste automático para encontrar cores conformes.

A ferramenta apresenta o rácio de contraste numa escala de 1:1 (nenhum contraste) a 21:1 (contraste máximo – preto sobre branco). O resultado é comparado com os limiares definidos na norma WCAG:

• Texto normal – necessita de pelo menos 4,5:1 para o nível AA (padrão mínimo) ou 7:1 para o nível AAA (padrão melhorado). Aplica-se a texto inferior a 18pt (24px) ou inferior a 14pt (18,5px) a negrito.
• Texto grande / negrito – necessita de pelo menos 3:1 para o nível AA ou 4,5:1 para o nível AAA. Aplica-se a texto a partir de 18pt (24px) ou a partir de 14pt (18,5px) a negrito – títulos, botões, destaques.
• Ícones e elementos de interface – necessitam de pelo menos 3:1 para o nível AA. Aplica-se a ícones, botões, campos de formulário e outros elementos de interface que transmitem informação.

O nível AA é o mínimo exigido pelas regulamentações de acessibilidade digital em muitos países, incluindo a diretiva europeia sobre acessibilidade dos sites web. O nível AAA oferece melhor legibilidade, mas nem sempre é realizável para todos os elementos.

Se o contraste for demasiado fraco, a função Ajustar encontra automaticamente uma variante de cor de texto conforme ao limiar de contraste selecionado.

Como funciona o ajuste:

1. Selecione o objetivo de ajuste na lista, por ex. AA para texto normal ou AAA para texto grande.
2. Clique no botão Ajustar.
3. A ferramenta pesquisa entre as variantes de luminosidade da cor do texto e sugere a mais próxima conforme às exigências.
4. A cor sugerida pode ser copiada para a área de transferência ou definida imediatamente como nova cor de texto.

O algoritmo preserva a tonalidade e a saturação da cor original, alterando apenas a luminosidade. A cor sugerida mantém-se coerente com a identidade visual, respeitando a norma de acessibilidade.

Mensagem de erro de formato de cor

Verifique o formato da cor. Um código HEX deve começar por # e conter 3 ou 6 caracteres (por ex. #fff ou #ffffff). Para o formato RGB, verifique se os valores estão separados por vírgulas e compreendidos entre 0 e 255.

A função Ajustar não encontra uma cor adequada

Quando o fundo e o texto têm luminosidade semelhante na mesma tonalidade, o algoritmo pode não encontrar uma variante conforme às exigências sem alterar a tonalidade. Neste caso, considere modificar a cor de fundo ou escolher uma cor de texto completamente diferente.

A cor no seletor não corresponde ao código introduzido

O seletor de cores do navegador suporta apenas o formato HEX sem transparência. Se introduzir uma cor no formato RGBA ou HSLA com transparência, o seletor mostrará apenas a parte colorida (sem alfa). Os cálculos de contraste continuam a ter em conta a transparência.

O daltonismo é uma perturbação da perceção das cores que afeta cerca de 8 % dos homens e 0,5 % das mulheres. As pessoas daltónicas podem ter dificuldade em distinguir certos pares de cores, mesmo que o contraste de luminosidade seja suficiente.

Tipos mais comuns de daltonismo:

• Deuteranopia – dificuldade em distinguir o verde do vermelho (forma mais comum)
• Protanopia – dificuldade em percecionar o vermelho
• Tritanopia – dificuldade em percecionar o azul e o amarelo (rara)

Esta ferramenta verifica o contraste de luminosidade, que é importante para todos os utilizadores. No entanto, ao conceber, convém evitar combinações de cores problemáticas (por ex. texto vermelho sobre fundo verde) e não depender apenas da cor para transmitir informação – utilize também formas, ícones e texto.