Como verificar o contraste entre a cor do texto e o fundo

Para que serve a verificação de contraste

O Contrast Checker ajuda a comparar a cor do primeiro plano, como a cor de um texto, com a cor do fundo. O resultado mostra um rácio de contraste arredondado a duas casas decimais e avaliações baseadas em limiares para texto normal e texto grande. É útil quando está a ajustar uma combinação de cores e quer perceber como essa combinação se posiciona perante esses limiares, sem confundir o resultado com uma avaliação integral de acessibilidade do design.

Como verificar o contraste entre duas cores

1. Escolha as duas cores. Defina uma cor de primeiro plano e uma cor de fundo. Pode usar texto hexadecimal de três ou seis algarismos iniciado por #, como #333 ou #333333, ou texto semelhante a RGB iniciado por rgb e com três componentes numéricos decimais separados por vírgulas.

2. Introduza os valores nos campos correspondentes. Os espaços em branco no início e no fim são removidos e as letras são tratadas em minúsculas durante a leitura. Se não preencher os campos, a ferramenta usa preto (#000000) para o primeiro plano e branco (#ffffff) para o fundo.

3. Execute a verificação. Confirme que cada valor representa uma das formas aceites. Se uma das cores não puder ser lida, o resultado inclui uma indicação de erro e não apresenta as avaliações normais de contraste.

4. Leia o rácio e as avaliações. Para cores válidas, o rácio é arredondado a duas casas decimais antes de ser comparado com os limiares. A ferramenta apresenta avaliações para texto normal nos limiares 4,5 e 7,0, e para texto grande nos limiares 3,0 e 4,5.

Como interpretar o resultado

O rácio indica a diferença de contraste entre as duas cores introduzidas. As avaliações mostram se o resultado atinge cada um dos quatro limiares: 4,5 e 7,0 para texto normal, e 3,0 e 4,5 para texto grande. Assim, uma mesma combinação pode atingir um limiar para texto grande e não atingir um limiar mais elevado para texto normal.

Use estas indicações para orientar ajustes de cor e volte a verificar a nova combinação. Se o primeiro plano e o fundo forem iguais, o rácio apresentado é 1,0. Uma avaliação positiva nestes limiares não representa, por si só, uma análise completa da acessibilidade do projeto, que pode depender de outros elementos visuais e de contexto.

Exemplo prático

Está a testar se um texto cinzento sobre um fundo branco deve ser ajustado antes de ser usado numa página.

Introduza #767676 como cor de primeiro plano e #ffffff como cor de fundo e execute a verificação.

O resultado apresenta um rácio arredondado a duas casas decimais e avaliações separadas para os limiares de texto normal e de texto grande.

Limitações

• A entrada não cobre nomes de cores, sintaxe CSS arbitrária ou formas hexadecimais além das opções de três e seis algarismos. Os componentes RGB são lidos como inteiros decimais sem uma verificação explícita de intervalo; valores que não possam ser interpretados produzem uma indicação de erro em vez das avaliações normais.

Erros comuns

• Um erro frequente é introduzir uma cor com sintaxe CSS não suportada, como um nome de cor ou uma forma hexadecimal diferente das opções aceites. Corrija o valor para hexadecimal de três ou seis algarismos iniciado por #, ou para RGB iniciado por rgb com três componentes separados por vírgulas.

Perguntas frequentes

Que limiares de contraste são apresentados?

Se as cores forem válidas, o rácio é arredondado a duas casas decimais antes das avaliações. São analisados os limiares 4,5 e 7,0 para texto normal, e 3,0 e 4,5 para texto grande.

O que acontece quando introduzo uma cor inválida?

Se um dos valores não puder ser interpretado, o resultado inclui uma indicação de erro e não apresenta as avaliações normais. Use hexadecimal de três ou seis algarismos iniciado por #, ou RGB iniciado por rgb com três números separados por vírgulas.

Posso verificar o contraste sem preencher as cores?

Se deixar os campos vazios, é usado preto (#000000) no primeiro plano e branco (#ffffff) no fundo. Também pode introduzir as duas cores para comparar outra combinação.