Design de interface do usuário para usuários daltônicos

As pessoas daltônicas constituem uma parcela significativa da população – cerca de 1 em cada 12 homens e 1 em 200 mulheres para ser exato. No entanto, os usuários daltônicos são um público muitas vezes esquecido no design de interface do usuário.

Muitos confundem o daltonismo com a visão em preto e branco e, embora este seja um tipo, existem versões menos raras e menos extremas.

A maioria das pessoas é tricromática, o que significa que percebe a cor como uma combinação de três cores: verde, vermelho e azul. Diferentes tipos de daltonismo ou deficiência de visão de cores (CVD) vêm da incapacidade de perceber uma ou mais dessas cores claramente. Os tipos mais comuns de DCV são daltonismo vermelho-verde, onde é difícil distinguir entre vermelho e verde, e daltonismo vermelho, onde as cores vermelhas parecem opacas.

Acreditamos que todos devem ter acesso justo e igual à internet, por isso é essencial que os designers de interface do usuário projetem com os usuários daltônicos em mente. O Americans with Disabilities Act (ADA) exige até que certas organizações atendam às diretrizes WCAG 2.0 Nível AA.

Tornar seu site compatível com ADA não é difícil, mas significa considerar a acessibilidade de cores. Fora das ramificações legais, projetar para usuários daltônicos é vital para a experiência do usuário que você oferece.

Por que projetar para daltonismo é importante

A teoria das cores desempenha um grande papel no design da interface do usuário porque a cor tem o poder de influenciar as decisões de compra do usuário, a resposta emocional e a experiência geral do usuário. Pense na importância de escolher as cores certas da marca para um negócio. Agora imagine que mais de 8% das pessoas não conseguem ler seu logotipo ou site por causa das cores que você escolheu. É muita oportunidade perdida.

Como os usuários daltônicos não conseguem distinguir certas cores, os designers não podem confiar apenas na cor para a legibilidade ou impacto emocional de um design. Quando você usa cores, precisa considerar como os usuários interagem com elas e criar um design interativo que atraia o público-alvo – incluindo membros daltônicos. É trabalho do designer ter empatia com os pontos problemáticos do usuário para que eles possam preveni-los e resolvê-los.

Hoje em dia, existem ferramentas como o Visolve que podem ajustar as telas do computador para certos tipos de daltonismo, mas nem todos os daltônicos usam essas ferramentas – nem mesmo todos os daltônicos sabem que são daltônicos.

É importante observar que seu site não é o único lugar a considerar a acessibilidade de cores. Até mesmo suas mídias sociais podem ser acessíveis a cegos e deficientes visuais.

Terminologia de cores para saber

Antes de entrarmos nas práticas recomendadas de design de interface do usuário para usuários daltônicos, é bom revisar os fundamentos da cor para aqueles que não são especialistas em design. Há quatro componentes principais a serem considerados ao escolher um esquema de cores:

Matiz: Este é um sinônimo de 'cor' e é determinado pelo comprimento de onda espectral de uma cor.

Saturação: Também chamada de croma, é a intensidade ou pureza de uma cor, determinada pela quantidade de cinza presente. Quanto menos cinza houver, mais brilhante será a cor.

Luminosidade: A luminosidade depende da quantidade de branco ou preto adicionado a uma cor, criando tons e sombras, respectivamente.

Temperatura: é o quão quente ou frio você percebe que uma cor é. Um monitor de computador pode afetar a temperatura percebida de uma cor.

Como projetar para usuários daltônicos

Projetar para daltonismo não significa tornar seu produto menos atraente; significa apenas seguir certas práticas recomendadas durante o processo de design. A implementação de bons princípios de design de UX e UI só melhorará a usabilidade do seu site a longo prazo.

Não defina apenas com a cor

Ao projetar para usuários daltônicos, você não pode confiar exclusivamente na cor para qualquer mensagem.

Fazer isso é um erro comum na visualização de dados, pois gráficos, tabelas e mapas são frequentemente codificados por cores. Os formulários de reserva que mostram os horários disponíveis para compromissos ou assentos disponíveis para shows por meio de código de cores também são comuns. Outros exemplos incluem indicar campos de formulário obrigatórios ou ausentes, delineando-os em cores ou indicando erros com cores.

Você deve evitar transmitir informações críticas em texto e imagens coloridas ou, pelo menos, fornecer essas informações de outras maneiras acessíveis.

Entenda as opções de contraste e cor

Para usuários daltônicos, o contraste entre as cores geralmente é mais importante do que a própria cor. Concentrar-se no contraste é benéfico para os designers, uma vez que os diferentes tipos de daltonismo tornam ineficiente apenas evitar uma determinada cor. Para melhorar a taxa de contraste em uma paleta compatível com daltônicos, clareie as cores claras e escureça as escuras.

Aqui estão algumas outras maneiras de melhorar a visibilidade do seu design:

• Enfatize a diferença entre a cor do primeiro plano e do plano de fundo
• Não escolha tons próximos uns dos outros na roda de cores, a menos que haja uma grande diferença na luminosidade
• Evite usar cores de luminosidade semelhante, independentemente da tonalidade ou saturação
• Aumente a saturação dos tons em uso

Com isso em mente, ainda existem combinações de cores que podem ser mais desafiadoras para diferentes tipos de usuários daltônicos. Sua paleta compatível com daltônicos deve se afastar dessas combinações de cores quando a taxa de contraste não for significativa:

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

Implementar padrões e texturas

Uma maneira de atualizar seus designs visuais para usuários daltônicos sem depender apenas da paleta de cores é usar padrões e texturas. Isso funciona bem em casos em que a cor geralmente ajuda a distinguir informações, como em um gráfico ou tabela. Adicionar elementos de padrão ou textura ajudará os elementos a se destacarem.

Use símbolos e rotule tudo

A rotulagem clara é uma prática recomendada para direcionar qualquer usuário pela jornada do cliente, incluindo aqueles que são daltônicos. Os rótulos podem ajudar a distinguir informações normalmente transmitidas com cores. Isso vale para visualização de dados, como gráficos, ou para orientar os usuários em uma página da web. Pergunte a si mesmo se um usuário pode encontrar o caminho sem as dicas de cores que você forneceu.

Do ponto de vista do comércio eletrônico, você também deve rotular seus produtos com informações claras e descritivas. Não confie em fotos de produtos para contar toda a história; rotular a cor de um produto.

Repense seus botões de CTA

O call to action (CTA) é parte integrante do design interativo. Se um usuário não conseguir encontrá-lo ou não o entender, ele não progredirá na jornada e você não atingirá as metas. Você precisa chamar a atenção para o seu CTA, e muitos designers confiam na cor para fazer isso.

Um bom design de interface do usuário implementa cores, mas também usa uma ou mais dessas outras técnicas de destaque para botões de CTA:

• Tamanho
• Canal
• Contraste pesado
• Bordas ponderadas
• Fontes ponderadas
• Ícones simbólicos
• Efeitos de foco

Essas técnicas funcionam em usuários daltônicos e não daltônicos, e você pode usá-las para outros elementos de página para os quais deseja chamar a atenção.

Sublinhe esses links

Se você ler qualquer blog, incluindo este, notará que os links são destacados para notificar os usuários de sua presença. A maneira mais comum de enfatizar um link é com cores. Para isso, use azul porque a maioria das pessoas com deficiência de visão de cores pode vê-lo.

É para usuários com acromatopsia ou monocromacia, embora formas mais raras de daltonismo, essa ênfase de cor não será suficiente. Para essas pessoas, os links coloridos aparecem em cinza e são indistinguíveis de outros textos. Você pode resolver isso rapidamente sublinhando seu texto âncora.

Considere o minimalismo

O minimalismo está longe de ser novo. A estética é tendência há décadas, passando pela arquitetura, arte, decoração de interiores e, claro, design.

E agora, o minimalismo tem um papel na acessibilidade de cores porque quanto menos cores houver, menor a chance de confusão. Também é estilisticamente atraente e menos distrativo, tornando-se uma escolha sólida para todos os públicos.

Você não é obrigado a aderir a um design minimalista para ser acessível, mas é um caminho que funciona.

Use um simulador de daltonismo

À medida que a comunidade de design trabalha para uma experiência de usuário acessível, muitas ferramentas excelentes surgiram para ajudar. Os simuladores daltônicos, por exemplo, permitem que os designers vejam seus projetos da mesma forma que um usuário daltônico veria. Um desses simuladores, o Oracle, está disponível para Mac, Windows e Linux. Use um simulador daltônico para testar seu trabalho durante todo o processo de design e entender como os usuários interagem com suas escolhas.

Ao decidir sobre sua paleta de cores nos estágios iniciais, sugerimos o uso de uma ferramenta de seleção de cores que avalia suas escolhas de acordo com as diretrizes da AA. Este verificador de contraste pode informar sua taxa de contraste e este gerador de cores acessível sugere combinações de cores que funcionam melhor.

Torne seu site acessível

Projetar para daltonismo garante que seu site forneça uma experiência de usuário que todo o seu público possa navegar e desfrutar. Para eles, significa uma marca em que podem confiar; para você, significa conversões bem-sucedidas. Dependendo do tamanho da sua empresa, pode significar também seguir a lei. Independentemente disso, faz parte da construção de um ambiente online justo e igualitário.

A acessibilidade de cores é apenas um elemento da construção de um site acolhedor. Certifique-se de verificar nosso guia sobre como tornar seu conteúdo acessível à comunidade surda e HOH.