Verifique o contraste de cores e a legibilidade segundo WCAG

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.

As WCAG 2.1 definem dois níveis de conformidade para o contraste de cores:

• AA (recomendado) – o nível mínimo para a maioria dos sites. Garante legibilidade suficiente.
• AAA (ótimo) – o nível mais elevado. Recomendado para sites destinados a pessoas com deficiência visual.
• Texto grande – texto de pelo menos 18 pt, cerca de 24 px (ou 14 pt a negrito, cerca de 18,5 px). Os limiares são mais baixos porque as letras grandes são naturalmente mais legíveis.

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 – por exemplo, títulos grandes.
• Í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 nível a que se referem muitas políticas de acessibilidade de instituições públicas, por isso é um bom ponto de partida. 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 tem 3, 4, 6 ou 8 caracteres, com ou sem # (por ex. #fff ou 1B2632). Os valores RGB e HSL escrevem-se dentro de rgb() ou hsl(), separados por vírgulas ou espaços. Os nomes de cores CSS, como navy, também funcionam.

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: o daltonismo vermelho-verde afeta até 8 % dos homens e 0,5 % das mulheres de ascendência norte-europeia. As pessoas daltónicas podem ter dificuldade em distinguir certos pares de cores, mesmo que o contraste de luminosidade seja suficiente.

Tipos de daltonismo:

• Deuteranopia – dificuldade em distinguir o verde do vermelho
• 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.