Minhas cores são acessíveis?

Neste artigo, você entenderá a acessibilidade de cores e as ferramentas que o ajudarão a tomar boas decisões sobre contraste de cores.

Índice

• O que é contraste de cores
• O que é acessibilidade de cores
• Como melhorar a acessibilidade das cores
• Ferramentas para verificar manualmente a acessibilidade das cores

O contraste de cores é medido como uma proporção de duas cores. A diferença de “luminância” ou brilho de duas cores é chamada de contraste de cor.

Estamos principalmente preocupados com a distinção entre o conteúdo principal e seu plano de fundo em um aplicativo da Web típico (a diferença dos textos ou botões no plano de fundo). Texto, ícones, links, elementos de formulário, botões e outros controles personalizados são componentes comuns do conteúdo principal

Portanto, se o contraste for muito baixo, muitos usuários não conseguirão distinguir entre o conteúdo do primeiro plano e o conteúdo do plano de fundo.

Ao projetar, você precisa entender que alguma seção específica do seu usuário pode ter defeitos oculares, incluindo daltônicos ou cegos que usam brail ou assistência de áudio (que traz o uso de texto alternativo em imagens.

Portanto, o tópico de acessibilidade é importante para o design, pois tudo o que você projeta deve ser inclusivo o suficiente para acomodar todos com um defeito. Como será rude/muito injusto fazer um App ou site apenas para pessoas com visão perfeita.

O daltonismo não significa apenas que as pessoas veem apenas em preto e branco, mais de 99% das pessoas daltônicas podem ver cores. Existem diferentes tipos de daltonismo;

• Deuteromália; faz tudo parecer desbotado
• Protanopia; que fazem as coisas parecerem verdes
• Esverdeado; fazer as coisas terem tons de rosa
• Monocromacia; sofrem de daltonismo total, as coisas são monocromáticas

https://www.boredpanda.com/different-types-color-blindness-photos/?utm_source=uxdesign&utm_medium=referral&utm_campaign=organic

O que é acessibilidade de cores

A WCAG{website color accessguideline} é considerada a referência para a acessibilidade de sites criada pelo consórcio world wide web (w3c). Este é essencialmente o padrão ouro para as melhores práticas de acessibilidade na web.

Os padrões WCAG têm diretrizes 12–13. As diretrizes são organizadas sob 4 princípios: perceptível, operável, compreensível e robusto .

Para cada diretriz, existem critérios de sucesso testáveis . Os critérios de sucesso estão em três níveis: A, AA e AAA .

Os critérios de sucesso são os que determinam a “conformidade” das WCAG. Em outras palavras, para atender às WCAG, o conteúdo deve atender aos critérios de sucesso. Os detalhes estão na seção Conformidade das WCAG .

Consulte Visão geral das Diretrizes de Acessibilidade de Conteúdo da Web (WCAG)

Além de ser uma prática recomendada ética, o não cumprimento dos requisitos regulamentares de acessibilidade pode resultar em consequências legais.

Em 2017, os demandantes entraram com pelo menos 814 processos federais relativos a sites supostamente inacessíveis, incluindo várias ações coletivas.

Seção 508 da Lei de Reabilitação de 1973;

Declara que, quando as agências desenvolvem, adquirem ou mantêm tecnologias de informação e comunicação (TIC), elas são acessíveis a pessoas com deficiência. .

O W3C descreve suas diretrizes para acessibilidade na web dentro do WCAG 2.1 .

Como melhorar a acessibilidade das cores

1. Adicione contraste suficiente:

2. Usando as ferramentas certas:

Como você verifica isso, você pode perguntar, as ferramentas a seguir podem ser de grande ajuda para acessar e ajustar o contraste de cores do plano de fundo e do conteúdo principal

• Ilusório
• A11y para os usuários do software de código aberto Figma; a11y é um excelente plug-in para o plug-in de acessibilidade de cores Figma.
• Lighthouse, que é uma extensão cromada para detectar o que há de errado com o contraste de cores do site.
• https://colourcontrast.cc/leva em consideração tamanho e cor do texto

Não confie em cores apenas para passar mensagens eficazes, use ícones corretos também para indicar claramente o que está acontecendo como em estados de erro.

A imagem abaixo é uma representação de imagem que explica a mistura de cores e boa iconografia para passar uma mensagem.

3. Documente e socialize o sistema de cores.

Um sistema de design ajudará a criar referências quando necessário para que todos tenham clareza sobre o uso, o que reduz a confusão.

https://www.w3.org/TR/WCAG21/para fornecer a você mais detalhes sobre a acessibilidade de cores.

Para obter detalhes completos, Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) 2.1 (w3.org)