A cor é apenas uma das muitas ferramentas visuais que podem ser usadas para transmitir informações e guiar os leitores através de um documento. De acordo com as Diretrizes de Acessibilidade para Conteúdo Web (WCAG), um documento ou página web acessível deve garantir que a informação não seja comunicada apenas por meio da cor.
Como a cor afeta a acessibilidade de um documento?
Leitores que são daltônicos, têm deficiência visual ou usam ferramentas de acessibilidade, como leitores de tela, precisam de mais do que sinais de cor para compreender o conteúdo. Leitores de tela não descrevem cores, então se a cor for a única indicação de significado, esses usuários não perceberão a informação.
Exemplo:
Uma lista com marcadores em um fundo azul claro com cinco itens:
Título do documento
Proporções de contraste de cores
Idioma do documento
Texto alternativo (Alt text)
Imagens com texto
Os primeiros e últimos itens (“Título do documento” e “Imagens com texto”) aparecem em vermelho, enquanto os demais aparecem em azul. O texto vermelho indica elementos ausentes, mas um leitor de tela não anunciará a cor, então esse significado seria perdido para quem depende da tecnologia.
Algumas cores — como vermelho e verde — costumam indicar significado (“vermelho” = “incorreto”, “verde” = “correto”), mas confiar apenas na cor exclui usuários que não conseguem distinguir essas cores.
Como usar elementos além da cor para transmitir significado?
Para tornar seu conteúdo acessível, utilize outros elementos visuais e de texto que leitores de tela e usuários com deficiência visual possam compreender.
A mesma lista acima pode ser apresentada com indicadores de texto:
Título do documento (ausente)
Proporções de contraste de cores (confirmadas)
Idioma do documento (confirmado)
Texto alternativo (confirmado)
Imagens com texto (ausente)
Agora a informação sobre o que está “ausente” ou “confirmado” fica clara mesmo sem cor.
Exemplo: Lista “Faça e Não Faça” acessível
Seis pontos relacionados a boas práticas de acessibilidade:
Faça (fundo verde):
Marcar títulos e seções
Usar proporções de contraste de cores para visibilidade
Não Faça (fundo vermelho):
Confiar apenas na cor para indicar significado
Descrever elementos decorativos com texto alternativo
Usar imagens de texto para conteúdo importante
Embora esse design faça sentido visualmente, não é acessível para todos. Um leitor daltônico pode não distinguir vermelho de verde, e um leitor de tela não descreverá as cores nem seu significado.
O texto alternativo poderia descrever os ícones (check e X), mas não explicaria claramente quais pontos são corretos ou incorretos sem contexto adicional.
Versão acessível melhorada
Para tornar a mesma lista acessível, reorganize em uma tabela com cabeçalhos claros e indicadores de texto:
Com este formato:
Os cabeçalhos das colunas (“Faça” e “Não Faça”) são lidos por leitores de tela.
O contraste de cores e o tamanho da fonte podem ser ajustados para melhor visibilidade.
Os ícones de check e X tornam-se decorativos e não essenciais para o significado.
Mesmo que as cores sejam removidas, a estrutura comunica a informação claramente.
Como tornar gráficos com cores mais acessíveis
Gráficos são uma área comum em que a acessibilidade é negligenciada. Quando gráficos dependem apenas da cor para diferenciar dados, tornam-se ilegíveis para usuários daltônicos.
Melhorias possíveis:
Usar padrões, texturas ou estilos de linha, além da cor.
Adicionar etiquetas diretas em cada ponto de dado ou seção.
Garantir que os gráficos sejam legíveis em escala de cinza.
Usar espaços em branco entre colunas para maior clareza.
Exemplo 1: Gráfico de barras com código de cores
Versão não acessível:
Gráfico de barras “Preferência de Frutas” com quatro grupos: Maçãs, Laranjas, Morangos, Melancias.
-
Cada grupo tem três barras:
Azul = “Gosta”
Laranja = “Neutro”
Verde = “Não gosta”
A legenda depende apenas da cor, então daltônicos ou deficientes visuais não conseguem diferenciar as barras.
Versão acessível:
-
Cada barra inclui padrões além da cor:
Azul com padrão de losangos = “Gosta”
Laranja com listras diagonais = “Neutro”
Verde com padrão de grade = “Não gosta”
-
Cada barra tem etiqueta direta mostrando categoria e número de respostas:
Maçãs – 25 Gosta
Laranjas – 25 Gosta
Morangos – 23 Gosta
Melancias – 15 Gosta
Assim, o gráfico é legível mesmo em preto e branco.
Exemplo 2: Comparação em escala de cinza
Em uma comparação lado a lado, ambos os gráficos são convertidos para escala de cinza.
No gráfico que exibe apenas cores, as barras se misturam.
-
O gráfico com padrões mantém as barras claramente diferenciadas.
Mostra que a versão acessível comunica a informação mesmo sem cor.
Exemplo 3: Gráfico de linhas acessível
Versão não acessível:
-
Gráfico “Sistema Operacional Preferido”, 1990–2003, com três linhas:
Vermelho = Windows
Verde = Linux
Azul = Macintosh
Difícil de distinguir para daltônicos.
Versão acessível:
-
Mesma informação com:
Azul escuro com traços longos = Windows
Verde escuro com linha sólida = Linux
Vermelho com traços curtos = Macintosh
Cada linha tem etiqueta direta com nome e porcentagem, legível sem precisar da legenda de cores.
Boas práticas para uso acessível da cor
✅ Usar a cor junto com outro indicador (texto, padrão, ícone).
✅ Etiquetar ou descrever gráficos diretamente.
✅ Conferir proporções de contraste de cor para legibilidade.
✅ Testar o design em escala de cinza.
✅ Evitar depender apenas de vermelho e verde para transmitir significado.
✅ Garantir que leitores de tela transmitam a mesma informação via texto.
Resumo
A cor adiciona vitalidade e clareza aos designs, mas quando usada sozinha, pode excluir inadvertidamente usuários com deficiência visual. Combinar cor com texto, etiquetas e formatação acessível garante que todos possam perceber e compreender o conteúdo.
Ao aplicar esses princípios de acessibilidade, você criará designs visualmente atraentes e inclusivos.
Curious about upgrading? Compare our plan features side by side.