Como fazer designs acessíveis para daltonismo?

Como o seu produto digital pode incorporar a acessibilidade e acolher pessoas com daltonismo? 

‍

Isso é fundamental em um cenário mercadológico onde as cores de uma marca comunicam mensagens consistentes. A identidade visual do seu negócio diz muito sobre a essência e o seu posicionamento.

‍

Em muitos contextos, os designers esquecem como as cores afetam pessoas usuárias com deficiência. Um website que depende muito de cores específicas pode encontrar dificuldades para comunicar significados para pessoas com daltonismo. 

‍

Times de designers que priorizam a acessibilidade garantem uma fácil navegação para pessoas com daltonismo. Assim, pessoas usuárias que não percebem ou distinguem certas cores podem usar um website sem confusão, por exemplo. 

‍

O propósito desse post é explicar a importância de considerar o daltonismo no web design. Entregue experiências inclusivas agregando acessibilidade digital.

‍

Qual é a definição de daltonismo?

‍

O daltonismo pode ser chamado de deficiência de visão de cores. 

‍

A principal característica é a incapacidade ou diminuição da capacidade de diferenciar ou ver certas cores. As formas do daltonismo são várias. A diferença de percepção de faixas de cores é o que vai diferenciar uma forma da outra.

‍

A criação de experiências acessíveis demanda que os designers entendam dessa diversidade. Segue uma rápida síntese dos tipos comuns de daltonismo.

‍

• Daltonismo vermelho-verde: É a forma mais comum. Dificulta a diferenciação entre vermelho e verde.
  • O daltonismo vermelho-verde pode ter dois tipos de variantes:
    • Deuteranopia: perceber o verde como vermelho;
    • Protanopia: perceber o vermelho como verde.

• Daltonismo azul-amarelo: Dificulta a diferenciação entre amarelo e azul.
  • A tritanopia, tipo de daltonismo azul-amarelo, dificulta a percepção das diferenças entre azul e verde, roxo e vermelho, amarelo e rosa.
• Monocromacia: É o daltonismo total e é muito raro. Pode ser acompanhada por sensibilidade à luz. Uma pessoa com monocromacia só percebe o preto, tons de cinza e branco.

‍

‍

Quais dificuldades online enfrentadas pelas pessoas com daltonismo?

‍

A criação de experiências digitais acessíveis demanda que designers entendam as barreiras enfrentadas pelas pessoas com daltonismo.  

‍

A partir disso, o time pode ajustar os designers de acordo com as necessidades das pessoas usuárias. 

‍

• Tabela, gráficos, mapas e infográfico: A cor é usada para indicar dados e categorias em gráficos e tabelas digitais. Portanto, essas informações precisam de meios alternativos de diferenciação e rotulagem adequada. Assim, os gráficos podem ser interpretados pelas pessoas daltônicas. Recursos visuais, infográficos e mapas devem seguir o mesmo princípio para comunicar significado para pessoas usuárias;

‍

• Erros: O erro acusado por um formulário preenchido incorretamente pode não ser percebido pela pessoa usuária. Isso pode acontecer se o campo de preenchimento tiver um destaque vermelho. Assim, uma pessoa usuária pode perder muito tempo revisando o formulário;

‍

• Texto: Um texto de site pode ser inacessível se o contraste de cores entre o conteúdo e o fundo é baixo. A insuficiência do contraste entre a parte escrita e o fundo dificulta a identificação de hiperlinks. Assim, fica difícil perceber o que é texto clicável. O resultado é a perda de oportunidade de direcionar pessoas usuárias para informações relevantes;

‍

• Cores codificando indicadores: Ícones de status, botões e demais recursos web que só são identificados por cores podem causar confusão. Pessoas com daltonismo podem ficar desorientadas.

Botões e ícones de status usam a cor vermelho e verde para comunicar significados.  Em geral, o botão verde significa “próximo” e “enviar”. Já o vermelho significa “fechar” ou “parar”. Nos botões de ícones, o vermelho significa que a pessoa está “offline”. Já o verde significa que a pessoa usuária está “online”. Logo, esse sistema de cores pode causar confusões se não houver outra forma de diferenciar elementos.

‍

Seu design precisa incorporar a acessibilidade para daltonismo

‍

A web design acessível deve garantir uma experiência de sucesso para todas as pessoas usuárias. A internet deve ser um meio de comunicação inclusivo e acolhedor. A cor desempenha uma função imprescindível na comunicação da marca e na transmissão de emoções. 

‍

Por isso, cada conteúdo digital deve estar de acordo com a WCAG.  

‍

Seguir dois critérios da WCAG podem orientar marcas a serem mais acessíveis:

‍

• Uso apenas de cor (1.4.1);

‍

• Contraste mínimos de cor (1.4.3).

‍

A aplicação desses critérios entrega uma experiência digital acessível para todos os perfis de pessoas.

‍

A acessibilidade digital gera benefícios corporativos como:

‍

• Maior número de vendas;

‍

• Redução do risco legal, já que o Estatuto da pessoa com deficiência  demanda sites acessíveis;

‍

• Agrega credibilidade para a sua marca.

‍

Boas estratégias para agregar acessibilidade em seu design

‍

Há muitos detalhes e boas práticas que podem tornar seu design mais inclusivo.

‍

1. Priorize níveis suficientes de contraste de cores. A combinação de cores deve proporcionar um bom contraste entre o fundo e o texto. Essa boa prática garante informações legíveis, independentemente da paleta de cores. A WCAG oferece critérios para você avaliar sua cor e design.
2. Use variados meios alternativos de comunicação como rótulos, formas, padrões e texturas. Não foque em apenas uma cor! Usos de sinais alternativos para comunicar significados é imprescindível. A recomendação é que seu design ou site utilize tons de cinza. Desse jeito, você proporciona uma experiência visual inclusiva para pessoas com daltonismo. O cinza permitirá que sua equipe de designers identifique elementos difíceis de entender para pessoas com daltonismo. 
3. O recurso “opção de alternância” transforma elementos coloridos em padrões que comunicam significado. É uma opção específica para uso de pessoas com daltonismo. Só que esse recurso não proporciona uma experiência universal e aumenta custos de operação.  Por isso, aplique design inclusivo ao seu projeto web desde o começo.

‍

Projetar acessibilidade para daltonismo agrada todos as pessoas usuárias

‍

No Plugin Perto, oferecemos o perfil "Daltonismo", um recurso que possibilita a pessoa usuária que possui essa condição navegar da melhor forma no seu site ou plataforma.

‍

Além disso, nossa equipe fornece diversas soluções para que seu negócio seja mais inclusivo digitalmente.

‍

Venha conhecer nossas soluções e entenda como elas podem ajudar a sua empresa.