Práticas Web acessíveis Contraste
Uma relação de contraste adequada entre o texto e o plano de fundo é fundamental para que todos possam visualizar as informações de forma clara e sem grandes esforços. Além disso, um bom contraste é essencial para pessoas com baixa visão, com daltonismo e usuários que utilizam monitores monocromáticos.
Além de escolher cores que tenham uma boa relação de contraste, é preciso tomar cuidado com imagens utilizadas de plano de fundo. Um fundo decorado ou em forma de figura, como uma paisagem, por exemplo, torna o conteúdo da página de difícil visualização, além de desviar a atenção do usuário. Se possível, evite utilizar imagens como plano de fundo ou planos de fundo decorados, enfeitados, com listras, círculos, bordas, marca d’água, entre outros.
A relação de contraste pode ser encontrada dividindo-se o valor da luminosidade relativa da cor mais clara de um dos planos pelo valor da luminosidade relativa da cor mais escura do outro plano. Levando-se em consideração a perda de percepção do contraste resultante da baixa acuidade visual, cromodeficiência ou perda de sensibilidade ao contraste devido ao envelhecimento, é recomendada aqui uma relação de contraste, de, no mínimo, 4,5:1.
Apenas olhando para uma página, já podemos ter uma ideia se ela apresenta um bom contraste ou não. No entanto, para garantirmos um contraste otimizado, podemos utilizar ferramentas gratuitas, disponíveis online para analisar a relação de contraste, como, por exemplo:
- Luminosity Colour Contrast Ratio Analyser (link para um novo site)
- Color Contrast Analyser (link para um novo site)
- Check my colours (link para um novo site)
No "Check my colours" você fornece o endereço de uma página da Web, clica em "check" e ele lhe mostrará uma lista contendo o resultado das taxas de contraste entre o plano de fundo e o primeiro plano dos diversos elementos da página, conforme podemos ver nas figuras a seguir.
No exemplo a seguir, utilizamos o serviço online "Luminosity Colour Contrast Ratio Analyser", especificamos os valores (em notação hexadecimal) das cores de fundo (Background Colour) e da fonte (Foreground Colour) e calculamos a relação de contrate (Calculate Luminosity Contrast Ratio). Após clicarmos no botão, é mostrado um exemplo de como ficaria visualmente este contraste utilizando-se a fonte em tamanho grande e a fonte em tamanho normal, além da relação de contraste (contrast ratio), que, nesse caso, foi de 7,74:1, ou seja, bem acima do recomendado 4,5:1, o que indica que estas duas cores apresentam um excelente contraste entre si.
A importância do contraste para usuários com Daltonismo
A deficiência de cor vermelho/verde é o tipo mais comum de Daltonismo. Por isso, deve-se evitar a utilização de contrastes entre essas duas cores.
Utilizando combinação de cores verde/vermelho: com a deficiência de cor não é possível perceber o contraste entre as cores.
Utilizando combinação de cores verde/lilás: mesmo com a deficiência de cor, ainda é possível perceber o contraste.
Fonte: JENNY, B; KELSO, N.V. Color Design for the Color Vision Impaired
