Support Centre

Usando o contraste de cores para acessibilidade

Renée Meloche
Renée Meloche
  • Atualizado

O contraste e a cor desempenham um papel importante para saber se o seu design atenderá aos padrões de acessibilidade.

Claro, você deseja escolher cores para seu design que  fiquem bem juntas  e  criem interesse visual  , mas também deseja garantir que os leitores com deficiências ou deficiências visuais possam  ver e entender seu design  .

Como faço para escolher as cores certas?

Ao escolher as cores para o seu projeto, você quer ter certeza de que elas

  • Complementam  um ao outro

  • Conte uma  história visual  que  se conecte com seus dados

  • Use cores que  contrastem  o suficiente para garantir a acessibilidade

Existem  muitos recursos  para ajudá-lo a começar a escolher as cores para o seu design, incluindo  rodas de cores  básicas como a abaixo, bem como aquelas que mostram cores monocromáticas, análogas, complementares e contrastantes:

Um conjunto de três rodas de cores.  O primeiro, rotulado como 'Primário', mostra as cores vermelho, azul e amarelo em suas respectivas posições na roda.  A segunda roda, rotulada como 'Secundária', mostra as cores roxa, laranja e verde.  A terceira roda, 'Terciário', mostra as cores magenta, vermelhão, âmbar, verde-amarelado, azul-petróleo e violeta.
 

Como crio designs com contraste acessível?

O contraste é determinado pelo brilho ou vibração de uma cor ou elemento quando comparado a outro elemento.

O texto preto em um fundo branco é  de alto contraste  . Esse mesmo texto em um fundo branco é muito mais difícil de ver se for uma cor mais clara, como o amarelo, tornando-o de  baixo contraste  .

Duas amostras de texto em um fundo branco;  cada um diz 'Texto de exemplo' na mesma face, tamanho e peso da fonte serifada.  À esquerda, o texto é preto e de fácil leitura.  À direita, o texto é amarelo claro e difícil de ver contra o fundo branco.

Os elementos de baixo contraste podem ser difíceis de ver e o texto de baixo contraste pode ser difícil de ler. Uma alta taxa de contraste garante que o texto seja legível e que os elementos não textuais sejam perceptíveis.

Leitores com deficiência de visibilidade terão dificuldade especial em ler ou ver elementos de baixo contraste, mas isso também afeta a legibilidade para outras pessoas.

Dicas para criar contraste

  • Use cores escuras em um fundo claro ou cores claras em um fundo escuro

  • Use padrões sólidos no plano de fundo para tornar mais visíveis quaisquer elementos sobrepostos

  • Execute  o verificador de acessibilidade da Venngage  para verificar as taxas de contraste e ver sugestões

Quais ferramentas no Venngage Editor podem me ajudar a ajustar o contraste?

Disponível nos seguintes planos de assinatura da Venngage: Grátis, Premium, Empresarial e Enterprise.

O verificador de acessibilidade  da Venngage é a maneira mais rápida de verificar as taxas de contraste em seu projeto e ver como ajustá-las para torná-las mais nítidas.

Selecione "Arquivo" no menu de navegação superior  (acima da barra de ferramentas superior) e selecione "Verificar acessibilidade" para abrir o painel Acessibilidade.

Os elementos em seu design que não atendem  aos requisitos de contraste das Diretrizes de acessibilidade de conteúdo da Web (WCAG)  são listados no cabeçalho "Contraste de cores".

A exibição do painel direito do Verificador de acessibilidade da Venngage, com a seção "Contraste de cores" não recolhida.  O texto no design (sem imagem) é destacado como tendo contraste de cor insuficiente e um botão de atualização para redigitalizar o documento quando o usuário tiver editado as cores para ajustar o contraste.

Selecione um elemento individual  em seu design, como um ícone ou caixa de texto, para ver se ele atende aos requisitos de contraste.

 

VENNGAGE LOGO

Você está curioso para se inscrever? Confira nossos planos.

 

Comece a projetar!

Esse artigo foi útil?

Usuários que acharam isso útil: 6 de 11

Tem mais dúvidas? Envie uma solicitação