Back to the original French page Read this page in Italian by Google Translation Read this page in Portuguese by Google Translation Read this page in English by Google Translation Read this page in German by Google Translation Read this page in Spanish by Google Translation Read this page in Arabic by Google Translation Read this page in Hebrew by Google Translation

Crie imagens disponíveis: cor e contraste

Ir para o início do conteúdo sem usar a barra de consulta e compartilhamento Como usar a barra de consulta e compartilhamento Ouça o conteúdo principal desta página
Imprimir Imprimir o conteúdo principal desta página Enviar Enviar e-mail o conteúdo principal desta página Ação Compartilhar esta página sobre TwitThis Compartilhar esta página no Facebook Compartilhar esta página sobre Wikio Compartilhar esta página no Google Compartilhar esta página no LinkedIn Compartilhar esta página no Digg Compartilhar esta página em del.icio.us Compartilhar esta página sobre Netvibes

Atenção: A versão original deste documento é criar as imagens acessíveis: cor e contraste . Esta tradução francesa foi feita por Ideose como parte de um acordo entre WebAIM e Ideose .

Nota: Consulte a página documentos sobre acessibilidade web para uma lista de todos os documentos traduzidos. Outros recursos de acessibilidade web também estão listados no portal digitais acessíveis .

Resumo

  1. Página 1: Introdução
  2. Página 2: Imagens para melhorar a compreensão
  3. 3: Cor e contraste
    1. Cor
    2. Contraste
  4. Página 4: Textos em imagens
  5. Página 5: Os gráficos que causam espasmos
  6. Página 6: Criando alternativas bom texto (atributo alt )
  7. Página 7: longas descrições

Cor

A regra de acessibilidade é garantir que você não usar a cor apenas para transmitir informações. Esta frase é um pouco nebuloso para algumas pessoas. O que isto significa para transmitir uma mensagem apenas com a cor? Vamos olhar para o mapa do metro de Londres:

desenho colorido do metro de Londres

Uma pessoa que pode ver as cores não tem dificuldade em distinguir as linhas vermelhas, azul escuro, azul claro, etc. Uma pessoa não pode ver a cor, porque é cor-cego ou com baixa visão, não será provavelmente capaz de distinguir as linhas de metrô diferentes com a mesma facilidade. Alguém que é cego não pode vê-los em tudo. Olhe para essa imagem em preto e branco:

uma versão em preto e branco do mapa cor do metro de Londres

Como você sabe que ônibus pegar para chegar a Waterloo? Antes de prosseguir, você precisa saber que as pessoas que são cegas cor pode ver as cores (exceto em casos raros), de modo que a escala de cinza desenho acima não é representante de daltonismo . É simplesmente um exemplo de uma imagem em que a cor é usada para transmitir informação. Quando as cores são removidas, as diferentes linhas de metrô são quase indistinguíveis.

Considere abaixo um exemplo de como a contornar este problema potencial. WebAIM treinamento CD usa abas coloridas para designar as categorias de links na barra de navegação superior.

screenshot de guias de página da web em UEN alguns dos quais são marrom, branco ou escuro bleux dependendo da categoria

Se uma cor mais clara foi utilizado para os recursos de fundo abas, o texto teria sido difícil de ler.

screenshot do centro de formação com toda a cor removida

O método utilizado no treinamento no local WebAIM para evitar a confusão era colocar os títulos da categoria entre parênteses acima das abas na mesma categoria. Ganchos ordenou guias com base em workshops e recursos. Mesmo quando não há nenhuma cor em tudo nesta página, a informação é sempre acessível.

Teste suas páginas da web para garantir que nenhuma informação é perdida quando você remove as cores. Você pode fazer isso por imprimir a página com uma impressora preto e branco (certifique-se de suas preferências de impressão são definidas para imprimir cores de fundo). Você também pode fazê-lo, como fizemos nesta página, tomar um screenshot da página, em seguida, eliminando todas as cores em um programa gráfico como o Adobe Photoshop ou PhotoPaint Corel. Para fazer isso no Windows, abra a página que você deseja verificar e clique em Print Screen (Prnt Scrn freqüentemente rotulado). ). Em seguida, abra um novo arquivo no seu programa gráfico e usar o comando Colar (Ctrl + V). Finalmente, mudar a imagem em uma imagem em tons de cinza.

Contraste

Olhe para trás na versão preto e branco da página do centro de formação.

screenshot do centro de formação com toda a cor removida

Além do fato de que este é apenas um screenshot da página onde o texto é muito menor e um pouco mais borrada do que a página original, você vai notar que todo o texto é facilmente distinguível de cores de fundo em torno dele. Onde houver um fundo claro, há um texto escuro. Onde houver um fundo escuro, há um texto claro. Pessoas com baixa visão não terá problemas para fazer a diferença entre os níveis de contraste de texto e fundos.

Se uma cor mais clara foi escolhido para guias os recursos do fundo, o texto teria sido mais difícil de ler.

screenshot da versão em abas em preto e branco, onde o texto é quase o mesmo nível de contraste do que o fundo

Certifique-se de quando você escolhe a cor de fundo que não reduzir os níveis de contraste para tornar o texto ilegível.

WebAIM é uma iniciativa de:
Centro para Pessoas com Deficiência (CPD) Utah State University

Direitos Autorais 1999-2009 WebAIM

Início da página