Usando o contraste de cor alta para um design mais acessível
Uma alta taxa de rejeição é freqüentemente causada pela baixa acessibilidade visual de um site. Quando as fontes são muito pequenas ou dificilmente legíveis, quando há muitas distrações ou espaços em branco insuficientes, muitas pessoas saia do site sem pensar duas vezes.
Uma das razões mais freqüentes para o abandono precoce é o mal selecionado esquemas de cores que diminuem a legibilidade do conteúdo.
De acordo com as estatísticas da OMS, existem cerca de 285 milhões de deficientes visuais em todo o mundo, muitos dos quais são parcial ou totalmente daltônicos. Pessoas com deficiência visual vêem as cores de maneira diferente, evitando contraste de baixa cor em nossos projetos é inevitável se queremos fornecer aos nossos clientes um site acessível e fácil de usar.
Padrões da Web para contraste de cores
Relação de contraste de cor 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 do plano de fundo..
As cores podem contrastar de muitas maneiras diferentes, como em matiz, valor e saturação. A taxa de contraste de cores é calculada por uma fórmula fornecida pela W3C, a principal organização internacional de padrões para a World Wide Web..
Pode demorar um valor entre 1: 1 (sem 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).
As mais recentes Diretrizes de Acessibilidade ao Conteúdo da Web (WCAG) 2.0 da W3C fornecem aos desenvolvedores da Web e aos criadores de conteúdo benchmarks para o valor mínimo (Nível AA) e o valor aprimorado (Nível AAA) da taxa de contraste de cores aceitável.
O nível AA exige pelo menos Relação de 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 cores mais baixo.
Se você quiser alcançar o nível AAA, que é o nível aprimorado, você precisa projetar seu esquema de cores com um cuidado maior, já que isso requer pelo menos Taxa de contraste de 7: 1 para texto normal, e 4,5: 1 para grandes. Se um texto fizer parte de um logótipo ou de uma marca, não existe um requisito mínimo de contraste de cor ao nível das WCAG.
Só podemos chamar um site visualmente acessível se o a relação de contraste de cores entre cada objeto em primeiro plano e seu fundo atinge pelo menos o nível AA.
Benefícios da alta taxa de contraste de cor
Ao garantir uma melhor legibilidade, você não só envolve usuários com deficiência visual, mas também pessoas que lêem seu conteúdo em telas pequenas como em um smartphone ou smartwatch, entre más condições de iluminação, e em monitores de baixa qualidade.
As pessoas também lêem mais rápido quando há um contraste maior entre o texto e o plano de fundo, portanto, é mais provável que demore mais tempo para que elas fiquem entediadas com o conteúdo do site.
Se você tem receio de que aplicar uma taxa de contraste maior terá um impacto negativo na estética do seu projeto, você precisa verificar o projeto da Web Contrast Rebellion que prova, com exemplos da vida real, que manter as regras de alto contraste ainda pode resultar em designs atraentes e legais.
Aplicativos para verificar o contraste de cores
Existem muitas ferramentas gratuitas em toda a web que podem ajudar os projetistas a verificar a taxa de contraste de cores do site..
A maneira mais fácil de testar seu design para contraste de cores é escolher as cores principais com o Photoshop ou uma extensão de navegador adequada como esta para o Firefox e copiar os valores em um dos aplicativos abaixo.
A coisa mais importante a lembrar é que você sempre precisa comparar a cor do primeiro plano, como a cor do texto, com a área circundante (Cor de fundo).
1. Verificador de contraste de cor WebAim
O WebAim (Web Accessibility In Mind) é uma organização que promove acessibilidade na Web e oferece aos desenvolvedores um verificador de contraste de cores simples, mas confiável, entre outras ferramentas de acessibilidade, como o Wave, um aplicativo de avaliação de acessibilidade geral que pode ajudá-lo avaliar rapidamente os problemas de acessibilidade do seu site.
O Color Contrast Checker do WebAim informa se suas cores passarem nos testes AAAG AAAG e AAA, tanto para textos normais como grandes.
2. Snook Color Contrast Check
Jonathan Snook, atualmente trabalhando como desenvolvedor líder de front-end no Shopify, hospeda sua prática ferramenta de verificação de contraste de cores há mais de uma década. O aplicativo de Snook permite que você alterar os valores HSL e RGB da cor do primeiro plano e do fundo, um por um, usando controles deslizantes de alcance conveniente até chegar a um resultado que seja compatível com os benchmarks das WCAG 2.0.
CheckMyColours
CheckMyColours criado por Giovanni Scala permite que você verifique a taxa de contraste de cores de todas as combinações de cores de primeiro plano em um site ao vivo.
Calcula relação de contraste de luminosidade, diferença de brilho, e diferença de cor, e fornece um relatório completo sobre os resultados. O relatório da CheckMyColours pode facilitar significativamente sua compreensão de como você pode melhorar a acessibilidade visual do seu site.
Designer de esquema de cores
O Color Scheme Designer não é particularmente um verificador de contraste de cores, mas uma ferramenta para projetar esquemas de cores completos.
Nós o incluímos nesta coleção, porque ele tem um recurso que permite ver como seu esquema de cores é percebido por pessoas com diferentes tipos de deficiência visual. Você pode testar suas cores para cegueira total, protanopia, deuteranopia e muitas outras deficiências visuais. O aplicativo tem uma versão mais nova chamada Paletton, que possibilita até mesmo uma simulação de visão mais sofisticada (você também pode testar coisas como um display de LED ruim ou uma tela CRT fraca)..
O W3C também oferece uma enorme Lista de Ferramentas de Avaliação de Acessibilidade na Web, onde você pode encontrar muitas outras ferramentas de contraste de cores, como essa útil Roda de Cores de Acessibilidade..
Dicas para criar sites visualmente acessíveis
Se você quiser criar um site visualmente acessível, é sempre uma boa ideia evite usar a cor sozinho para transmitir funcionalidade ou significado. Os ícones que mudam de cor com base no estado atual são exemplos típicos desse.
Se for possível, sempre projetar sugestões visuais adicionais que ajudam as pessoas que vêem as cores de maneira diferente na compreensão da funcionalidade.
Nunca esqueça de preste atenção extra ao contraste das cores dos botões, links e menus, como eles são os meios de navegação em seu site. Se os usuários não puderem navegar facilmente em seu site, você os perderá rapidamente. Cores acessíveis para botões de call to action são também crucial 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 o cliente a alterar o esquema de cores do site posteriormente no processo de design..
Agora leia: Abordagem Prática para Escolher o Esquema de Cores do Site
