IL COLORE NEL WEB. Anna Jerry Berolo

Transcript

1 IL COLORE NEL WEB Anna Jerry Berolo

2 Armonie dei colori

3 Cerchio Cromatico o Color Wheel Cerchio dei 12 colori principali tracciato da Johannes Itten sulla base dei tre primari giallo, rosso e blu

4 Cerchio Cromatico o Color Wheel RGB BYR Red Green Blue Blue Yellow Red

5 Combinazioni Cromatiche - Combinazioni di colori chiave - Combinazioni monocromatiche - Combinazioni di colori analoghi - Combinazioni cromatiche complementari - Combinazioni simmetriche complementari - Combinazione complementare alternata - Combinazione triadiche - Combinazione tetradiche - Combinazione di coppie complementari

6 Combinazioni di colori chiave

7 Combinazioni monocromatiche

8 Combinazioni monocromatiche RGB

9 BYR Claude Monet - Water-Lilies IL COLORE NEL WEB Anna Jerry Berolo Combinazioni di colori analoghi

10 RGB

11 Combinazioni cromatiche complementari BYR Henri Matisse - Woman with the Hat, Paris

12 Combinazioni simmetriche complementari BYR

13 Combinazioni simmetriche complementari BYR

14 Combinazioni triadiche BYR

15 Piet Mondrian, Composition with Red, Yellow and Blue Frederick Carl Frieseke - Through the Vines IL COLORE NEL WEB Anna Jerry Berolo Combinazioni triadiche

16 Combinazioni tetradiche BYR

17 Combinazioni di coppie complementari BYR

18 Claude Monet - Houses of Parliament, London, Sun Breaking Through Fog IL COLORE NEL WEB Anna Jerry Berolo Combinazioni di coppie complementari

19 alcuni contrasti cromatici

20 Contrasto di simultaneità

21 Contrasto di simultaneità È possibile accentuare o ridurre lʼeffetto eccitante del contrasto di simultaneità

22 Contrasto di qualità

23 Contrasto di quantità I valori reciproci di luminosità dei colori sarebbero, secondo Goethe, i seguenti: E ques< sono i valori delle coppie di complementari: Giallo : Viola = 9:3 = 3:1 = 3/4 : 1/4 Arancio : Blu = 8:4 = 2:1 = 2/3 : 1/3 Rosso : Verde= 6:6 = 1:1 = 1/2 : 1/2

24 Contrasto di quantità Giallo : Viola = 1/4 : 3/4 Arancio : Blu = 1/3 : 2/3 Rosso : Verde = 1/2 : 1/2

25 Contrasto di quantità Proporzioni armoniche Giallo : arancio Giallo : rosso = 3:4 = 3:6

26 Colorotate

27 ColorMunki

28 Pictaculous

29 ColorSchemeDesigner

30 ColorJack

31 Il colore non è uguale per tutti.. il daltonismo

32 I tre tipi di coni per la visione a colori vengono indicati con le lettere L, M e S, che indicano le lunghezze dʼonda a cui i coni sono sensibili: L, long, coni sensibili alle onde lunghe, cioè la zona spettrale dei rossi; M, medium, coni sensibili alle onde medie, cioè la zona spettrale dei verdi; S, short, coni sensibili alle onde corte, cioè la zona spettrale dei blu.

33 Visione tricromatica è un soggetto nella cui retina sono presenti tutti e tre i tipi di coni ll tricromate normale è un soggetto che non ha alcuna anomalia ai coni della retina e quindi vede normalmente tutti i colori.

34 Il tricromate anomalo è un soggetto nella cui retina sono presenti tutti e tre i tipi di coni, ma un tipo di coni presenta delle anomalie protanomalia presenta una anomalia ai coni L deuteranomalia presenta una anomalia ai coni M tritanomalia presenta una anomalia ai coni S

35 funzionalità di un tipo di coni protanopia assenza di funzionalità dei coni sensibili al rosso (L) deuteranopia assenza di funzionalità dei coni sensibili al verde (M) tritanopia assenza di funzionalità dei coni sensibili al blu (S) IL COLORE NEL WEB Anna Jerry Berolo Visione dicromatica è un soggetto caratterizzato dallʼassenza di

36 Visione monocromatica è un soggetto afflitto da cecità cromatica totale o acromatopsia (non vede i colori ma solo i grigi)

37 IL COLORE NEL WEB Anna Jerry Berolo Protanopia Tricromatica normale

38 IL COLORE NEL WEB Anna Jerry Berolo Tritanopia Deuteranopia

39 Acromatopsia

40 Web Content Accessibility Guidelines (WCAG) 2.0

