5.1.1.18 - Requisitos para uso da cor
Descrição
A cor não pode ser a única forma de transmitir informação. Qualquer elemento de interface do usuário que dependa de cor para a sua compreensão deve ter uma outra forma de compreensão que não dependa apenas da cor.
Exemplo
Botões de “cancelar” e “enviar” um formulário utilizam as cores vermelha e verde, mas também possuem um rótulo acessível.
Desempenho funcional
Componentes aplicáveis
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Ao criar elementos que utilizam cores para transmitir informações (como alertas ou status), inclua também outras pistas visuais, como ícones, textos ou padrões, para garantir que usuários com daltonismo ou deficiências visuais possam entender a informação sem depender apenas da cor.
Combine a cor com texto ou ícone
Status, erros e categorias devem ser identificáveis sem enxergar a cor.
Certo: Status com ícone e texto
anotação de especificação
Pedido: ícone ✓ + "Entregue" (verde); ícone ✕ + "Cancelado" (vermelho).
Errado: Status só por cor
anotação de especificação
Pedido: bolinha verde ou bolinha vermelha, sem texto.
No código, certifique-se de que a lógica de exibição de elementos críticos, como mensagens de erro ou status, inclua textos ou ícones descritivos além das cores. Use atributos semânticos, como aria-label ou role, para fornecer informações adicionais para tecnologias assistivas.
Informação além da cor no código
O estado precisa estar no texto ou nos atributos, não só no CSS.
Certo: Erro com texto e atributo
<input id="email" aria-invalid="true" aria-describedby="erro-email"> <p id="erro-email">E-mail inválido</p>Leitor de tela anuncia: "E-mail, inválido, E-mail inválido"
Errado: Erro só com borda vermelha
<input id="email" class="borda-vermelha">Leitor de tela anuncia: "E-mail, campo de edição": o erro não existe para o leitor de tela
Aprenda a fazer com conteúdos selecionados para você
Garanta que a equipe siga boas práticas de design e desenvolvimento que incluam múltiplas formas de transmitir informação, promovendo a acessibilidade e evitando a dependência exclusiva da cor para comunicação.
Mapeie onde a cor carrega informação
Status, gráficos, links e erros costumam depender só da cor.
Checklist do requisito 5.1.1.18: tela "Pedidos"
- ícone + texto
Status do pedido
etiqueta
- mensagem escrita
Campos com erro
formulário
- pendente
Gráfico de vendas
gráfico
2 de 3 itens em conformidade, 1 pendente de revisão.
Verificar uso de cores
Ao testar elementos de interface, confirme que a cor não seja a única forma de transmitir informações.
Adicionar alternativas visuais
Sempre que uma cor estiver sendo usada para indicar um estado (por exemplo, sucesso, erro ou alerta), certifique-se de que haja um texto, ícone, padrão ou outra indicação visual que acompanhe a cor.
Simular deficiência visual
Use ferramentas que simulam diferentes tipos de daltonismo ou baixa visão para garantir que a informação transmitida pela interface ainda seja compreensível sem a distinção de cores.
Testar com leitores de tela
Certifique-se de que as informações adicionais (como mensagens de erro ou ícones explicativos) sejam interpretadas corretamente por tecnologias assistivas.
Revisar gráficos e tabelas
Em gráficos, use padrões, texturas ou rótulos para diferenciar categorias, além de cores. Tabelas e gráficos devem ter legendas ou descrições que identifiquem as informações de forma não dependente da cor.
Testar formulários e estados interativos
Verifique se botões ou links que mudam de cor ao receber foco têm outras formas de indicar seu estado, como sublinhado ou bordas visíveis.
Documentar casos específicos
Se houver casos em que a cor seja usada, anote como foi implementada a solução alternativa para garantir que todas as informações sejam acessíveis a usuários com deficiências visuais.
Veja a tela em tons de cinza
Use um simulador de daltonismo ou o modo escala de cinza e tente entender cada estado.
Certo: Informação preservada
"✓ Entregue"
"✕ Cancelado"
"⏱ Em trânsito"
Sem cor, o status continua claro.
Errado: Informação perdida
● (cinza)
● (cinza)
● (cinza)
Sem cor, todos os status ficam iguais.
Ao escrever conteúdos que se relacionam a cores, como instruções ou explicações, descreva as informações sem depender exclusivamente da cor, garantindo que os usuários possam entender o conteúdo por outros meios.
Não descreva as coisas só pela cor
Refira-se aos elementos pelo nome, não pela cor.
Certo: Referência pelo nome
texto de instrução
"Os campos obrigatórios estão marcados com asterisco (*)."
Funciona para todas as pessoas.
Errado: Referência pela cor
texto de instrução
"Os campos em vermelho são obrigatórios."
Quem não distingue vermelho fica sem a informação.
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.