IL COLORE NEL WEB
IL COLORE NEL WEB
IL COLORE NEL WEB
- TAGS
- colore
- homes.di.unimi.it
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong><br />
Anna Jerry Berolo
Armonie dei colori!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Cerchio Cromatico o Color Wheel!<br />
Cerchio dei 12 colori principali tracciato da Johannes Itten sulla base<br />
dei tre primari giallo, rosso e blu!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Cerchio Cromatico o Color Wheel!<br />
RGB !<br />
Red Green Blue!<br />
BYR!<br />
Blue Yellow Red !<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni Cromatiche!<br />
- Combinazioni di colori chiave!<br />
- Combinazioni monocromatiche!<br />
- Combinazioni di colori analoghi!<br />
- Combinazioni cromatiche complementari!<br />
- Combinazioni simmetriche complementari!<br />
- Combinazione complementare alternata!<br />
- Combinazione triadiche!<br />
- Combinazione tetradiche!<br />
- Combinazione di coppie complementari!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni di colori chiave!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni monocromatiche!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni monocromatiche!<br />
RGB !<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni di colori analoghi!<br />
Claude Monet - Water-Lilies -1914!<br />
BYR!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
RGB !<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni cromatiche complementari!<br />
Henri Matisse - Woman with the Hat, Paris - 1904-5!<br />
BYR!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni simmetriche complementari!<br />
BYR!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni simmetriche complementari!<br />
BYR!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni triadiche!<br />
BYR!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni triadiche!<br />
Piet Mondrian, Composition with Red, Yellow and Blue -1921!<br />
Frederick Carl Frieseke - Through the Vines - 1908!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni tetradiche!<br />
BYR!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni di coppie complementari!<br />
BYR!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Combinazioni di coppie complementari!<br />
Claude Monet - Houses of Parliament, London, Sun Breaking Through Fog -1904<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
…… alcuni contrasti cromatici!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Contrasto di simultaneità!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Contrasto di simultaneità!<br />
È possibile accentuare o ridurre lʼeffetto eccitante del contrasto di !<br />
simultaneità!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Contrasto di qualità!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Contrasto di quantità!<br />
I valori reciproci di luminosità dei colori sarebbero, secondo Goethe, !<br />
i seguenti:!<br />
9 8 6 3 4 6<br />
E ques< sono i valori delle coppie di complementari:<br />
Giallo : Viola = 9:3 = 3:1 = 3/4 : 1/4<br />
Arancio : Blu = 8:4 = 2:1 = 2/3 : 1/3<br />
Rosso : Verde= 6:6 = 1:1 = 1/2 : 1/2<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Contrasto di quantità!<br />
Giallo : Viola = 1/4 : 3/4<br />
Arancio : Blu = 1/3 : 2/3<br />
Rosso : Verde = 1/2 : 1/2<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Contrasto di quantità!<br />
Proporzioni armoniche!<br />
3 4 6 9 8 6<br />
Giallo : arancio = 3:4<br />
Giallo : rosso = 3:6<br />
…..<br />
…..<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Colorotate!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
ColorMunki!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Pictaculous!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
ColorSchemeDesigner<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
ColorJack!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Il colore non è uguale per tutti……!<br />
!<br />
….. il daltonismo!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
I tre tipi di coni per la visione a colori vengono indicati con le lettere L, M<br />
e S, che indicano le lunghezze dʼonda a cui i coni sono sensibili:!<br />
!<br />
L, long, coni sensibili alle onde lunghe, cioè la zona spettrale dei rossi;!<br />
!<br />
M, medium, coni sensibili alle onde medie, cioè la zona spettrale dei<br />
verdi;!<br />
!<br />
S, short, coni sensibili alle onde corte, cioè la zona spettrale !<br />
dei blu.!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Visione tricromatica è un soggetto nella cui retina sono presenti tutti e!<br />
tre i tipi di coni!<br />
ll tricromate normale è un soggetto che non ha alcuna anomalia ai!<br />
coni della retina e quindi vede normalmente tutti i colori.!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
!<br />
Il tricromate anomalo è un soggetto nella cui retina sono<br />
presenti tutti e tre i tipi di coni, ma un tipo di coni presenta delle<br />
anomalie!<br />
!<br />
protanomalia presenta una anomalia ai coni L<br />
deuteranomalia presenta una anomalia ai coni M!<br />
!<br />
tritanomalia presenta una anomalia ai coni S!<br />
!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Visione dicromatica è un soggetto caratterizzato dallʼassenza di!<br />
funzionalità di un tipo di coni!<br />
!<br />
!<br />
protanopia !<br />
assenza di funzionalità dei coni !<br />
sensibili al rosso (L)!<br />
!<br />
deuteranopia !<br />
assenza di funzionalità dei coni !<br />
sensibili al verde (M)!<br />
!<br />
!<br />
tritanopia !<br />
assenza di funzionalità dei coni !<br />
sensibili al blu (S)!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Visione monocromatica è un soggetto afflitto da cecità cromatica!<br />
totale o acromatopsia (non vede i colori ma solo i grigi)!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Tricromatica normale Protanopia!<br />
!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Deuteranopia!<br />
Tritanopia!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Acromatopsia!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Web Content Accessibility<br />
Guidelines (WCAG) 2.0!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
1.4.1 Uso del colore: Il colore non deve essere utilizzato come unica modalità visiva per rappresentare<br />
informazioni, indicare azioni, richiedere risposte o come elemento di distinzione visiva. (Livello A)!<br />
!<br />
1.4.3 Contrasto (minimo): 1.4.3 La rappresentazione visiva del testo e di immagini contenenti testo ha<br />
un rapporto di contrasto di almeno 4.5:1, fatta eccezione per i seguenti casi: (Livello AA)!<br />
Testo grande: Testo grande e immagini contenenti testo grande devono avere un rapporto di contrasto<br />
di almeno 3:1;!<br />
Testo non essenziale: Testo o immagini contenenti testo che sono parti inattive di componenti<br />
dell'interfaccia utente, che sono di pura decorazione, non visibili a nessuno, oppure che fanno parte di<br />
immagini contenenti contenuti visuali maggiormente significativi, non hanno alcun requisito di contrasto.!<br />
Logotipi: Un testo che è parte di un logo o marchio non ha alcun requisito minimo di contrasto.!<br />
!<br />
1.4.4 Ridimensionamento del testo: Il testo, ad eccezione dei sottotitoli e delle immagini contenenti<br />
testo, può essere ridimensionato fino al 200 percento senza l'ausilio di tecnologie assistive e senza<br />
perdita di contenuto e funzionalità. (Livello AA)!<br />
!<br />
1.4.5 Immagini di testo: Se le tecnologie utilizzate consentono la gestione della rappresentazione<br />
visiva dei contenuti, il testo è utilizzato per veicolare informazioni piuttosto che le immagini di testo, ad<br />
eccezione dei seguenti casi: (Livello AA)!<br />
Personalizzabile: L'immagine di testo può essere personalizzata visivamente per le esigenze dell'utente;!<br />
Essenziale: Una particolare rappresentazione del testo è essenziale per il tipo di informazioni veicolate.!<br />
Nota: I logotipi (testo che fa parte di un logo o di un marchio) sono considerati essenziali.!<br />
!<br />
1.4.6 Contrasto (avanzato): La rappresentazione visiva del testo e immagini contenenti testo ha un<br />
rapporto di contrasto di almeno 7:1, fatta eccezione per i seguenti casi: (Livello AAA)!<br />
Testo grande: Testo grande e immagini contenenti testo grande devono avere un rapporto di contrasto<br />
di almeno 4.5:1;!<br />
Testo non essenziale: Testo o immagini contenenti testo che fanno sono parti inattive di componenti<br />
dell'interfaccia utente, che sono di pura decorazione, non visibili a nessuno, oppure che fanno parte di<br />
immagini contenenti contenuti visuali maggiormente significativi, non hanno alcun requisito di contrasto.!<br />
Logotipi: Un testo che è parte di un logo o marchio non ha alcun requisito minimo di contrasto.!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
1.4.8 Presentazione visiva: Per la presentazione visiva di blocchi di testo, è disponibile una modalità<br />
per conseguire i seguenti obiettivi: (Livello AAA)!<br />
I colori del testo in primo piano e dello sfondo possono essere scelti dall'utente.!<br />
La larghezza non supera gli 80 caratteri o glifi (40 se CJK).!<br />
Il testo non è giustificato (allineato sia al margine destro che al margine sinistro).!<br />
Lo spazio tra righe (interlinea) è almeno di uno spazio e mezzo all'interno del paragrafo mentre lo<br />
spazio tra paragrafi, è almeno una volta e mezzo più grande rispetto all'interlinea.!<br />
Il testo può essere ridimensionato fino al 200 percento senza il supporto delle tecnologie assistive in<br />
modo da non richiedere all'utente di dover scorrere orizzontalmente per leggere una riga di testo in una<br />
finestra a schermo intero.!<br />
!<br />
1.4.9 Immagini di testo (senza eccezioni): Le immagini contenenti testo sono utilizzate soltanto per<br />
pura decorazione o dove una particolare presentazione del testo è essenziale per il tipo di informazioni<br />
veicolate. (Livello AAA)!<br />
Nota: I logotipi (testo che fa parte di un logo o di un marchio) sono considerati essenziali.!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
W3C Color Contrast Algorithm!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Rapporto di contrasto!<br />
Misura la luminanza relativa di ciascuna lettera (purchè siano tutte uniformi) per<br />
mezzo della formula:!<br />
!<br />
L = 0.2126 * R + 0.7152 * G + 0.0722 * B !<br />
dove R, G e B sono definite come segue:!<br />
se RsRGB
Due colori permettono una buona visibilità se la differenza di<br />
luminosità e di colore tra i due è superiore a una determinata serie<br />
di valori.!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Luminosità del colore!<br />
!<br />
((valore Rosso X 299) + (valore Verde X 587) + (valore Blu X 114)) /<br />
1000 !<br />
!<br />
!<br />
La differenza fra la luminosità dello sfondo e quella di primo piano deve<br />
essere uguale o maggiore di 125.!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Formula della differenza di colore!<br />
La seguente formula del W3C consente invece di calcolare la<br />
differenza tra due colori!<br />
!<br />
!<br />
(massimo (valore Rosso 1, valore Rosso 2) – minimo (valore Rosso<br />
1, valore Rosso 2)) + (massimo (valore Verde 1, valore Verde 2) –<br />
minimo (valore Verde 1, valore Verde 2)) + (massimo (valore Blu 1,<br />
valore Blu 2) – minimo (valore Blu 1, valore Blu 2)) !<br />
La differenza tra il colore di sfondo e quello di primo piano dovrebbe !<br />
essere uguale o maggiore di 500.!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
hRp://www.checkmycolours.com/<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Analisi dei colori utilizzati in una pagina Web!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Colore , contrasto testo-sfondo!<br />
!<br />
- Garantire che siano sempre distinguibili il contenuto informativo !<br />
(foreground) e lo sfondo (background), ricorrendo a un sufficiente !<br />
contrasto!<br />
- Evitare di presentare testi in forma di immagini!<br />
- Evitare oggetti e scritte lampeggianti o in movimento le cui<br />
frequenze di intermittenza possano provocare disturbi da epilessia<br />
fotosensibile o disturbi della concentrazione, ovvero possano<br />
causare il malfunzionamento delle tecnologie assistive utilizzate!<br />
- Poiché esistono moltissime varianti delle disabilità legate al colore, !<br />
risulta impossibile rendere un sito adatto a tutti gli utenti. Per questo !<br />
motivo si consiglia di definire fogli di stile (CSS) alternativi che<br />
permettano all'utente di personalizzare a proprio piacimento o<br />
esigenza i colori del sito stesso!<br />
- Garantire che tutta l'informazione veicolata dal colore sia<br />
disponibile anche in assenza di colori!<br />
!<br />
!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Risorse online!<br />
!<br />
http://www.paciellogroup.com/resources/contrast-analyser.html!<br />
http://www.w3.org/WAI/RC/tools/complete!<br />
http://gmazzocato.altervista.org/colorwheel/wheel.php!<br />
http://www.iamcal.com/toys/colors/!<br />
http://juicystudio.com/article/colour-contrast-analyser-firefoxextension.php!<br />
http://www.fujitsu.com/global/accessibility/assistance/cd/!<br />
http://www.fujitsu.com/global/accessibility/assistance/cs/!<br />
http://sipt07.si.ehu.es/evalaccess2/index.html!<br />
http://tools.cactusflower.org/analyzer/!<br />
http://juicystudio.com/services/image.php!<br />
http://www.w3.org/WAI/guid-tech.html!<br />
http://www.w3.org/standards/webdesign/accessibility!<br />
http://validator.w3.org/!<br />
http://jigsaw.w3.org/css-validator/!<br />
http://www.vischeck.com/vischeck/!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
Risorse online!<br />
!<br />
http://colorfilter.wickline.org/!<br />
http://graybit.com/main.php!<br />
http://www.xrite.com/custom_page.aspx?PageID=77!<br />
http://www.cudo.jp/e/!<br />
http://www.vischeck.com/!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
!<br />
<strong>IL</strong> <strong>COLORE</strong> <strong>NEL</strong> <strong>WEB</strong> Anna Jerry Berolo
![1) [4] Cos'è un hazard? Uno stallo? Cos'è una pipeline multiple ...](https://img.yumpu.com/16431383/1/190x245/1-4-cose-un-hazard-uno-stallo-cose-una-pipeline-multiple-.jpg?quality=85)
Change language