41 1.4.1 Uso del colore: Il colore non deve essere utilizzato come unica modalità visiva per rappresentare informazioni, indicare azioni, richiedere risposte o come elemento di distinzione visiva. (Livello A) Contrasto (minimo): La rappresentazione visiva del testo e di immagini contenenti testo ha un rapporto di contrasto di almeno 4.5:1, fatta eccezione per i seguenti casi: (Livello AA) Testo grande: Testo grande e immagini contenenti testo grande devono avere un rapporto di contrasto di almeno 3:1; Testo non essenziale: Testo o immagini contenenti testo che sono parti inattive di componenti dell'interfaccia utente, che sono di pura decorazione, non visibili a nessuno, oppure che fanno parte di immagini contenenti contenuti visuali maggiormente significativi, non hanno alcun requisito di contrasto. Logotipi: Un testo che è parte di un logo o marchio non ha alcun requisito minimo di contrasto Ridimensionamento del testo: Il testo, ad eccezione dei sottotitoli e delle immagini contenenti testo, può essere ridimensionato fino al 200 percento senza l'ausilio di tecnologie assistive e senza perdita di contenuto e funzionalità. (Livello AA) Immagini di testo: Se le tecnologie utilizzate consentono la gestione della rappresentazione visiva dei contenuti, il testo è utilizzato per veicolare informazioni piuttosto che le immagini di testo, ad eccezione dei seguenti casi: (Livello AA) Personalizzabile: L'immagine di testo può essere personalizzata visivamente per le esigenze dell'utente; Essenziale: Una particolare rappresentazione del testo è essenziale per il tipo di informazioni veicolate. Nota: I logotipi (testo che fa parte di un logo o di un marchio) sono considerati essenziali Contrasto (avanzato): La rappresentazione visiva del testo e immagini contenenti testo ha un rapporto di contrasto di almeno 7:1, fatta eccezione per i seguenti casi: (Livello AAA) Testo grande: Testo grande e immagini contenenti testo grande devono avere un rapporto di contrasto di almeno 4.5:1; Testo non essenziale: Testo o immagini contenenti testo che fanno sono parti inattive di componenti dell'interfaccia utente, che sono di pura decorazione, non visibili a nessuno, oppure che fanno parte di immagini contenenti contenuti visuali maggiormente significativi, non hanno alcun requisito di contrasto. Logotipi: Un testo che è parte di un logo o marchio non ha alcun requisito minimo di contrasto.

42 1.4.8 Presentazione visiva: Per la presentazione visiva di blocchi di testo, è disponibile una modalità per conseguire i seguenti obiettivi: (Livello AAA) I colori del testo in primo piano e dello sfondo possono essere scelti dall'utente. La larghezza non supera gli 80 caratteri o glifi (40 se CJK). Il testo non è giustificato (allineato sia al margine destro che al margine sinistro). Lo spazio tra righe (interlinea) è almeno di uno spazio e mezzo all'interno del paragrafo mentre lo spazio tra paragrafi, è almeno una volta e mezzo più grande rispetto all'interlinea. Il testo può essere ridimensionato fino al 200 percento senza il supporto delle tecnologie assistive in modo da non richiedere all'utente di dover scorrere orizzontalmente per leggere una riga di testo in una finestra a schermo intero Immagini di testo (senza eccezioni): Le immagini contenenti testo sono utilizzate soltanto per pura decorazione o dove una particolare presentazione del testo è essenziale per il tipo di informazioni veicolate. (Livello AAA) Nota: I logotipi (testo che fa parte di un logo o di un marchio) sono considerati essenziali.

43 W3C Color Contrast Algorithm

44 Rapporto di contrasto Misura la luminanza relativa di ciascuna lettera (purchè siano tutte uniformi) per mezzo della formula: L = * R * G * B dove R, G e B sono definite come segue: se RsRGB <= allora R = RsRGB/12.92 altrimenti R = ((RsRGB+0.055)/1.055) ^ 2.4 se GsRGB <= allora G = GsRGB/12.92 altrimenti G = ((GsRGB+0.055)/1.055) ^ 2.4 se BsRGB <= allora B = BsRGB/12.92 altrimenti B = ((BsRGB+0.055)/1.055) ^ 2.4 RsRGB, GsRGB, e BsRGB sono definiti così: RsRGB = R8bit/255 GsRGB = G8bit/255 BsRGB = B8bit/255

45 Due colori permettono una buona visibilità se la differenza di luminosità e di colore tra i due è superiore a una determinata serie di valori.

46 Luminosità del colore ((valore Rosso X 299) + (valore Verde X 587) + (valore Blu X 114)) / 1000 La differenza fra la luminosità dello sfondo e quella di primo piano deve essere uguale o maggiore di 125.

47 Formula della differenza di colore La seguente formula del W3C consente invece di calcolare la differenza tra due colori (massimo (valore Rosso 1, valore Rosso 2) minimo (valore Rosso 1, valore Rosso 2)) + (massimo (valore Verde 1, valore Verde 2) minimo (valore Verde 1, valore Verde 2)) + (massimo (valore Blu 1, valore Blu 2) minimo (valore Blu 1, valore Blu 2)) La differenza tra il colore di sfondo e quello di primo piano dovrebbe essere uguale o maggiore di 500.

48 hrp://

49 Analisi dei colori utilizzati in una pagina Web

50 Consigli Dimensione testo - non inserire testo di dimensioni inferiori a 14pt e superiori a 24 pt; - le dimensioni dei caratteri devono comunque sempre essere relative ; ovvero personalizzabili, es. 1.2 em, 1.5 em - l utente deve sempre poter decidere quanto grande far apparire il testo sullo schermo. - progettare le pagine Web impostando la dimensione «più grande» dei caratteri da parte del browser; Tipi di carattere Utilizzare tipi di carattere comuni e di facile lettura Es. Arial, verdana, tahoma, trebuchet,

51 Colore, contrasto testo-sfondo - Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto - Evitare di presentare testi in forma di immagini - Evitare oggetti e scritte lampeggianti o in movimento le cui frequenze di intermittenza possano provocare disturbi da epilessia fotosensibile o disturbi della concentrazione, ovvero possano causare il malfunzionamento delle tecnologie assistive utilizzate - Poiché esistono moltissime varianti delle disabilità legate al colore, risulta impossibile rendere un sito adatto a tutti gli utenti. Per questo motivo si consiglia di definire fogli di stile (CSS) alternativi che permettano all'utente di personalizzare a proprio piacimento o esigenza i colori del sito stesso - Garantire che tutta l'informazione veicolata dal colore sia disponibile anche in assenza di colori

52 Risorse online

53 Risorse online