A cor é apenas uma das muitas ferramentas visuais que podem ser usadas para transmitir informações e orientar os leitores em um documento. As Diretrizes de Acessibilidade de Conteúdo da Web definem um documento ou página da Web acessível em parte pelo uso de cores.
Como a cor afeta a acessibilidade do documento?
Os leitores que são daltônicos , deficientes visuais ou usam ferramentas de acessibilidade como leitores de tela exigem mais do que dicas de cores para entender o conteúdo. Os leitores de tela não indicam a cor , portanto, se a cor for a única indicação usada para indicar o significado, um leitor de tela não a perceberá.
Por exemplo, pegue esta lista:
O primeiro e último itens, “Título do documento” e “Imagens de texto” aparecem em fonte vermelha, diferente dos outros três itens, que estão em fonte azul. Os itens em vermelho indicam que esses elementos estão ausentes, mas um leitor de tela não descreveria a cor para um leitor, deixando de fora informações importantes.
Certas cores - por exemplo, vermelho e verde - são comumente usadas para denotar informações, como "vermelho" para "errado" ou "verde" para "bom".
Mas depender apenas da cor para transmitir o significado de algo exclui os leitores que não conseguem ver as cores.
Como uso outros elementos além da cor para transmitir significado?
Use elementos adicionais , acessíveis a leitores de tela e outros leitores com deficiência visual, para descrever e esclarecer dados ou conteúdo que você está apresentando em seu design.
Vamos pegar a lista acima. Para torná-lo mais acessível, os itens vermelhos agora aparecem com o qualificador "ausente" ao lado deles, e os itens azuis aparecem ao lado de "confirmado", esclarecendo para leitores com deficiência ou ferramentas de acessibilidade como leitores de tela o que as cores significam.
Aqui está um exemplo de design com baixa acessibilidade em uma tabela de "faça e não faça" para criar conteúdo acessível:
Esta lista de seis pontos é apresentada usando cores e ícones para esclarecer quais dos itens estão corretos (bom para "fazer") e quais dos itens estão incorretos ("não faça").
Os três primeiros pontos:
-
Usar texto alternativo (alt)
-
Cabeçalhos e títulos da seção de tags
-
Use rações de contraste de cores para visibilidade
aparecem em um fundo verde, ao lado de um ícone de uma marca de seleção branca em um círculo verde. Visualmente, um leitor normal pode entender que esses itens estão corretos e representam os "Dos" na lista. Mas um observador daltônico pode não perceber claramente o verde , tornando o visual um tanto confuso.
Um leitor de tela seria capaz de ler o texto nesses pontos, mas perderia o fundo verde claro.
O texto alternativo poderia descrever a marca de seleção branca em um círculo verde, mas não transmitiria claramente a posição do ícone em relação aos itens da lista.
Da mesma forma, um leitor de tela seria capaz de ler os próximos três pontos da lista:
-
Confie apenas na cor para indicar o significado
-
Descreva elementos decorativos com texto alternativo
-
Use imagens de texto para texto relacionado ao conteúdo
mas sem ser capaz de ver o fundo vermelho claro, ou entender onde o ícone do 'x' branco em um círculo vermelho aparece ao lado dele, o significado desses pontos "Não" se perde.
Vamos tentar novamente, com as mesmas informações, em um formato mais acessível :
Com os cabeçalhos das colunas devidamente marcados , taxas de contraste de cores acessíveis e um tamanho de fonte maior, as informações nesta tabela tornam-se mais acessíveis para leitores com deficiência visual, bem como leitores de tela. Com cada coluna indicando o contexto dos pontos listados, um leitor de tela pode ler qual é um "Faça" e qual é um "Não".
Os ícones de marca de seleção e 'x' tornam-se decorativos e não precisam ser descritos por texto alternativo para que os leitores entendam o significado das informações na tabela. Da mesma forma, o código de cores (vermelho para "não faça" e verde para "faça") não é crucial para entender; o título no topo de cada coluna respectiva fornece essa informação.
Como faço para tornar os gráficos codificados por cores mais acessíveis?
Use textura , diferenças no estilo de linha , texto em gráficos (rotulagem direta) ou diferentes tonalidades de cor para melhorar a acessibilidade do gráfico para usuários daltônicos. Os gráficos devem ser legíveis em preto e branco.
Use espaço (branco) entre as colunas do gráfico e os dados para facilitar a compreensão.
Pegue os dois gráficos abaixo, mostrando os mesmos dados relacionados às preferências dos entrevistados da pesquisa por diferentes tipos de frutas:
No primeiro gráfico (foto acima), o título "Preferências de frutas" indica o tópico. As colunas são agrupadas por tipo de fruta e cada grupo de barras é rotulado: maçã, laranja, morango e melancia.
As cores da barra representam as preferências: azul para "curtir", laranja para "neutro" e verde para "não gostar", clarificado pela legenda na parte inferior do eixo X do gráfico.
O número de entrevistados em cada categoria de preferência e tipo de fruta é indicado pela altura de cada barra, com números em intervalos de 5 visíveis ao longo do eixo Y.
No segundo gráfico (foto abaixo), a composição das colunas e seu agrupamento por tipo de fruta (rotulado no eixo X), bem como os incrementos de dados no eixo Y, são os mesmos do primeiro gráfico.
A cor de cada barra é a mesma do gráfico acima, mas as barras também são diferenciadas por padrões únicos:
-
Padrão azul e diamante para "curtir"
-
Padrão de listras laranja e diagonais para "neutro"
-
Verde e padrão de treliça para "não gostar"
No segundo gráfico, os rótulos acima de cada barra também tornam os dados mais claros e fáceis de ler.
Nesta comparação lado a lado dos gráficos (foto abaixo), as cores foram convertidas em tons de cinza para simular como alguém com deficiência visual pode ler os gráficos.
É mais fácil distinguir entre as três colunas de cada agrupamento no gráfico com as barras que possuem um padrão.
O mesmo vale para os gráficos de linhas na comparação lado a lado abaixo:
No " Gráfico de linhas inacessíveis ", as cores que representam cada sistema operacional (vermelho para "Windows", verde para "Linux" e azul para "Macintosh") são difíceis de distinguir visualmente, especialmente para alguém com daltonismo.
No " Gráfico de Linhas Acessíveis ", cada linha recebe um padrão diferente, bem como uma cor (azul escuro e traços longos para "Windows", verde escuro e sólido para "Linux", vermelho e pequenos traços para "Macintosh") para fazer são mais fáceis de distinguir. Cada linha também é rotulada, tornando mais fácil para os visualizadores identificar as linhas sem precisar consultar a legenda.
Adicione um padrão a qualquer gráfico em seu design acessível para tornar mais fácil para os leitores diferenciar entre diferentes conjuntos de dados.