Colori: loro utilizzo



L'argomento è trattato parzialmente nella lezione "Caratteri: utilizzo e caratteristiche", ma sono necessarie alcune altre informazioni più specifiche poiché in alcuni casi possono insorgere problemi, mentre in altri le eventuali difficoltà potranno essere superate proprio grazie all'impiego dei colori.

Anzitutto è importante avere presente che, per i non vedenti, un testo sarà percebile con gli >strumenti opportuni anche qualora il colore dei font fosse invisibile a un utente normodotato, cioè identico a quello di sfondo. Per esempio, mantenendo nella riga incorniciata riprodotta qui di seguito lo stesso sfondo bianco sul quale è stato digitato il testo che si sta leggendo in questo momento, una scritta realizzata in colore bianco verrebbe tranquillamente riconosciuta e letta da un non vedente dotato di  screen reader o di barra braille [il testo in colore bianco è: "Hai acquistato i CD-rom di HTML.it, il sito italiano sul Web Publishing?"]. 

Esempio 1


 
Hai acquistato i CD-rom di HTML.it, il sito italiano sul Web Publishing?

Ciò può essere utilissimo, per esempio, per trasmettere informazioni nascoste ai non vedenti senza creare turbamenti di sorta al risultato estetico o all'eleganza di una pagina web (per esempio, si potrà inserire un'indicazione all'inizio e alla fine di un sommario, o digitare una frase descrittiva di una gif animata, ecc.). L'esempio seguente contiene appunto una frase nascosta realizzata in bianco su fondo di uguale colore [la frase è la seguente: "Il logo di font.it è una gif.animata: la sagoma di un pesciolino verde si muove circolarmente su un piccolo disco giallo bordato di nero (65x70 pixels)"]. Si noterà tra l'altro come un tale accorgimento, che renderà accessibile ai disabili l'elemento grafico costituito dalla gif animata, non disturbi l'equilibrio della pagina nel suo complesso.

Esempio 2

logo di font.it -
IL CD-ROM DI font.IT
La più grande raccolta italiana di font per webmaster e grafici su cd-rom: quasi 3000 font organizzati per iniziale e per argomento.
Il logo di font.it è una gif.animata: la sagoma di un pesciolino verde si muove circolarmente su un piccolo disco giallo bordato di nero (65x70 pixels)

Un elemento altrettanto importante riguarda le combinazioni di colori di primo piano e di sfondo (per esempio, font di colore chiaro su sfondo scuro, font a tinte luminose su sfondi a tinte opache, ecc.). Il contrasto derivante da una combinazione studiata in modo appropriato consente a ipovedenti o a chi ha difficoltà di riconoscimento dei colori di leggere agevolmente il contenuto della pagina.

Esempio 3


 
font.it - per una grafica accattivante
-
gifanimate.it - oltre 8000 immagini!

Al contrario, se i colori di primo piano e di sfondo fossero troppo vicini a uno stesso livello di luminosità, si causerebbero problemi ai navigatori con difficoltà di percezione cromatica e comunque a tutti coloro che disponessero di un monitor in bianco e nero.

Un ulteriore ostacolo si presenterebbe a tali utenti se i colori venissero utilizzati, nello sviluppo di una pagina html, per trasmettere o richiedere informazioni. Esempio 4
 
-
SCEGLI LE TESSERINE DI HTML.IT
Utilizzi i caratteri forniti da font.it? . . .
Partecipi ai sondaggi promossi da HTML.it? . . .
Ti servi spesso di gif animate? . . .
Utilizzi Applets e Javascripts? . . .
.
I tre colori indicati nelle tesserine (rosso, verde e blu) indicano rispettivamente le risposte "sì, spesso", "ogni tanto", "mai". Per ciascuna delle domande scegli con un clic del mouse una tesserina. Le risposte pervenute a tutto il 31 dicembre 2000 forniranno preziose indicazioni statistiche per consentire una sempre maggiore cura dei servizi offerti da HTML.it e dai siti collegati. Grazie per la collaborazione.
AVVERTENZA: la tabella è presentata a puro scopo didattico. Ovviamente, non è attivato il meccanismo di rilevazione statistica né vi è alcun riferimento a reali iniziativa di HTML.it

Nel caso del tutto ipotetico rappresentato dall'esempio precedente il tipo di risposta da fornire è simbolizzato da un colore anziché da scritte corrispondenti alle risposte stesse. Un utente non vedente non avrebbe alcun riscontro rispetto alle caselline colorate: il traduttore braille o il sintetizzatore vocale non gli potrebbero essere utili in un caso del genere. Coloro che hanno difficoltà nella percezione dei colori sarebbero ugualmente esclusi da una qualsiasi forma di accessibilità. Chi disponesse di un monitor in bianco e nero non potrebbe distinguere i colori. Soluzioni di questo genere devono essere quindi evitate e di conseguenza, se si volesse progettare una pagina web nella quale si ritenesse indispensabile contrassegnare con colori alcuni contenuti,  occorrerebbe quanto meno fornire precisi chiarimenti testuali alternativi.

Ultimi articoli Web design

Metro, il "linguaggio di design" di Windows 8

I principi ispiratori del "linguaggio di design" utilizzato da...

Bootstrap: il framework di Twitter

Sviluppare applicazioni web sfruttando il framework con cui è stato...

Sfondi a tutta pagina con jQuery

Come avere degli sfondi a tutta pagina sui vostri siti web, per...

Grid design, dalla tipografia al web

Design coerenti e layout consistenti, usando principi di...

Art Direction e Design

Capire la differenza tra la direzione artistica di un progetto e il...

Altri articoli

Guide Web design

Guida Pubblicare un sito web

Le verifiche fondamentali da effettuare prima del lancio di un nuovo...

Guida Web Writing

Saper scrivere per il Web è una delle armi per attirare utenti e per...

Guida Accessibilità dei siti Web teorica

Questa guida è finalizzata sostanzialmente a una conoscenza e a una...

Altre guide

Newsletter @Grafica e Web Design

Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti