O impacto das cores em um site e a importância de contar com uma ferramenta de acessibilidade automatizada

Crédito da imagem: Reprodução/site Coletivo UX

Antes de começar a ler este artigo, vamos fazer um teste: você enxerga algum número na imagem acima? Não? Deixa eu te falar uma coisa. Se você não vê o número 74, provavelmente você possui algum tipo de daltonismo. Mas como assim algum tipo? O daltonismo não é uma coisa só?

Vamos te explicar. O daltonismo é uma deficiência que afeta a percepção e a distinção das cores através da luz. Em alguns casos, dependendo do grau de daltonismo, o usuário não consegue enxergar as cores verde, vermelho e azul. Em outros casos mais raros, nenhuma cor é captada pelo olho humano. Mas vamos detalhar cada um desses tipos para exemplificar melhor:

  • Protanopia: o usuário tem dificuldade de perceber a cor vermelha. O daltônico pode passar a enxergar no lugar do vermelho tons de marrom, verde ou cinza.
  • Deuteranopia: dificuldade para perceber qualquer luz verde;
  • Tritanopia: interfere na visão das cores azul e amarelo. Não se perde a visão total do azul, mas as tonalidades enxergadas são diferentes;
  • Monocromia: ausência da capacidade de diferenciar as cores, resultando na visão em escala de cinza;

No Brasil, segundo dados da OMS, já são mais de 8 milhões de daltônicos. Sendo assim, os sites precisam ser acessíveis, para que essas pessoas tenham total autonomia para navegar na web e consumir conteúdo online. Já sabemos, então, que utilizar algumas sobreposições de cores podem confundir os usuários daltônicos. Mas será que é só nisso que as empresas precisam estar atentas? Para responder a essa pergunta, separamos, abaixo, algumas boas práticas para implementar no seu website para melhorar a visibilidade de pessoas com daltonismo:

Não use cores para sinalizar informações importantes

Há inúmeras formas de destacar conteúdos importantes. Você pode utilizar ícones, texto e até mesmo texturas. Trabalhar apenas com cores pode confundir os daltônicos no momento que eles forem consumir alguma informação.

Links devem ter cara de links. Mas o que isso significa?

Utilizar um texto sublinhado e em negrito é a melhor forma de representar um link. Não os diferencie por cores. O mesmo funciona também para formulários. A validação dos campos de formulários geralmente segue o modelo de verde para sucesso e vermelho para erro. Isso, para os daltônicos, é um elemento visual que prejudica o entendimento, já que são cores que eles não diferenciam.

Utilize o contraste na medida certa e mais saturação

Garanta um bom contraste entre cores e elementos, proporcionando uma boa leitura aos usuários. Mas como? Deixe as cores escuras mais escuras e as claras mais claras. Mas cuidado para não usar também o máximo de contraste possível, pois usá-lo pode atrapalhar o entendimento da informação de pessoas disléxicas. Vamos garantir a acessibilidade para todos! O ideal, portanto, é trabalhar com um contraste mínimo de 1:4.5 (ou 1:3 para textos maiores), segundo informações do W3C.

Se for possível, aumente também a saturação, o brilho e a matiz das cores, para torná-las facilmente identificáveis com as cores ao redor.

Faça uso da descrição em imagens e gráficos

Muitas vezes, a imagem é a mensagem principal a ser transmitida e precisa ser completamente compreendida. Por isso, quando for postar fotos, descreva as cores que aparecem, para que fique fácil de fazer a distinção. Isso é muito útil para pessoas que vendem produtos na internet. Mas também é importante fazer essa distinção das cores em gráficos. Sendo assim, é recomendado que cada segmento do gráfico conte com uma descrição.

Atenção na hora de escrever conteúdos em texto

Quando pensamos nos usuários daltônicos, logo vem à nossa cabeça as cores. Mas há outras barreiras que podem fazer com que esses usuários não consigam acessar facilmente as informações. Uma delas está relacionada à formatação dos textos.

Em muitos casos, a fonte escolhida ou a maneira de destacar uma informação podem tornar o conteúdo confuso. Sendo assim, leve em consideração o tamanho dos elementos e a fonte. E como falamos anteriormente, quando for destacar uma informação, não faça isso apenas por meio da mudança de cor. Sublinhe a frase ou mude a textura.

Contrate a ferramenta EqualWeb

Com tantas alterações a serem feitas, muitas empresas ainda encontram dificuldades na hora de desenvolver um site aplicando essas boas práticas sem que o layout fique feio ou sem se distanciar muito da estética e dos valores da marca.

