Acessibilidade

Ao projetar os componentes ou telas com as cores do Design Syste, é essencial considerar a acessibilidade nas cores para torná-lo inclusivo para todos os usuários. Uma maneira importante de fazer isso é seguir as diretrizes da WCAG (Web Content Accessibility Guidelines).

A WCAG define critérios de contraste de cores para garantir que o conteúdo seja legível e visível para pessoas com dificuldades visuais. Esses critérios são divididos em três níveis: A, AA e AAA.

• Nível A: É o requisito mínimo de acessibilidade. Certifique-se de que haja um contraste adequado entre o texto e o plano de fundo para garantir uma leitura clara.
• Nível AA: É um padrão mais alto de acessibilidade. Recomendado para atender às necessidades da maioria dos usuários, é importante garantir um contraste suficiente entre o texto e o plano de fundo.
• Nível AAA: É o mais alto nível de acessibilidade. Recomendado para atender às necessidades visuais mais específicas, requer um contraste ainda maior entre o texto e o plano de fundo.

Aqui estão algumas dicas para garantir um bom contraste:

1. Verifique o contraste: Certifique-se de que o texto e o plano de fundo tenham uma diferença de cor significativa para facilitar a leitura.
2. Considere o tamanho do texto: Quanto menor o texto, maior deve ser o contraste para uma leitura clara.
3. Elementos interativos: Verifique se botões, links e outros elementos interativos possuem um contraste adequado em relação ao plano de fundo.

Para garantir isso durante a construção do protótipo você pode utilizar plugins para isso como por exemplo o Contraste, á seguir alguns exemplos:

Diretrizes

Cores Primárias: