Uso de cores
O que a norma pede
A cor não é o único meio usado para transmitir informação, indicar uma ação, pedir uma resposta ou distinguir um elemento.
- 1.4.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Acompanhe cada cor de estado com texto ou ícone, como “Aprovado” ao lado do verde. Sublinhe os links no meio do texto e use rótulos nos gráficos, não só cores.
Situação dos pedidos
Uma lista mostra pedidos aprovados e recusados.
Errado: Só cor
No protótipo
Bolinha verde = aprovado; bolinha vermelha = recusado.
Quem tem daltonismo não diferencia.
Certo: Cor, ícone e texto
No protótipo
✓ Aprovado (verde) / ✗ Recusado (vermelho)
A informação não depende da cor.
Inclua o texto do estado junto da cor e mantenha o sublinhado dos links no texto corrido. Em erros, use aria-invalid e mensagem, além da borda vermelha.
Status do pedido
Implementação do selo.
Errado: Só classe de cor
<span class="status verde"></span>Nenhuma informação além da cor.
Certo: Cor e texto
<span class="status verde"><svg aria-hidden="true">…</svg> Aprovado</span>Texto e ícone carregam a informação.
Inclua nos critérios de aceite que nenhuma informação dependa só da cor e garanta que o sistema de design defina os estados com ícone e texto. Uma parcela grande do público não distingue certas cores.
Painel de indicadores
Metas atingidas em verde; não atingidas em vermelho.
Errado: Só cor
Situação
Células coloridas, sem texto.
Parte da equipe não lê o painel.
Certo: Cor e rótulo
Situação
“Atingida” e “Não atingida” escritos nas células.
Todos leem o painel.
Veja a página em tons de cinza ou com um simulador de daltonismo e confira se os estados e os gráficos continuam compreensíveis. Registre a informação que depende só da cor.
Lista de pedidos em tons de cinza
Teste com filtro.
Errado: Informação perdida
Observação
Bolinhas cinzas iguais; não se sabe o status.
Depende só de cor.
Certo: Informação preservada
Observação
“Aprovado” e “Recusado” continuam legíveis.
Atende.
Não use cor como única referência, como em “os itens em verde”, e escreva o estado por extenso. Revise as legendas dos gráficos.
Legenda do mapa de risco
O mapa mostra níveis de risco por cor.
Errado: Só cores
Legenda
“Vermelho: alto. Amarelo: médio. Verde: baixo.”
Sem outra forma de distinguir.
Certo: Cores e rótulos no mapa
Legenda
Bairros com rótulo “Alto”, “Médio”, “Baixo”, além das cores.
Legível por todos.