Crie imagens disponíveis: cor e contraste
| |
Imprimir |
Enviar |
Ação |
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
- Página 1: Introdução
- Página 2: Imagens para melhorar a compreensão
- Você está na página 3: Cor e contraste
- Página 4: Textos em imagens
- Página 5: Os gráficos que causam espasmos
-
Página 6: Criando alternativas bom texto (atributo
alt) - 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:

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:

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.
Se uma cor mais clara foi utilizado para os recursos de fundo abas, o texto teria sido difícil de ler.

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.

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.

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.
Relações comerciais
Direitos Autorais 1999-2009 WebAIM




































