Creare immagini disponibili: colore e contrasto
| |
Stampa |
Inviare |
Quota |
Attenzione: La versione originale di questo documento è Creazione di immagini accessibili: colore e contrasto . La traduzione francese è stata fatta da Ideose come parte di un accordo tra WebAIM e Ideose .
Nota: Vedere la pagina dei documenti in materia di accessibilità web per un elenco di tutti i documenti tradotti. Altre risorse sull'accessibilità web sono elencati anche nel portale digitale accessibile .
Riassunto
- Pagina 1: Introduzione
- Pagina 2: Immagini per migliorare la comprensione
- Ti trovi a pagina 3: colore e contrasto
- Pagina 4: Testi in immagini
- Pagina 5: I grafici che causano spasmi
-
Pagina 6: La creazione di alternative buon testo (attributo
alt) - Pagina 7: Descrizioni lunghe
Colore
La regola di accessibilità è quello di garantire che non utilizzare il colore solo per trasmettere informazioni. Questa frase è un po 'nebuloso per alcune persone. Ciò significa trasmettere un messaggio solo con il colore? Diamo un'occhiata a questa mappa della metropolitana di Londra:

Una persona che può vedere i colori non ha difficoltà a distinguere le linee rosse, blu scuro, azzurro, ecc. Una persona non può vedere i colori, perché è daltonico o con problemi di vista, probabilmente non in grado di distinguere le diverse linee della metropolitana con la stessa facilità. Qualcuno che è cieco non può vedere nulla. Guardate questa immagine in bianco e nero:

Come sapere quale bus prendere per arrivare a Waterloo? Prima di andare avanti, dovete sapere che le persone non vedenti colore può vedere i colori (tranne rari casi), in modo che la scala di grigi disegno qui sopra non è rappresentativo di cecità ai colori . Si è semplicemente un esempio di un'immagine in cui viene usato il colore per trasmettere informazioni. Quando i colori vengono rimossi, le diverse linee della metropolitana sono quasi indistinguibili.
Consideriamo qui di seguito un esempio di come aggirare questo potenziale problema. WebAIM formazione CD utilizza linguette colorate per designare le categorie di link nella barra di navigazione superiore.
Se un colore più chiaro è stato utilizzato per le risorse sfondo schede, il testo sarebbe stato difficile da leggere.

Il metodo utilizzato per la formazione WebAIM sito per evitare confusione è stato quello di mettere i titoli di categoria tra parentesi sopra le schede della stessa categoria. Ganci ha ordinato le schede in base a workshop e risorse. Anche quando non vi è nessun colore in questa pagina, l'informazione è sempre accessibile.
Metti alla prova le tue pagine web per garantire che nessuna informazione viene persa quando si rimuove i colori. Potete farlo stampando la pagina con una stampante in bianco e nero (assicurarsi che le preferenze di stampa sono impostate per la stampa i colori di sfondo). Si può anche fare come abbiamo fatto su questa pagina, prendendo uno screenshot della pagina, quindi l'eliminazione di tutti i colori in un programma di grafica come Adobe Photoshop o Corel PhotoPaint. Per effettuare questa operazione in Windows, aprire la pagina che si desidera controllare, quindi fare clic su Print Screen (Prnt Scrn spesso etichettato). ). Quindi aprire un nuovo file nel vostro programma di grafica e utilizzare il comando Incolla (Ctrl + V). Infine, modificare l'immagine in scala di grigi.
Contrasto
Guardate di nuovo la versione in bianco e nero della pagina del sito di formazione.

Oltre al fatto che questo è solo uno screenshot della pagina in cui il testo è molto più piccolo e un po 'più sfocata rispetto alla pagina originale, si noterà che tutto il testo è facilmente distinguibili da colori di sfondo attorno a lui. Dove c'è uno sfondo chiaro, c'è un testo scuro. Dove c'è uno sfondo scuro, c'è un testo in chiaro. Le persone ipovedenti non avrà problemi a fare la differenza tra i livelli di contrasto testo e sfondi.
Se un colore più chiaro è stato scelto per le risorse sfondo schede, il testo sarebbe stato più difficile da leggere.

Assicurarsi che quando si sceglie il colore di sfondo non ridurre i livelli di contrasto per rendere il testo illeggibile.
Legami commerciali
Copyright 1999-2009 WebAIM




































