Criar activos acessíveis: Cor e contraste
A cor e o contraste desempenham um papel fundamental na forma como os utilizadores percepcionam e interagem com o seu conteúdo. Para cumprir as normas de acessibilidade, é importante garantir um contraste suficiente entre o texto e o fundo, evitar confiar apenas na cor para transmitir significado e escolher paletas que suportem a legibilidade para todos os utilizadores. Este artigo orienta-te através das melhores práticas de utilização da cor e do contraste para criar experiências Web inclusivas e acessíveis.
Para garantir que o teu sítio Web, página de destino, formulário ou mensagem cumpre os requisitos de acessibilidade, utiliza a lista de verificação disponível aqui.
Requisitos
- O texto pequeno (menos de 18pt de tipo de letra normal (24 pixels CSS) ou 14pt de tipo de letra a negrito (19 pixels CSS)) deve ter uma relação de contraste de, pelo menos, 4,5:1 com o fundo.
- O texto grande (igual ou superior a 18pt ou 14pt a negrito) deve ter uma relação de contraste de, pelo menos, 3:1 com o fundo.
- A regra do contraste também se aplica a imagens de texto, embora seja preferível evitar a utilização de imagens para texto.
- O contraste dos controlos da IU e dos elementos que não são texto (como o botão de alternância, a caixa de verificação, etc.) com o fundo deve ser de 3:1.
- O contraste de todos os indicadores visuais de foco (por exemplo, passa o rato sobre um botão) em relação ao fundo deve ser de 3:1.
- Os objectos gráficos, como um ícone autónomo, um gráfico ou uma imagem, têm um contraste mínimo de 3:1 entre o item e o respetivo fundo.
- Qualquer informação apresentada a cores necessita de uma alternativa de texto que um programa possa compreender.
- Fornece sempre uma alternativa visível, como um texto ou uma imagem, para qualquer informação transmitida por cor.
A melhor forma de verificar se a apresentação é independente da cor é através de um teste de escala de cinzentos. Isto permitir-te-á verificar se todos os elementos importantes do ponto de vista do utilizador são visíveis e se necessitam de ajustes.
Exemplos
 | FAZ: Um contorno mais escuro marca o passo atual do utilizador no fluxo. Observando a escala de cinzentos desta vista, esta solução permitiria a uma pessoa daltónica obter informações sobre o ponto em que se encontra no processo. |
  | FAZ: Os dados do gráfico podem ser distinguidos uns dos outros através da adição de formas às linhas. Se olhares para a escala de cinzentos desta vista, esta solução permitiria a uma pessoa daltónica obter informações sobre os dados. |
  | FAZ: O texto deve ser colocado num fundo com um rácio de contraste de 4,5:1. NÃO FAZ: Não utilizes uma cor de fundo para o texto abaixo de uma relação 4,5:1. |