Acessibilidade é a capacidade de acessar o webapp/site por uma ampla gama de público, incluindo uma variedade de deficiências.

• Se você trabalha como desenvolvedor de software ou está apenas começando sua carreira como desenvolvedor na área de desenvolvimento da Web, tenha certeza de que vai se familiarizar muito com essa terminologia.
• Isso pode parecer inútil a princípio como iniciante, mas à medida que você obtém insights e experiência como desenvolvedor da Web, descobrirá que esse é um dos fatores mais importantes no desenvolvimento de um site.

Por enquanto, vamos nos concentrar no que é contraste de cores e como corrigir isso.

Uma breve introdução sobre os critérios de sucesso WCAG.

1. Bem, existem certas regras/padrões para fazer um bom aplicativo empresarial chamado regras WCAG que você pode consultar aqui em detalhes.
2. A taxa de contraste de cores entre o conteúdo do plano de fundo e do primeiro plano (ou seja, geralmente o texto) deve ser grande o suficiente para garantir a legibilidade (o usuário deve ser capaz de ler o texto com nenhuma ou menos dificuldade).
3. Geralmente, espera-se que um site siga os critérios 1.4.3 Contraste mínimo. mas criar um site completo exige que você siga os critérios 1.4.6 de contraste aprimorado. também.

A melhor ferramenta para verificar o contraste de cores de um site é usar o Siteimprove Accessibility Checker . A versão gratuita é mais do que suficiente.

1. Execute esta extensão clicando no ícone da barra de extensão enquanto seu site é aberto.

3. Agora clique no título azul → e ele deve destacar o elemento específico onde está falhando. (Devo criar outro artigo detalhado sobre como usar o siteimprove mais tarde.)

4. E a partir daí você pode pesquisar o que e por que está falhando com os valores de taxa de contraste adequados.

Como analisar e corrigir o contraste de cores

1. Em primeiro lugar, abra a guia de ferramentas do desenvolvedor (se você estiver no Chrome) clicando com o botão direito do mouse-> inspecionar ou CTRL+SHIFT+I. E clique neste pequeno ícone de seta na parte superior da guia de ferramentas de desenvolvimento e passe o mouse sobre o elemento destacado na página.

3. E para corrigir isso em tempo real, você pode apenas inspecionar esse elemento e alterar seu código de cores (que geralmente é código HEX principalmente) pegando o controle deslizante de cores como mostrei no GIF abaixo.

4. Observe como a taxa de contraste mudou de 1,99 para 4,2✅ e 7,01✅✅?

5. Único ✅ indica que o critério mínimo foi atendido e Duplo ✅✅ indica que o critério aprimorado foi atendido. (Sempre marque duas vezes para aplicativos corporativos).

6. Outra coisa que você pode fazer é usar sites externos para obter a proporção correta em tempo real usando um site semelhante a este .

Lá, você acabou de aprender o que é critério de contraste de cores e como corrigir isso. E, ao fazer isso, você deu um passo adiante em sua experiência de desenvolvedor. Deixe um like se você achou isso útil.