header-logo
Primeiros passosConfira como você pode usar o Wix para criar seu site e seu negócio. Personalize seu site usando templates ou contrate um profissional para criar ou aprimorar sua presença online.
Crie o seu siteAprenda a usar o Editor Wix e a gerenciar o conteúdo de seu site. Descubra como proteger a privacidade de seus visitantes e tornar seu site acessível.
Conta e faturamentoRevise as configurações da sua conta, gerencie suas assinaturas e planos Premium e entenda suas faturas.
Use os apps mobile do WixUse o app Wix Owner para administrar seu negócio com eficiência, interagir com seus visitantes e criar uma comunidade.
Conecte um domínioEntenda como comprar, conectar ou transferir um domínio e como manter os dados do seu site seguros.
Gerencie o seu negócioEncontre as ferramentas certas para criar e expandir seus negócios: aceite pagamentos, analise suas estatísticas, conecte-se com visitantes e muito mais.
Promova o seu siteConfira como promover seu site nos motores de busca, enviar campanhas de email e veicular anúncios pagos.
Wix Studio, Parceiros e empresasTire o máximo proveito da sua conta do Wix Studio, Parceiro Wix ou Wix Empresarial, para que você possa expandir seus negócios.
AjudaObtenha informações sobre como resolver os problemas técnicos e de desempenho do seu site. Além disso, acompanhe os próximos recursos em nosso roadmap de produtos.
placeholder-preview-image
Wix LearnDomine novas habilidades com nossos cursos e tutoriais.
Blog do WixConfira nossas dicas de web design, marketing e mais.
Learning Hub de SEOAumente o tráfego orgânico vindo dos motores de busca.
Website developmentDesenvolva um site único com a nossa plataforma full-stack.
Contrate um profissionalAlcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image
  1. Início
  2. Crie o seu site
  3. Crie um site acessível
  4. Torne o seu site acessível
  5. Acessibilidade: preparar textos e gráficos

Acessibilidade: preparar textos e gráficos

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 estiver usando (Editor Wix, Editor do Wix Studio ou Editor do Wix Harmony).
  1. Selecione o elemento relevante (texto, faixa de background, caixa contêiner, etc.) e acesse o Seletor de cores.
  2. Passe o mouse sobre qualquer uma das cores para ver seu código.
O seletor de cores no Editor Wix. O cursor está passando sobre uma cor e o código está destacado no painel.
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, independentemente do criador de sites que você estiver usando. 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.
  1. Vá para o seu editor
  2. Clique em Configurações na parte superior do seu editor.
  3. Selecione Acessibilidade.
  4. Selecione Verificar site.
  5. Clique na aba Problemas identificados.
  6. Selecione uma página da lista.
  7. Clique em Melhore o contraste de cores.
  8. Selecione o elemento relevante e ajuste-o conforme necessário:

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.

Para verificar o contraste:

  1. (Apenas na primeira vez) Instale o add-on no seu editor.
  2. Clique em Ferramentas  no canto superior direito do seu editor.
  3. Clique em Add-Ons do Editor. 
  4. Clique em Verificador de contraste. 
  5. Use as caixas de cores para selecionar a cor do elemento e do background no verificador ou cole os códigos de cores relevantes.
O verificador de contraste no Editor Wix. Uma caixa de cores foi selecionada, abrindo o seletor de cores. O contraste falhou.

Para ajustar o contraste:

  1. Ajuste as cores do primeiro plano e do background no Verificador de contraste para a proporção recomendada.
  2. Copie os códigos das cores no canto inferior direito do seletor.
  3. Selecione o elemento relevante no seu editor.
  4. Abra o seletor de cores nas configurações de design do elemento.
  5. Clique em Adicionar ao lado de Minhas cores.
  6. Cole o código copiado no campo.
Uma nova cor foi selecionada no seletor e o contraste foi aceito. O código da cor está destacado.
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.

Esse artigo foi útil?

|
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Começar
Neste artigo
  • Nossas recomendações
  • Encontrar códigos de cores
  • Ajustar o contraste das cores
  • Revisar manualmente o contraste de cores

Esse artigo foi útil?

|