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

Creare immagini disponibili: colore e contrasto

Vai al Inizio dei contenuti senza utilizzare la barra di consultazione e condivisione Come utilizzare la barra di consultazione e condivisione Ascolta il contenuto principale di questa pagina
Stampa Stampa il contenuto principale di questa pagina Inviare Invia il contenuto principale di questa pagina Quota Condividi questa pagina su TwitThis Condividi questa pagina su Facebook Pubblica l'articolo su Wikio Condividi questa pagina su Google Condividi questa pagina su LinkedIn Condividi questa pagina su Digg Condividi questa pagina su del.icio.us Condividi questa pagina su Netvibes

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 .

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:

disegno a colori 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:

una versione in bianco e nero della mappa dei colori della metropolitana di Londra

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.

Schermata di linguette delle pagine web in UEN alcuni dei quali sono marrone, bianco o scuro bleux a seconda della categoria

Se un colore più chiaro è stato utilizzato per le risorse sfondo schede, il testo sarebbe stato difficile da leggere.

screenshot del sito di formazione con tutto il colore rimosso

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.

screenshot del sito di formazione con tutto il colore rimosso

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.

screenshot della versione in schede bianco e nero, in cui il testo è quasi allo stesso livello di contrasto dello sfondo

Assicurarsi che quando si sceglie il colore di sfondo non ridurre i livelli di contrasto per rendere il testo illeggibile.

WebAIM è un'iniziativa di:
Centro per persone con disabilità (CPD) Utah State University

Copyright 1999-2009 WebAIM

Inizio pagina