Contraste do texto sobre imagens

A Silktide encontra texto colocado diretamente sobre uma imagem ou gradiente, quando o contraste entre o texto e o respetivo fundo não pode ser medido automaticamente. Estes casos precisam de uma avaliação humana para confirmar que o texto é legível.

Porque é importante

Os banners principais e os fundos fotográficos são alguns dos locais mais comuns onde o contraste falha na prática. Uma fotografia tem áreas claras e escuras, por isso um texto legível sobre uma parte da imagem pode desaparecer sobre outra — e a imagem pode deslocar-se por trás do texto à medida que o tamanho do ecrã muda. As pessoas com baixa visão são as mais afetadas, mas o texto sobre uma fotografia visualmente carregada é cansativo para toda a gente.

Aplicam-se os mesmos mínimos legais que ao texto normal: exige uma de, pelo menos, 4,5:1 para texto normal e 3:1 para texto grande (pelo menos 18 pontos ou 14 pontos a negrito), medida em relação à área da imagem por trás do texto.

Como corrigir

Verifique visualmente cada elemento assinalado. O texto tem de cumprir a relação exigida em todas as partes da imagem sobre as quais pode aparecer, incluindo noutros tamanhos de ecrã em que a imagem possa mudar de posição.
Quando o contraste for duvidoso, adicione uma sobreposição sólida ou semitransparente entre a imagem e o texto, ou retire totalmente o texto da imagem.
Escolher imagens mais calmas e uniformes por trás do texto também funciona, mas lembre-se de que a imagem pode ser substituída posteriormente pelos editores de conteúdo — uma sobreposição é mais segura.
Se o texto for claramente legível, o resultado.

Como a Silktide faz a verificação

Examine todos os textos visíveis na página, ignorando texto oculto, texto dentro de gráficos SVG e quaisquer elementos que tenha excluído da verificação.
Identifique o texto cujo fundo seja uma imagem ou um gradiente, em vez de uma cor sólida. O texto sobre cores sólidas é medido automaticamente pela verificação de contraste do texto.
Ignore fundos que não possam afetar o texto, como imagens de fundo dimensionadas para zero e imagens de fundo pequenas que não cubram os itens de listas (normalmente ícones de marcadores personalizados).
Apresente o texto restante para que o confirme, mostrando a cor do texto e as camadas de fundo envolvidas. Como uma imagem não tem uma única cor, a relação não pode ser calculada automaticamente.

Resolução de problemas

A verificação assinala texto que é claramente legível

Isso é esperado — esta verificação não consegue medir o contraste das imagens, por isso opta por mostrar todos os casos. Reveja e aprove os que estiverem corretos; permanecerão aprovados em verificações futuras.

A imagem parece adequada no meu ecrã

Verifique também ecrãs mais pequenos e maiores. Os layouts responsivos deslocam o texto em relação à imagem, por isso o texto que fica sobre uma área escura no computador pode ficar sobre uma área clara no telemóvel.