12 práticas recomendadas para melhorar seu design de comércio eletrônico para usuários daltônicos

Alguns dos principais recursos do site de comércio eletrônico incluem um processo de checkout fácil de usar, uma variedade de opções de envio e um design e interface fáceis de usar. No geral, esses recursos tornam as compras on-line mais fáceis e mais agradáveis ​​para os clientes. Mas neste artigo, vamos explorar o daltonismo no comércio eletrônico e como criar um site de comércio eletrônico compatível com daltonismo.

As cores podem tornar seu site muito mais dinâmico e atraente para os usuários. Mas usar cores erradas em aspectos funcionais do seu site (como botões, links e calls-to-action) pode dificultar a vida de usuários com daltonismo.

Portanto, projetar seu site para deficiência de visão de cores facilita para os visitantes obterem a melhor experiência possível.

Construir seu site para ser acessível para daltonismo não significa que você evite incorporar cores juntas. O importante é estar mais atento a como você usa as cores para apresentar vários elementos do site.

Saber o que é o daltonismo

Ao contrário do que o termo sugere, a maioria das pessoas com deficiência de cor ou cegueira ainda pode ver pigmentação. Mas, em vez de não ver nenhuma cor, eles acham difícil decifrar cores específicas.

Aqui estão os três principais tipos de daltonismo e suas subcategorias:

1. Daltonismo vermelho-verde

Este é o tipo mais comum, em que a pessoa confunde vermelho com verde. Possui vários subtipos:

Deuteranomalia: Verde que parece vermelho
Protanomalia: Vermelho que parece verde
Protanopia ou Deuteranopia: Não foi possível distinguir entre vermelho e verde

2. Daltonismo azul-amarelo

Este tipo é o menos comum. A pessoa muitas vezes confunde a cor azul com amarelo:

Os subtipos incluem:

Tritanomalia: não conseguia distinguir amarelo e vermelho, azul e verde
Tritanopia: não conseguia distinguir entre amarelo e rosa, roxo e vermelho, azul e verde

3. Monocromacia

Este é o tipo mais raro em que a pessoa não pode ver nenhuma cor.

Considerações de design para pessoas daltônicas

Não há muita tecnologia assistiva para pessoas daltônicas, como as que são legalmente cegas ou têm baixa visão. Isso significa que você deve estar atento às combinações de cores desde o início do processo de design.

Há duas considerações principais para tornar seu site ideal para indivíduos daltônicos: contraste de cores e apenas confiar apenas na cor para transmitir significados.

Web design para daltonismo

Fazer um site de comércio eletrônico projetado para pessoas com daltonismo geralmente requer algum pensamento e intenção. Aqui estão algumas dicas úteis para projetar seu site com isso em mente

1. Use rótulos e símbolos claros

A rotulagem clara é uma das melhores práticas para direcionar qualquer usuário pela jornada do cliente. Isso é especialmente útil para pessoas com deficiência de cor.

Os rótulos ajudam a distinguir as informações geralmente transmitidas com cores. Isso vale para visualização de dados, como gráficos ou simplesmente para orientar os usuários em uma página da web. Você também deve se perguntar se o usuário pode ou não encontrar o caminho para o seu site sem as dicas de cores.

Do ponto de vista do comércio eletrônico, também é vital que você rotule os produtos usando informações claras e descritivas.

2. Considere um design minimalista

O minimalismo está no web design agora, e não há sinal de que está diminuindo. Embora possa ser tentador preencher todas as páginas com elementos atraentes, usar muitos deles pode confundir os usuários.

Da mesma forma, também diminui a experiência geral do usuário. O uso de design minimalista continua a ser uma tendência porque já foi testado e comprovado.

Além disso, na acessibilidade de cores, o minimalismo reduz a chance de os usuários acharem difícil navegar pelo seu site.

Embora o minimalismo muitas vezes não seja um requisito para acessibilidade, ainda é uma opção essencial para muitos usuários. Além disso, como há apenas algumas cores em um web design minimalista, os usuários com deficiências de cores entenderão rapidamente o propósito de cada página da web.

Se você tiver uma paleta de cores limitada, verifique se as cores que você está usando contrastam bem. Uma das escolhas clássicas é usar preto e branco. No entanto, você não precisa se sentir encaixotado usando apenas essas duas cores.

Como as pessoas daltônicas acham difícil distinguir os compartilhamentos de vermelho, azul e verde, é melhor evitar trabalhar com essas cores e usar alternativas.

3. Implemente padrões e texturas para mostrar contraste

Outra ótima maneira de atualizar seu design visual sem depender muito de uma paleta de cores é usar padrões e texturas.

Eles funcionam relativamente bem nos casos em que as cores permitem que os usuários distingam certas informações, como na forma de um gráfico ou tabela. Colocar padrões ou elementos de textura ajudará esses elementos a se destacarem.

4. Evite instruções específicas de cores

Se você estiver criando formulários, evite rotular os campos obrigatórios apenas com texto colorido, pois esses campos podem parecer idênticos a uma pessoa com daltonismo.

Uma alternativa melhor é escrever a referência do texto diretamente no rótulo do formulário. Um bônus é que isso também o torna altamente legível por um leitor de tela para pessoas com deficiências visuais graves.

5. Sublinhar links

Muitas vezes, usamos a cor da fonte ou o peso da fonte para denotar links. Embora uma pessoa com deficiência de cor possa distinguir o texto âncora de um texto normal, não é ideal devido à sua baixa taxa de contraste.

