{"id":53,"date":"2010-04-13T10:19:29","date_gmt":"2010-04-13T08:19:29","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/contrasto-sovrano\/"},"modified":"2010-04-13T10:19:29","modified_gmt":"2010-04-13T08:19:29","slug":"contrasto-sovrano","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/contrasto-sovrano\/","title":{"rendered":"Il Contrasto \u00e8 Sovrano"},"content":{"rendered":"

\"Illustrazione Vi ricordate quando infilavate la mano in un grande contenitore di pastelli tutti mischiati e con le punte spezzate (oppure quando gentilmente prendevate la vostra scatola di pastelli nuovi di zecca in perfetto ordine) e poi sfogliavate i cartoncini per trovare la tinta perfetta che andasse bene con il pastello a cera che avevate appena scelto? Oppure cercavate prima il cartoncino e poi il pastello ideale che andasse bene con quella carta? Non importa quanto ordinata fosse la vostra scorta di pastelli e cartoncini o in che ordine li sceglievate: fin da piccoli avete cercato la giusta combinazione di colori. \u201cGiusta combinazione\u201d aveva un significato differente per ognuno di noi, ma spesso voleva dire trovare il giusto contrasto tra lo sfondo (il cartoncino) ed il primo piano (i pastelli), cos\u00ec che il nostro lavoro si sarebbe distinto tra i capolavori dei nostri compagni di classe.<\/p>\n

Fin da piccoli comprendiamo che il colore influenza le nostre vite. Tuttavia, in quanto bambini non si pu\u00f2 sapere che le persone percepiscono il colore in modi diversi. Come bambini probabilmente non capivamo il significato del termine \u201cdaltonismo<\/a>\u201d e anche da adulti \u00e8 difficile comprendere che il colore influenza anche le persone con il 100% della cecit\u00e0 ai colori\u2014coloro i quali possono solo vedere sfumature di grigio. Le persone daltoniche sono influenzate dal colore in maniera diversa dalle persone che vedono l’intero spettro dei colori.<\/p>\n

\n

Contrasto: l’ingrediente segreto<\/h2>\n

Il contrasto \u00e8 la differenza percepita tra colori che sono molto vicini tra loro. Usando il contrasto in maniera efficace non solo potete rendere il vostro design diverso dagli altri, ma \u00e8 l’ingrediente essenziale per rendere il contenuto accessibile a qualunque visitatore. Le persone che sono completamente daltoniche, quelle con tipi specifici di cecit\u00e0 al colore e le persone ipovedenti devono poter accedere ai contenuti sul web. Come designer, dobbiamo essere sicuri che ogni utente sia in grado di percepire il contenuto sui siti che creiamo. Inoltre, non \u00e8 necessario limitarci alla combinazione ad alto contrasto bianco e nero, possiamo prendere il nostro grande contenitore di colori e creare siti web che utilizzano spudoratamente dei colori con contrasto appropriato.<\/p>\n<\/div>\n

\n

Bianco e nero<\/h2>\n

Al giorno d’oggi, i designer sono maggiormente consci delle implicazioni della scelta dei colori. Molti imprese, organizzazioni ed istituzioni seguono delle politiche di accessibilit\u00e0, richiedendo ai grafici di effettuare le scelte dei colori basandosi sul contrasto tra questi. Tutto ci\u00f2 ha creato il bisogno ed il desiderio di testare il contrasto tra i colori. Un’ampia gamma di tool e risorse aiutano a soddisfare questo bisogno ed il miglior modo per determinare quale di questi tool o risorse vadano meglio per il vostro workflow \u00e8 di prendersi del tempo e provare voi stessi tali tool.<\/p>\n

Ciascun designer ha un proprio workflow, ma la ricerca \u00e8 spesso una delle prime fasi del processo di design. Un modo per garantire che il progetto grafico effettivamente abbia un buon contrasto \u00e8 quello di valutare il layout in toni di grigio. Per valutare il contrasto di un sito web online, potete usare un tool come graybit.com<\/a>, che converte i siti web esistenti in scala di grigi. Usate graybit.com per fare ricerca su alcuni dei vostri siti preferiti e per fare dei test sui vostri siti. Ponetevi le seguenti domande: si riesce a leggere il testo? Gli elementi visuali mantengono la loro gerarchia? Prendete nota di quello che funziona bene quando vedete il sito a colori e cosa non funziona pi\u00f9 quando guardate lo stesso sito in scala di grigi.<\/p>\n

\"Il<\/p>\n

Fig 1. Il sito web InterACT a colori.<\/p>\n<\/div>\n

\"Valutazione<\/p>\n

Fig 2. Il sito web InterACT in scala di grigi.<\/p>\n<\/div>\n

Le immagini qui sopra mostrano il sito web InterACT<\/a> a colori e nella versione in scala di grigi creata da graybit.com. Il contenuto \u00e8 ancora leggibile anche in scala di grigi. Questo sito \u00e8 stato dapprima progettato in scala di grigi e poi \u00e8 stato tradotto a colori. Se riuscite a creare un solido progetto grafico in bianco, nero e scala di grigi, spesso vi permetter\u00e0 di tradurre il vostro design in quasi tutte le combinazioni di colori\u2014fintanto che la combinazione di colori mantenga lo stesso livello di contrasto tra gli elementi visuali. Create gli schizzi e le bozze in bianco e nero e poi fate i comp<\/a> in scala di grigi. Questo workflow non solo permette alla vostra mente di rimanere concentrata sulla gerarchia degli elementi nella pagina tenendovi lontani dalle scelte dei colori, ma vi aiuta anche a creare un design che usi un contrasto adeguato.<\/p>\n

Per valutare il contrasto di un sito web mentre siete ancora nella fase di progettazione, usate un programma per la manipolazione delle immagini, come ad esempio Photoshop e confrontate il vostro progetto in scala di grigi e in RGB. Se desiderate vedere il design a cui state lavorando ma anche il vostro desktop e tutte le vostre applicazioni in scala di grigi, potete usare Nocturne<\/a>, un’applicazione che permette agli utenti di avere ulteriore controllo sui loro monitor per vederci meglio in situazioni di luce bassa. Usate Nocture per avere una rapida idea di come il contrasto del vostro design si sta sviluppando. Confrontate questa immagine del mio desktop con inclusa una foto che ha un color oro forte, dei rossi e dei blu, e la palette standard dei colori di Photoshop, con l’immagine in scala di grigi ottenuta con Nocturne.<\/p>\n

\"Vista<\/p>\n

Fig 3. Vista a colori del desktop.<\/p>\n<\/div>\n

\"Vista<\/p>\n

Fig 4. Vista del desktop in scala di grigi ottenuta con Nocturne.<\/p>\n<\/div>\n

Come ulteriore prova, cercate di progettare il vostro design usando il colore mentre guardate quello che state facendo in scala di grigi. Quando avrete finito, spegnete Nocturne ed esaminate quello che avete creato. Noterete quali combinazioni di colore funzionano bene. Perch\u00e9 funzionano? Azzardo a indovinare: un buon contrasto \u00e8 la risposta giusta.<\/p>\n<\/div>\n

\n

Andare oltre con i colori<\/h2>\n

Una volta che avrete provato a progettare un layout in scala di grigi e siete pronti a passare al colore, ci sono molti tool che possono aiutarvi a scegliere una palette di colori appropriata. Color Scheme Designer<\/a> \u00e8 uno dei miei preferiti. Questo tool fornisce molto controllo e diverse opzioni per aiutarvi a scegliere una palette di colori senza rendere il processo travolgente. Pu\u00f2 persino simulare la percezione del vostro schema di colori da parte di persone con diversi tipi di daltonismo. Inoltre, potete esportare le palette che create in diversi formati: ci\u00f2 lo rende uno strumento da inserire nel vostro workflow, perch\u00e9 \u00e8 facile da usare e molto efficiente. Se non siete daltonici, queste simulazioni vi possono istruire sui molti modi con cui le persone vedono i colori: visione normale, Deuteranopia<\/a> (cecit\u00e0 al verde); Deuteranomalia<\/a> (difficolt\u00e0 nella percezione del verde) e daltonia totale.<\/p>\n

\"Color<\/p>\n

Fig 5. Color Scheme Designer simula una visione normale.<\/p>\n<\/div>\n

\"Color<\/p>\n

Fig 6. Color Scheme Designer simula la Deuteranopia.<\/p>\n<\/div>\n

\"Color<\/p>\n

Fig 7. Color Scheme Designer simula la Deuteranomalia.<\/p>\n<\/div>\n

\"Color<\/p>\n

Fig 8. Color Scheme Designer simula la cecit\u00e0 ai colori totale.<\/p>\n<\/div>\n

Visitate il sito colblindor.com<\/a> per saperne di pi\u00f9 su specifiche tipologie di daltonismo. Anche Coblis\u2013Color Blindness Simulator<\/a> pu\u00f2 aiutarvi a comprendere meglio come alcune persone possono vedere il vostro lavoro. Questo tool vi permette di caricare un’immagine e di vederla come se aveste diversi tipi di cecit\u00e0 al colore. Ad esempio, potreste usare questo tool per confrontare la percezione di un’immagine di pastelli colorati con visione normale, con Protanopia (cecit\u00e0 al rosso), con Tritanopia (cecit\u00e0 al blu) e con monocromia<\/a> (assenza totale di un colore, in questo caso al blu). Comincerete a capire come ogni persona percepisca il colore in maniera differente e perch\u00e9 il contrasto diventa un ingrediente importante nel creare design leggibili.<\/p>\n

\"Visione<\/p>\n

Fig 9. Visione normale.<\/p>\n<\/div>\n

\"Protanopia<\/p>\n

Fig 10. Protanopia (cecit\u00e0 al rosso).<\/p>\n<\/div>\n

\"Tritanopia<\/p>\n

Fig 11. Tritanopia (cecit\u00e0 al blu).<\/p>\n<\/div>\n

\"Monocromia<\/p>\n

Fig 12. Monocromia Conica del Blu (quasi completamente cieco ai colori).<\/p>\n<\/div>\n<\/div>\n

\n

Sfumature di grigio<\/h2>\n

I siti web che hanno un buon contrasto aiutano tutti gli utenti a comprendere il contenuto pi\u00f9 facilmente. Checkmycolors.com<\/a> \u00e8 un tool per l’analisi del contrasto facile da usare. Inserite l’URL nel campo e cliccate su \u201cCheck\u201d: checkmycolors.com vi fornir\u00e0 un’analisi estremamente dettagliata delle varie combinazioni di colori del sito web. E’ in grado di controllare il rapporto di contrasto (i.e., contrast ratio), la differenza di luminosit\u00e0 e la differenza di colore. Crea un grafico che mostra i valori di colore del foreground del sito web e del background e mostra dei campioni di come il foreground ed il background appaiono sul sito. Usatelo con prudenza\u2014la maggior parte dei siti web presenta molti \u201cproblemi.\u201d<\/p>\n

\"checkmycolors.com<\/p>\n

Fig 13. Fallimento del test checkmycolors.com.<\/p>\n<\/div>\n

L’unico sito tra quelli che ho testato che non presentava \u201cproblemi\u201d \u00e8 stato checkmycolours.com.<\/p>\n

\"checkmycolors.com<\/p>\n

Fig 14. Passato il test checkmycolors.com.<\/p>\n<\/div>\n

Controllate i vostri siti solo quando siete davvero pronti a vedere una serie di X su sfondo rosso e la parola \u201cfailure\u201d come risultati del vostro test. Se il vostro sito passa il test, congratulazioni! Potete ritenervi esperti nel contrasto dei colori!<\/p>\n

Sebbene possa essere sconfortante vedere quante combinazioni di colori portano ad un contrasto scarso, possiamo usare questi tool per capire dove andare a fare revisioni. Questi tool ci possono aiutare a prendere decisioni con cognizione di causa riguardanti i punti in cui fare delle concessioni al contrasto per il bene del progetto grafico. Se un elemento del design non ha peso nella leggibilit\u00e0 del contenuto principale, ha importanza che abbia un alto contrasto? Forse no. Potreste concludere che l’aspetto pi\u00f9 importante di molti siti web \u00e8 il contenuto e, fintanto che la grafica non disturba il contenuto, non \u00e8 necessario che gli utenti vedano tutti gli aspetti del design.<\/p>\n

\"Colore<\/p>\n

Fig 15. Colore del link su InterACT.<\/p>\n<\/div>\n

\"Stato<\/p>\n

Fig 16. Colore dello stato Hover del link.<\/p>\n<\/div>\n

\"Scala<\/p>\n

Fig 17. Scala di grigi per il link su InterACT.<\/p>\n<\/div>\n

\"Scala<\/p>\n

Fig 18. Scala di grigi per lo stato hover del link.<\/p>\n<\/div>\n

D’altro canto, ci sono aspetti dei siti web che \u00e8 importante che i visitatori riconoscano. Ad esempio, \u00e8 importante che i visitatori capiscano facilmente quando stanno passando sopra ad un link. I segnali visivi sono critici quando si va a creare una differenziazione tra gli stati dei link: tuttavia, il contrasto del colore non \u00e8 l’unico modo per chiarire questi stati. Gli stati dei link possono avere caratteristiche visive che non richiedono al visitatore di fare affidamento solo sul colore per determinare lo stato corrente. Se aggiungete dei segnali visivi per mostrare i vari stati del link, il contrasto del colore diventa un problema minore. Ad esempio, il sito web di InterACT crea una distinzione visiva tra gli stati dei link cambiando il colore ed aggiungendo una sottolineatura allo stato hover. La sottolineatura assicura che anche in scala di grigi le persone possano vedere la differenza tra gli stati.<\/p>\n

Ogni persona incaricata della grafica deve determinare l’equilibrio tra il design e la leggibilit\u00e0\u2014una decisione resa spesso pi\u00f9 facile quando si considera l’audience target e lo scopo del sito. Le risorse elencate qui sono solo pochi dei molti tool riguardanti i colori ed il contrasto disponibili sul web: non si tratta di una lista esaustiva. I tool specifici non sono cos\u00ec importanti quanto assicurarsi di includere un appropriato contrasto tra i colori come parte del processo creativo. Questo render\u00e0 possibile agli utenti, indipendentemente dalla loro percezione dei colori, di leggere ed apprezzare il vostro sito web. Esattamente come la scelta della corretta combinazione di colori avrebbe fatto risaltare il vostro lavoro quando eravate piccoli tra la miriade di lavori dei vostri compagni di classe, scegliere la corretta combinazione di colori quando progettate un sito web permetter\u00e0 al vostro sito di risaltare sul web.<\/p>\n<\/div>\n

\n