Uma alta taxa de rejeição é frequentemente causada pela baixa acessibilidade visual de uma loja virtual. Quando as fontes são muito pequenas ou dificilmente legíveis, quando há muitas distrações ou espaço em branco insuficiente, muitas pessoas simplesmente deixam a loja sem pensar duas vezes.
Um dos motivos mais frequentes para o abandono precoce são os esquemas de cores mal selecionadas que diminuem a legibilidade do conteúdo.
De acordo com as estatísticas da OMS, existem cerca de 285 milhões de pessoas com deficiência visual em todo o mundo, muitas das quais são parcial ou totalmente daltônicas.
Pessoas com deficiência visual veem as cores de forma diferente, portanto, evitar baixo contraste de cores em nossos designs é inevitável se quisermos oferecer aos nossos clientes um site acessível e amigável.
Padrões da Web para contraste de cores
A taxa de contraste de cores mede a diferença de contraste entre duas cores. Quanto mais alto for o valor, mais fácil será distinguir o objeto (texto, imagem, gráfico) em primeiro plano e em segundo plano.
As cores podem contrastar de muitas maneiras diferentes, como matiz, valor e saturação. A taxa de contraste de cores é calculada por uma fórmula fornecida pelo W3C, a principal organização de padrões internacionais para a World Wide Web.
Pode assumir um valor entre 1: 1 (nenhum contraste, o primeiro plano e o fundo têm a mesma cor) e 21: 1 (o contraste máximo que existe apenas entre preto e branco).
O nível AA requer uma proporção de pelo menos 4,5: 1 para texto normal e 3: 1 para texto grande. É muito mais fácil ler textos grandes como legendas, por isso precisa de um contraste de cor menor.
Se você deseja atingir o nível AAA, que é o nível aprimorado, precisa projetar seu esquema de cores com mais cuidado, pois exige uma relação de contraste de pelo menos 7: 1 para texto normal e 4,5: 1 para texto grande. Se um texto fizer parte de um logotipo ou nome de marca, não há requisito mínimo de contraste de cor em nenhum dos níveis WCAG.
Só podemos chamar uma loja virtual visualmente acessível se a relação de contraste de cor entre cada objeto de primeiro plano e seu plano de fundo atingir pelo menos o Nível AA.
Benefícios da alta taxa de contraste de cor
Garantindo melhor legibilidade você não envolve apenas usuários com deficiência visual, mas também pessoas que leem seu conteúdo em telas pequenas, como em um smartphone ou um smartwatch, entre más condições de iluminação e em monitores de qualidade inferior.
As pessoas também leem mais rápido quando há maior contraste entre o texto e o fundo, então provavelmente levará mais tempo para que se cansem do conteúdo da loja virtual.
Existem muitas ferramentas gratuitas excelentes em toda a web que podem ajudar os designers a verificar a relação de contraste de cores de seus sites
O mais importante a lembrar é que você sempre precisa comparar a cor do primeiro plano, como a cor do texto, com a área ao redor (cor do plano de fundo).
WebAim (Web Accessibility In Mind) é uma organização que promove a acessibilidade na web que oferece aos desenvolvedores um verificador de contraste de cores simples.
O Verificador de contraste de cores do WebAim informa se suas cores passam nos testes WCAG AA e AAA, tanto para textos normais quanto grandes.
Se você deseja criar um site visualmente acessível, é sempre uma boa ideia evitar o uso de cores apenas para transmitir funcionalidade ou significado. Os ícones que mudam de cor com base em seu estado atual são exemplos típicos disso.
Se for possível, sempre crie pistas visuais adicionais que ajudem as pessoas que veem as cores de maneira diferente a compreender a funcionalidade.
Nunca se esqueça de prestar especial atenção ao contraste de cores dos botões, links e menus, pois são os meios de navegação do seu site. Se os usuários não conseguirem navegar facilmente em seu site, você os perderá rapidamente. As cores acessíveis para botões de call to action também são cruciais para boas taxas de conversão.
É uma boa prática de fluxo de trabalho testar a taxa de contraste de cores o mais cedo possível no processo de design, pois será difícil persuadir seu cliente a alterar o esquema de cores do site posteriormente no processo de design.
Boas vendas!
Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.
Postar um comentário