Por exemplo, uma pessoa com monocromacia não seria capaz de diferenciar um texto de um texto âncora. Assim, eles precisam passar o mouse em torno do texto para verificar se o cursor muda para um ponteiro.

Assim, adicionar um sublinhado aos links de texto é uma boa ideia. Isso facilita a distinção entre texto normal e texto âncora.

6. Evite certas combinações de cores

Como o daltonismo pode afetar os indivíduos de maneira diferente, evitar certos tons de cores não é suficiente.

Você deve saber que certas combinações de cores não são ideais para usuários daltônicos. Isso porque eles geralmente têm taxas de contraste baixas ou são difíceis de diferenciar completamente.

Então aqui está uma lista das diferentes combinações de cores que você deve evitar usar o máximo que puder:

• Verde e vermelho
• Verde e azul
• Verde e preto
• verde e marrom
• Verde e cinza
• Azul e cinza
• Verde claro e amarelo
• Azul e roxo

7. Reconsidere seus botões de CTA

Se os visitantes do seu site são daltônicos, você precisa saber que o contraste entre as cores é tão importante quanto as próprias cores.

Portanto, se os usuários não conseguirem encontrar suas frases de chamariz, eles acharão um desafio acompanhar a jornada do cliente. Assim, suas taxas de conversão também sofrerão.

Felizmente, você pode utilizar mais de uma cor para garantir que seu CTA se destaque do restante dos textos e imagens.

8. Evite usar designs de baixo contraste

Um contraste altamente eficaz é importante. Isso é para garantir que seu conteúdo e links sejam legíveis para os leitores.

Um design de baixo contraste significa que os clientes podem ter dificuldade em ler as informações do seu site. Se você é uma loja de comércio eletrônico, as pessoas daltônicas podem não encontrar detalhes do produto ou até mesmo onde o link é para enviar com a compra. Isso, com o tempo, pode se traduzir em conversões perdidas e, eventualmente, em vendas.

A taxa mínima de contraste de cores no nível duplo A para imagens e textos deve ser de 4,5 a 1.

9. Alterando o brilho, saturação, matiz

Semelhante à alteração de contraste, alteração de brilho, saturação e matizes de cores permite que os designers mostrem definição. Ele também permite que os usuários finais diferenciem entre diferentes elementos sem ter que usar uma infinidade de cores.

Mesmo usando apenas uma única cor, alterar sua tonalidade, brilho e saturação permite criar um contraste distinto entre amostras da mesma cor.

Isso permite que você incorpore cores em seus designs como se estivesse adicionando algo novo à mistura todas as vezes, sem comprometer a estética. Os usuários daltônicos podem perceber cada cor como uma parte diferente do seu design.

10. Use linhas mais grossas

Pessoas com daltonismo leve podem ver cores se houver “massa”. Assim, menos do que uma boa linha fina de cor não aparecerá como a cor certa para eles. Então, em vez disso, você iria com textura.

Especialmente em infográficos ou mapas, a textura pode ser usada para ajudá-lo a distinguir entre vários objetos.

11. Utilize cores e símbolos

A cor não deve ser apenas seu principal meio para transmitir informações aos usuários daltônicos. Na verdade, de acordo com a Seção 508, uma página da Web deve ser projetada de forma que todas as informações transmitidas em cores também estejam disponíveis sem cores.

As cores não devem ser o único meio a ser usado se você quiser transmitir uma mensagem. Por exemplo, o daltonismo pode afetar a capacidade de uma pessoa de distinguir mensagens comuns de erro vermelho, como “aviso” ou “cuidado”.

Assim, você pode querer adicionar elementos simbólicos ao texto codificado por cores para ajudá-lo a transmitir seu ponto de vista a uma ampla variedade de públicos ou chamar sua atenção. As mensagens de erro anexadas aos campos do formulário no Facebook são excelentes exemplos dessa técnica.

12. Teste!

Muitas ferramentas por aí estimulam vários tipos de daltonismo. Portanto, vale a pena verificar seu design para ver possíveis problemas na frente. Você também precisa executar uma verificação final antes de entrar ao vivo. Fazer isso garantirá que tudo corra bem.

Como a VOCSO pode ajudar?

Você está procurando serviços de design e desenvolvimento de sites que forneçam uma excelente experiência de usuário para pessoas daltônicas? Somos uma empresa de design de sites de comércio eletrônico que cria sites compatíveis com daltônicos que funcionam melhor para usuários daltônicos. Há uma série de ferramentas e técnicas disponíveis que levam em consideração a maneira como as pessoas com daltonismo acessam facilmente seu site. Alguns ajustes simples no design do seu site podem fazer toda a diferença para alguém que depende da cor para comunicar informações. Sempre mantemos essas considerações em mente ao projetar seus sites. Usamos visualizações compatíveis com daltônicos nas páginas do site que funcionam bem para pessoas com daltonismo.

Para você

Nos dias de hoje, você deve projetar seu site para acessibilidade. Isso porque pessoas de todas as esferas da vida usam a internet para fazer até as tarefas mais simples.

Integrar esses elementos em seu site e criar um web design altamente acessível é fundamental para se conectar com sua base de clientes atual e criar um sentimento de confiança com eles.

Assim, use essas técnicas práticas e inclusivas para aprimorar a experiência geral do usuário para ajudar sua empresa a crescer ao longo do tempo. Boa sorte!