Acessibilidade: preparar textos e gráficos
8 min
Neste artigo
- Nossas recomendações
- Encontrar códigos de cores
- Ajustar o contraste das cores
- Revisar manualmente o contraste de cores
Os visitantes com condições ou dificuldades visuais podem achar difícil distinguir 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.
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, placeholders, 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 criador de sites que esteja usando (Editor do Wix Studio ou Editor Wix).
Editor Wix
Editor do Wix Studio
- Selecione o elemento relevante (texto, faixa de background, caixa contêiner, etc.) e acesse o Seletor de cores.
- Passe o mouse sobre qualquer uma das cores para ver seu 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 no seu editor para encontrar e ajustar qualquer contraste baixo de cores em um site. Não importa se você está usando o Editor Wix ou o Editor do Wix Studio. O assistente verifica seu site em busca de possíveis problemas de acessibilidade e destaca maneiras de melhorar a acessibilidade do site.
Com a maioria dos elementos, você pode fazer alterações dentro do próprio assistente. No entanto, alguns elementos (por exemplo: elementos do app) não estão totalmente integrados com o assistente no momento e precisam ser revisados ou ajustados manualmente.
Editor Wix
Editor do Wix Studio
- Vá para o seu editor
- Clique em Configurações na parte superior do seu editor.
- Selecione Acessibilidade.
- Selecione Verificar site.
- Clique na aba Problemas identificados.
- Selecione uma página da lista.
- Clique em Melhore o contraste de cores.
- Selecione o elemento relevante e ajuste-o conforme necessário:
Ajustar o contraste no assistente
Ajustar manualmente o contraste
.
Revisar manualmente o contraste de cores
Pode haver um contraste de cores no site que o assistente de acessibilidade não identifica. Recomendamos revisar manualmente o conteúdo do site com o Verificador de contraste do Wix e ajustar o contraste conforme necessário.
Você pode instalar e usar o Verificador de contraste do seu criador de sites (Editor Wix ou Editor do Wix Studio). Se os elementos não atenderem aos requisitos, você também pode testar novas proporções com o seletor.
Editor Wix
Editor do Wix Studio
Para verificar o contraste:
- (Apenas na primeira vez) Instale o add-on no seu editor.
- Clique em Ferramentas
no canto superior direito do seu editor. - Clique em Add-Ons do Editor.
- Clique em Verificador de contraste.
- Use as caixas de cores para selecionar a cor do elemento e do background no verificador ou cole os códigos de cores relevantes.
Para ajustar o contraste:
- Ajuste as cores do primeiro plano e do background no Verificador de contraste para a proporção recomendada.
- Copie os códigos das cores no canto inferior direito do seletor.
- Selecione o elemento relevante no seu editor.
- Abra o seletor de cores nas configurações de design do elemento.
- Clique em Adicionar ao lado de Minhas cores.
- Cole o código copiado no campo.
Dica:
A forma como você abre as configurações de design depende do elemento, mas geralmente você pode encontrá-las ao selecionar o elemento e clicar no ícone Design 
.
.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 para continuar melhorando seu site e deixá-lo mais acessível.
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
