Nunca dependa apenas da cor

Para muitos usuários, o vermelho e o verde escolhidos parecem quase iguais. Usar apenas a cor para transmitir significado faz com que essas pessoas tenham de adivinhar.

Aproximadamente 1 em cada 12 homens apresenta alguma forma de daltonismo. Isso representa uma grande parcela do seu público, não um caso raro.

O erro clássico é usar um erro vermelho e um sucesso verde que parecem idênticos para muitos usuários. A confusão entre vermelho e verde é, de longe, o tipo mais comum.

O critério 1.4.1 da WCAG diz que a cor nunca deve ser a única forma de transmitir informação. Sempre reforce-a com um segundo sinal.

A solução mais simples são as palavras. Combine um campo vermelho com o rótulo Erro, para que o significado permaneça mesmo quando a cor não for percebida.

Uma marca de seleção, um triângulo de alerta ou um X transmite significado por meio da forma. Agora sucesso e erro são diferentes até em tons de cinza.

Um link azul em um parágrafo cinza pode desaparecer para alguns usuários. Adicione um sublinhado para que os links sejam óbvios sem depender da cor.

Gráficos que diferenciam séries apenas pela cor são uma armadilha. Adicione padrões, rótulos diretos ou formas distintas a cada linha ou fatia.

Não sinalize um campo inválido apenas com uma borda vermelha. Adicione uma mensagem de erro em texto e um ícone para que todos saibam o que falhou.

Faça uma verificação rápida: veja seu design em tons de cinza. Se ainda conseguir distinguir estados e links, você não está dependendo apenas da cor.

Manter o sublinhado faz com que os links sejam identificados com clareza, mesmo por usuários que não conseguem perceber a diferença de cor.

Você aprendeu a nunca deixar a cor ser o único sinal: adicione texto, ícones, formas ou sublinhados para que o significado alcance todas as pessoas. A seguir: verificação do contraste com ferramentas. 🌈