Além do layout, as marcas ficam imaginando também todo o trabalho e tempo necessário para poder contratar um profissional especializado para modificar o website. Ou, no caso de não haver um profissional, fazer uma pesquisa das ferramentas e plugins que fazem essas alterações.

Mas não se preocupe. Nós temos a solução para isso. Porque não contar com uma ferramenta digital que modifica essas questões automaticamente? Pois é. A EqualWeb faz isso pelo seu site. Basta que o usuário clique na opção que deseja e o recurso será ativado. Com os recursos ativados, o seu site estará adaptado para o usuário. Contar com uma ferramenta automática como a EqualWeb pode ser o meio mais fácil e rápido de conseguir tornar o seu site acessível não só para pessoas daltônicas, mas pessoas com qualquer tipo de deficiência. Fale com nossos profissionais!

 

Referências:

https://brasil.uxdesign.cc/melhorando-a-experi%C3%AAncia-do-usu%C3%A1rio-dalt%C3%B4nico-3097291d0492

https://blog.adobe.com/en/publish/2020/09/16/color-choices-that-are-accessible.html#gs.m98hxr

http://www.acessibilidadelegal.com/13-daltonismo.php

https://coletivoux.com/dalt%C3%B4nicos-tamb%C3%A9m-s%C3%A3o-usu%C3%A1rios-4f03ca40c30d

https://brasil.uxdesign.cc/acessibilidade-o-impacto-das-cores-bfc0d60420db

http://blog.handtalk.me/acessibilidade-daltonicos/

Compartilhe este post

Tags

# #pactoglobal
# 4 anos
# acessibilidade
# acessibilidade de conteúdo da web
# acessibilidade digital
# acessibilidade digital no brasil
# acessibilidade financeira
# acessibilidade para idosos
# acessibilidade web
# Acessível
# AI
# Alinicast
# ambiente digital
# andrea schwarz
# aniversário
# Aniversário EqualWeb
# atualização
# BBB
# BBB 22
# black friday
# Bondinho Pão de Açúcar
# Calendário Inclusivo
# capacitismo
# carnaval
# Carnaval2024
# Casas Bahia
# case de sucesso
# cenário da acessibilidade digital
# cenário do capacitismo
# CNDEI
# comunicação
# comunicação inclusiva
# Conarec
# CONARH
# Conferências
# Conformidade
# congresso nacional de gestão de pessoas
# CPACC-certified
# CVC Corp
# D&I
# datas comerciais
# deficiência visual
# deficientes visuais
# DEI
# DEIA
# Desempenho
# Design
# Design acessível
# deslanchar
# Dia do Cliente
# Dia Internacional da Mulher
# Dia Nacional da acessibilidade
# Dias das Mães
# diferencial para sua empresa
# diversidade
# dúvidas
# e-commerce
# E-commerce acessível
# e-commerce brasileiro
# educação
# eMAG
# embaixador digital
# embaixadora digital
# entrevista
# Epilepsia
# equalweb
# EqualWeb Talk
# EqualWeb Talks
# evento
# Eventos
# ewa
# experiência do usuário
# festa do povo
# Fim de Ano
# Folha de São Paulo
# futuro
# IA
# idosos
# impacto
# impacto social
# importância da DEI nas empresas
# inclusão
# inclusão digital
# inclusão no brasil
# inclusão Web
# influenciadores
# Integrantes
# inteligência artificial
# internet
# lbi
# Legislação
# lei brasileira de inclusão
# Leis
# Libras
# Localweb Digital Conference
# loja virtual
# Machine Learning
# maturidade em inclusão
# metaverso
# mídia
# motorola
# Natal
# navegação acessível
# Novas funcionalidades
# Novas funcionalidades 2024
# o que é acessibilidade
# o que é capacitismo
# o que significa DEI
# ODS
# Pacto Global
# paratodosverem
# Parceiros
# pcd
# pesquisa de maturidade em inclusão
# pessoas com deficiencia
# Podcast
# Reatech
# redes sociais
# Reserva
# Responsividade
# Retrospectiva2023
# Retrospetiva
# RHRio
# RIW
# ROI
# selo iImpact
# SEO
# Shopping
# Shoppings
# Símbolo da acessibilidade
# site acessível
# Stadium
# Tecnologia Assistiva
# Tecnologia assistivas
# Tendências 2024
# Time
# Transformação
# turismo
# ux
# Vlibras
# WCAG
# web
# web summit
# Web Summit Rio
# website acessível