9 – Colori

9.1 – Contrasto di colori

Punti di controllo in questa sezione: 2.2 Assicurarsi che la combinazione di colori tra il primo piano e lo sfondo fornisca sufficiente contrasto se osservato da qualcuno che presenti deficit di percezione del colore o quando è vista su di uno schermo bianco e nero. [Priorità 2 per le immagini, la Priorità 3 per il testo].

Tecniche:

  • Usare i numeri, non i nomi, per i colori.

Esempio:

Usare i numeri, non i nomi, per i colori:

  h1 {color: #808000}
  h1 {color: rgb(50%,50%,0%)}

Esempio disapprovato:

  h1 {color: red}

Usare queste proprietà dei CSS per specificare i colori:

  • color, per il colore di testo in primo piano.
  • background-color, per il colore di sfondo.
  • border-color, outline-color per colore del bordo.
  • Per i colori dei link, usare le pseudo-classi :link, :visited, :active.

Assicurarsi che siano ben contrastati i colori di primo piano e di sfondo. Se si specifica un colore di primo piano, specificare sempre anche un colore di sfondo (e viceversa).

9.2 – Non affidare le informazioni al solo colore

Punti di controllo in questa sezione: 2.1 Assicurarsi che tutte le informazioni veicolate con il colore siano disponibili anche senza, per esempio grazie al contesto o ai marcatori [Priorità 1]

Assicurarsi che le informazioni non siano veicolate soltanto attraverso il colore. Per esempio, quando viene chiesto un input all’utente, non scrivere “Scegliere una voce tra quelle elencate in verde”. Assicurarsi invece che le informazioni siano disponibili attraverso gli altri effetti di stile (per esempio un effetto di carattere) e attraverso il contesto del discorso (esempio un link di testo comprensibile).

A dimostrazione, gli esempi di questo documento hanno uno stile di default (con i CSS) che lavora in questo modo:

  • Sono circondati da un bordo.
  • Usano un colore di sfondo diverso.

Test rapido.
Per verificare se un documento è fruibile anche senza i colori, esaminarlo con un monitor monocromatico o attraverso un browser dove siano stati disattivati i colori. Inoltre provare a settare il browser in modo da usare solo il bianco e nero e le tonalità di grigio, e controllare il risultato.

Test rapido.
Per verificare se il contrasto dei colori sia sufficiente per essere letto da persone con deficit di percezione del colore o che usino schermi con bassa risoluzione, stampare la pagina con una stampante in bianco e nero (dove gli sfondi ed i colori appariranno in una scala di grigi).
Inoltre, fotocopiare la pagina e le copie stesse fino a due o tre generazioni, e verificare come si degrada. Questo mostrerà dove serve incrementare il contrasto o aggiungere elementi per evidenziare (esempio: nelle pagine Web di solito gli hyperlinks sono sottolineati), o se questi elementi sono insufficienti.

Per ulteriori informazioni sui colori e i contrasti, fare riferimento a Lighthouse .

Potrebbero interessarti anche i seguenti articoli

  • 2 – Possibilità di controllare i CSS2 – Possibilità di controllare i CSS Punto di controllo in questa sezione: 11.2 Evitare gli attributi disapprovati dal W3C . [Priorità 2]. Per essere sicuri che gli operatori possano controllare gli […]
  • 8 – Formattazione e posizione del testo8 – Formattazione e posizione del testo Punti di controllo in questa sezione: 3.3 Usare i CSS per controllare il layout e la presentazione. [Priorità 2]. Le proprietà dei seguenti CSS2 possono essere usate […]
  • 6 – Effetti di stile del testo6 – Effetti di stile del testo Punto di controllo in questa sezione: 7.2 Fino a quando gli interpreti non permetteranno agli utenti di controllare il lampeggio (blinking), evitare di far lampeggiare […]
  • 13 – Usare i CSS ed il markup di posizione per una trasformazione elegante13 – Usare i CSS ed il markup di posizione per una trasformazione elegante   Punto di controllo di questa sezione: 6.1 Organizzare i documenti in modo che possano essere letti senza i CSS. Per esempio quando un documento HTML è reso […]
  • 12 – Righe e bordi12 – Righe e bordi   Punto di controllo di questa sezione: 6.1 Organizzare i documenti in modo che possano essere letti senza i CSS. Per esempio quando un documento HTML è reso […]
Condividi:

Informazioni sull'autore

Maurizio Vittoria
Maurizio Vittoria
Sono nato e vivo a Venezia, dove svolgo attività di Webmaster presso la Biblioteca Nazionale Marciana. Qui ho potuto unire lo status di bibliotecario con la passione per l'informatica e Internet. Come bibliotecario non potevo non interessarmi alle enormi possibilità che la rete può offrire nel campo della catalogazione e nella ricerca bibliografica; mi sono perciò specializzato nella reperibilità delle risorse e nelle ricerche on line, per le quali tengo periodicamente dei corsi, oltre a quelli su Internet, HTML e catalogazione in rete. Sono un sostenitore del W3C, dei suoi standard e del suo "vedere lontano". A questo proposito ho prodotto vari manualini di tecnica e standard Web, tra cui una guida all’HTML e qualche traduzione di documenti del W3C stesso. Nel mio lavoro sono sempre stato sensibile alle problematiche dell'accessibilità e dell'usabilità del Web e sono entrato nel WCAG WG (Web Content Accessibility Guidelines Working Group), l'organismo del W3C che sta rivedendo le linee guida internazionali per l'accessibilità dei siti Web. Ho promosso il “Progetto CABI”,  della Biblioteca Nazionale Marciana, iniziato con la “Campagna per l’Accessibilità delle Biblioteche in rete” (http://marciana.venezia.sbn.it/CABI/), progetto che si è rivelato fruttuoso per la sensibilizzazione verso l’accessibilità del Web culturale e pubblico. Partecipo al Gruppo di Lavoro del progetto europeo “Minerva” che ha prodotto il “Manuale per la qualità dei siti Web pubblici culturali,   Criteri, linee guida e Raccomandazioni”  (http://www.minervaeurope.org/publications/qualitycriteria.htm), presentato a Parma il 21 novembre 2003. Sono membro IWA-HWG e mantengo altri interessi semiletterari e meno virtuali.

Commenti

Nessun commento

    Rispondi

    Link e informazioni