Acessibilidade: preparar textos e gráficos
3 min de leitura
Os visitantes com dificuldades visuais podem ter dificuldade em perceber a diferença entre o primeiro plano e o background das páginas de um site. Portanto, sugerimos verificar e ajustar o contraste de cores em seu site conforme necessário.
Neste artigo, confira:
Nossas recomendações
A fim de aumentar a acessibilidade para visitantes com necessidades visuais diferentes, recomendamos o seguinte:
- Configurar o contraste de cores de texto e background para 4.5:1 para textos normais e 3:1 para textos maiores.
- Raio de contraste de pelo menos 3:1 para componentes gráficos e de interface (como margem de formulários, variantes, etc).
- Nível AAA exige um raio de contraste de pelo menos 7:1 para textos normais e 4.5:1 para textos maiores.
É importante saber:
Um texto grande é definido como acima de 14 pontos (aproximadamente 18 px) e negrito ou 18 pontos (aproximadamente 24 px).
Encontrar códigos de cores
Você pode encontrar os códigos de cores em qualquer construtor de sites que estiver usando (Editor do Wix Studio, Editor Wix, etc.).
Editor do Wix Studio
Editor Wix
ADI
- Selecione o elemento relevante (texto, background de faixa, caixa contêiner, etc.).
- Clique no ícone Abrir inspetor
no canto superior direito do editor. - Clique na aba Design
. - Clique na caixa de cores para abrir o seletor de cores.
- Passe o mouse sobre a cor para ver o código.
Testando contrastes de cores:
Existe uma série de sites e plug-ins de navegadores, como o Contrast Checker, que testam o contraste das cores comparando a cor do texto com a cor do background (utilizando os códigos das cores). Para verificar o contraste da cor do texto sobre uma imagem de background, recomendamos o uso do Colour Contrast Analyser, que permite escolher a cor do background e testar.
Ajustar o contraste das cores
Você pode usar o Assistente de Acessibilidade para encontrar e ajustar qualquer baixo contraste de cores nas páginas do seu site. O Assistente é uma ferramenta que analisa seu site em busca de possíveis problemas de acessibilidade e permite que você ative configurações avançadas para continuar melhorando a acessibilidade do seu site.
É importante saber que:
O Assistente só está disponível no Editor Wix. Vote para adicionar o Assistente de Acessibilidade ao Editor do Wix Studio
Para ajustar o contraste:
- Selecione Configurações.
- Selecione Acessibilidade.
- Selecione Verificar site.
- Selecione cartões chamados Contraste de cores.
- Use o slider para ajustar a cor do texto e do background.
- Selecione Aplicar Alterações.
Exibindo gráficos ou dados no seu site?
O alto contraste de cores é uma ótima maneira de exibir dados em seu site. No entanto, também recomendamos o uso de outros indicadores (como texturas e padrões) para diferenciar as informações.
Próximo passo:
Confira a Checklist de acessibilidade do site para continuar melhorando seu site e deixá-lo mais acessível.
Esse artigo foi útil?
|