As cores da sua marca têm um forte impacto emocional, mas como elas aparecem para os visitantes do site com visão parcial, daltônicos ou que enfrentam fatores ambientais que dificultam a visibilidade?
Os níveis de cor e contraste são essenciais para a comunicação, e acertar esses detalhes é fundamental para o designer preocupado com a acessibilidade.
Os distúrbios de percepção de cores são mais comuns do que você imagina. Portanto, neste post falaremos sobre como pessoas com deficiências como baixa visão, dislexia e daltonismo interagem com a web.
Conteúdo
Como posso usar um verificador de cores para melhorar a acessibilidade do meu site?
Esta seção é bastante simples, embora exija algum esforço. Você precisará utilizar a ferramenta online Contrast Checker do WebAIM. WebAIM é uma organização sem fins lucrativos sediada na Universidade Estadual de Utah com a missão de melhorar a acessibilidade da web em todo o mundo.
Basta inserir a cor de primeiro plano (por exemplo, a cor do texto ou dos ícones) e a cor de fundo como valores hexadecimais (também conhecidos como valores hexadecimais), conforme especificado em HTML ou CSS, e o verificador de taxa de contraste informará se a proporção é suficiente. Lembre-se de que a taxa de contraste mínima que você deve buscar é de 4.5 para 1. O texto preto sobre fundo branco tem uma taxa de contraste de 21 para 1, portanto você tem bastante margem de manobra.
5 ferramentas para criar uma paleta de cores da Web que todos possam ver
1. Verificador de contraste de cores WebAIM
Insira as cores hexadecimais para o primeiro plano e o plano de fundo. A saída mostra a conformidade AA e AAA para texto normal e grande, junto com um exemplo de frase. Os controles deslizantes permitem mudar as coisas até encontrar uma boa combinação.
Pontos fortes
- Ferramenta simples com uma interface agradável aos olhos.
- Esta é uma ferramenta simples e agradável para iniciantes, e não apenas para designers.
Fraquezas
- Não é possível comparar mais de duas cores, apenas duas.
- O controle deslizante de luminosidade não é uma maneira muito boa de escolher cores. É difícil dizer o quão atraentes as cores são nesta tela simples.
2. Verificador de contraste para WCAG
Insira as cores hexadecimais para o primeiro plano e o plano de fundo. Mostra conformidade AA e AAA para texto normal e grande próximo a uma amostra de texto Lorem Ipsum. Você também pode enviar uma foto. Uma paleta de 9 cores é escolhida automaticamente para você. Em seguida, você pode comparar cada cor como a cor do primeiro plano ou do plano de fundo.
Pontos fortes
- Ferramenta simples com interface amigável.
- Ter a capacidade de criar paletas a partir de imagens.
Fraquezas
- A paleta é escolhida automaticamente e você pode alterá-la ainda mais com o seletor de cores, mas essas alterações não são salvas na paleta. Deve-se copiar e colar as informações em um novo documento.
3. Cubo de cores
Insira as cores da paleta, cada uma em sua própria linha. A saída mostra letras de amostra com taxas de contraste comparadas aos padrões AA para fontes pequenas e grandes. Três colunas mostram contraste com um fundo branco, um fundo preto e um conjunto de cores da marca que são as “Mais legíveis disponíveis”.
Pontos fortes
- Fácil de ver A interface do usuário (IU) é bem organizada e o status de aprovação/reprovação/borda é fácil de ver.
Fraquezas
- Não atende aos padrões estabelecidos pela AAA.
- Não faz todas as combinações de cores possíveis e, a princípio, não fica claro se esse é o caso.
4.) Grade de contraste de oito formas
Insira as cores da paleta. Além disso, você pode dar um nome a cada cor. O aplicativo cria uma tabela com todas as combinações possíveis de cores. Existem três tamanhos de ladrilhos. Existem dicas visuais para aprovação/reprovação/borda AA e AAA e taxa de contraste efetiva. Colunas e linhas podem ser movidas no aplicativo arrastando e soltando. Os dados tabulares podem ser salvos, exportados e compartilhados.
Pontos fortes
- Existem muitos recursos úteis que ajudam na análise de paletas inteiras.
Fraquezas
- É mais difícil de aprender do que outras ferramentas mais fáceis de usar.
- Não é a maneira certa de comparar apenas duas cores.
- Não é bom para descobrir como as cores combinam.
- Um pouco complicado de se olhar, mas há muitas informações sendo mostradas.
5. Cor segura
Digite a cor de fundo. Escolha a família, o tamanho e a espessura da fonte. Escolha AA ou AAA como padrão. Mostra a cor selecionada e seu código hexadecimal, bem como uma amostra e a taxa de contraste efetiva. As grandes miniaturas de possíveis cores de primeiro plano com contraste suficiente são a melhor parte. Você pode escolher olhar para todos eles ou apenas para determinados grupos de cores (verdes, azuis, roxos, etc.)
Pontos fortes
- Com uma interface agradável aos olhos, é fácil encontrar uma combinação de cores que pareça boa e funcione bem.
- Esta é uma ferramenta útil se você ainda não possui uma paleta de cores de marca ou se deseja adicionar uma que já possui para a web.
Fraquezas
- Você só pode comparar as cores do primeiro plano e do plano de fundo por vez.
- Você deve copiar e colar as cores em um documento separado se quiser salvá-las.
- Saia e faça coisas para todos!
Depois de saber como usar essas ferramentas, você descobrirá que precisa de mais de uma para um projeto. Talvez o Color Cube seja a melhor maneira de mostrar ao cliente o que você aprendeu sobre acessibilidade. Talvez você use a ferramenta WebAIM o tempo todo para fazer verificações rápidas.
Conclusão
Usando as dicas, orientações e ferramentas de que acabamos de falar, você pode dar ao seu site cores e rótulos de alto contraste. Isso tornará mais fácil para pessoas com baixa visão, dislexia e daltonismo lerem seu site e conteúdo. Não se surpreenda se o seu público em geral também achar mais fácil usar o seu site.
