Brevi esempi e consigli nella scelta dei colori e sull’uso delle immagini per il web.

Questo articolo è la continuazione di due post che trattano lo stesso argomento:
Utilizzo dei colori per il web
I colori per il web: buon senso e accessibilità

Meglio non utilizzare più di 3-4 colori in totale.
Cercare di scegliere lo stesso tipo di colore per i link, in maniera da rendere facilmente riconoscibile un collegamento dal normale testo.

Esempio pratico di un menu orizontale:

Decidiamo di rendere il collegamento di un menu orizzontale seguendo questa formattazione:

non sottolineato
di colore nero
con un carattere Trebuchet MS di 13 pixel di grandezza.

Al passaggio con il mouse il link è sottolineato con una linea continua in basso alta 3 pixel ed un testo che cambia di colore (es. da nero ad azzurro).

Dobbiamo seguire questa scelta per tutti i collegamenti del sito.
L’esempio del menu orizzontale citato potete vederlo su questa pagina.

Potete notare come lo stesso menu orizzontale di blographik in alto presenta sempre lo stesso tipo di css.

Al passaggio del mouse si sottolinea con una “linea” verde sotto il testo del collegamento. Questo è un modo per rendere netta la differenza di colore dal menu al testo durante tutta la navigazione del blog.

Le immagini in una pagina web

L’inserimento di immagini all’interno di una pagina ricca di testo facilita la lettura, ovviamente senza esagerare.

Un eccessivo uso delle immagini appesantirebbe il caricamento facilitando la chisura del sito prima di averlo consultato.

Tools utili per la scelta dei colori per una corretta accessibilità:

Colourcheck
Un tool on line utile per scegliere il corretto contrasto tra 2 colori, tramite l’inserimento del valore in esadecimale (es. #000000).

Spin the Color Wheel
Tool on line per la scelta dei colori per il web.
E’ possibile inserire i valori esadecimali oppure scegliere la funzione random che visulizza un’anteprima di 3 colori ogni volta diversi.

Graybit
Tool web based (segnalato dal blog usabilità.blogosfere.it) che permette di visualizzare un’anteprima in scala di grigi del vostro sito.Potete verificare in questo modo, se gli utenti con problemi visivi (che hanno difficoltà del distinguere alcuni colori) riescono a leggere correttamente il testo presente nel sito.

Colour Contrast Check
di Jonathan Snook.

Colour Contrast Analyser
di Gez Lemon.

Colour Contrast Analyser 1.1
Versione italiana (da webaccessibile.org).Già segnalato in un mio articolo precedente ( link al post: testare le combinazioni di colore) un software gratuito da installare sul proprio pc per testare le combinazioni di colore sfondo e primo piano.