Color desempenha um papel integral no desenho da IU. Quando feito corretamente, melhora a experiência do Usuário, influencia decisões de compra e reflete a voz das marcas.
então, como você projetar interfaces eficazes, acessíveis e esteticamente agradáveis para usuários cegos de cor?embora a ciência por trás da cegueira de cores seja bastante complexa, a essência disso é que as pessoas cegas de cor têm dificuldade em ver a cor claramente ou diferenciar entre algumas cores., Com isso em mente, neste artigo, vamos compartilhar algumas dicas sobre como você pode melhorar a acessibilidade do seu site e a experiência que oferece para as pessoas cegas de cor.de acordo com estudos, aproximadamente 1 em cada 12 homens (e 1 em cada 200 mulheres) são daltónicos. Embora as pessoas cegas de cor possam ver as coisas tão claramente como todos os outros, elas não são capazes de discernir totalmente a luz vermelha, verde ou azul. Existem diferentes tipos de cegueira colorida; deuteranopia e protanopia cegueira colorida são os mais comuns.,pessoas com cegueira de cor Vermelho-Verde (deuteranopia) têm dificuldade em distinguir entre vermelho e verde. Da mesma forma, para as pessoas com cegueira de cores vermelhas (protanopia), todas as cores vermelhas parecem maçantes.
o que isto significa do ponto de vista do design é que confiar apenas na cor para a legibilidade e acessibilidade tornaria o seu site difícil de usar para alguém que é daltónico.
pode usar o simulador de cegueira de cores Coblis para ver como é o seu site para os utilizadores cegos de cor.,
7 formas de melhorar a acessibilidade de cores para os utilizadores cegos de cores
elementos de desenho e técnicas que melhoram a acessibilidade de cores para os utilizadores cegos de cores são geralmente consideradas boas práticas de design. Enquanto você pode pensar que o apelo estético do seu site pode sofrer Se você projetar para a acessibilidade, isso certamente não é o caso.
Aqui, vamos dar uma olhada em algumas das maneiras que você pode projetar uma UI mais acessível mantendo os usuários de cor cegos em mente.
#1: Padrões de uso e texturas
diferenças de cor são incrivelmente importantes com a visualização de dados.,, gráficos e gráficos. Escolher as cores que têm uma taxa de contraste baixa pode tornar o seu gráfico difícil de interpretar para os utilizadores daltónicos.
qui está o que você deve fazer em vez disso:
- Use padrões e texturas para tornar mais fácil para os usuários diferenciar diferentes segmentos.
- Adicione etiquetas de texto aos segmentos para torná-los ainda mais fáceis de entender.
vamos dar uma olhada em como uma pessoa cega de cor com tritanopia pode ver um gráfico de barra azul-verde versus como eles iriam ver o mesmo gráfico com padrões e texturas.,
Aqui está o que ele seria se você rotulado de cada segmento, ao invés do uso de padrões:
#2: Utilizar Cores e Símbolos
Você não deve confiar apenas na cor para se comunicar erros ou transmitir informações através de sua INTERFACE de usuário.
vamos dar uma olhada no formulário de inscrição do Facebook, por exemplo., Se o formulário invocado apenas de cores para permitir que os usuários saibam que eles tinham feito um erro em um determinado campo, pode parecer algo como isto para um vermelho-cego (protanopia) usuário:
Aqui está uma olhada no Facebook do formulário de inscrição com os símbolos e as mensagens de erro ligado:
Usando ícones e símbolos em formas para que o utilizador saiba que eles cometeram um erro melhora a acessibilidade e ajuda-los a corrigir o seu erro mais rápido.
# 3: Usar Etiquetas de texto
adicionar etiquetas de texto aos filtros de cores e amostras melhora a acessibilidade para utilizadores cegos de cores., Dependendo do tipo de cegueira de cores, os usuários podem achar difícil diferenciar entre diferentes cores (ou tons) sem algum tipo de texto descritivo.
por exemplo, sem o rótulo de texto descritivo na Amazon, os usuários cegos de cor não seriam capazes de distinguir uma camisa vermelha de uma laranja ou verde.
adicionar etiquetas de texto aos filtros de cores melhora a acessibilidade para pessoas com visão normal, também. Por exemplo, Branco, off-white, e cinza claro são muitas vezes difíceis de diferenciar entre monitores.,
# 4: sublinhar as ligações
muitas vezes usamos a cor da fonte ou o peso da fonte para indicar as ligações. Embora seja possível para alguém com deuteranomaly, protanopia, ou tritanopia distinguir texto âncora de texto regular, certamente não é ideal devido à baixa taxa de contraste.
alguém com monocromacia não seria capaz de diferenciar texto e âncora em tudo e teria que pairar sobre o texto para ver se o cursor muda para um ponteiro.
por esta razão, é uma boa ideia adicionar um sublinhado às ligações de texto., Isso torna fácil de dizer imediatamente texto regular e texto âncora separados. Aqui está um exemplo do site da Engadget:
#5: combinações de cores para evitar
certas combinações de cores não são ideais para usuários cegos de cor, quer porque eles têm razões de contraste baixas ou porque eles são difíceis de diferenciar.,
Aqui está uma lista de combinações de cores que você deve evitar usar em seus designs de interface sempre que possível:
- verde-vermelho
- verde-azul
- verde-marrom
- verde-preto
- verde-cinza
- azul-cinza
- luz verde-amarelo
- azul-roxo
Aqui está o que o verde-vermelho e azul-violeta combinações de cores seria semelhante a um usuário com protanopia:
#6: Fazer Botões principais de Destaque
Muitas vezes, os projetistas dependem de cor para fazer botões principais se destacam., O problema com isso é que a cor que você usa pode ser difícil para os usuários cegos de cor perceber.
Aqui está o que você deve fazer em vez disso:
- aumente o tamanho do seu botão primário.
- Experimente diferentes combinações de colocação.
- aumenta o contraste entre botões primários e secundários.
- Use borders, icons, or font weight to diferenciate primary and secondary buttons.
por exemplo, a reforma usa tamanho e cor para enfatizar o botão primário.,
E Firebox apresenta o seu principal botão no canto inferior direito e o botão secundário no canto superior esquerdo.
#7: marque os campos obrigatórios de forma
os utilizadores cegos de cor podem ter dificuldade em diferenciar entre os campos obrigatórios e opcionais se usar a cor por si só para indicar os campos obrigatórios nos formulários.
em vez disso, pode:
- marcar os campos necessários com um asterisco (*).campos de etiquetas
- Com a palavra necessária ou opcional.
- remova campos opcionais dos formulários.,
conclusão
o desenho da IU para os utilizadores daltónicos irá ajudá-lo a melhorar a acessibilidade do seu site para os utilizadores com visão normal, também. Embora não exista uma solução de tamanho único para todos quando se trata de Acessibilidade web, Aqui estão algumas dicas que você deve ter em mente:
- Use padrões e texturas para mostrar contraste em gráficos e gráficos.
- Use cores e símbolos para transmitir mensagens de erro.
- Adicione legendas de texto aos filtros de cores e amostras.
- sublinhar as ligações para diferenciar entre texto regular e texto âncora.,
- evite usar combinações de cores pobres, tais como verde-vermelho e azul-roxo.
- Use o tamanho, a colocação ou os pesos da fonte para fazer sobressair os botões primários.
- marque os campos de formulário necessários com um símbolo (como um asterisco) ou rotulá-los.