Kontrast kolorów
Tworzene strony WWW, loga lub reklamy powinny wywoływać emocje, można do tego wykorzystać sposób w jakim ludzie widzą kolory, jak na nich oddziałowywwują. Kontrast to łączenie 2 kolorów różniących się od siebię, a więc to zestaw niepokojący i przez to zwracający uwagę. Rózni się on od zestawu kolorów zblizonych do siebie, stonowanych które uspokajają i powodują spadek uwagi. Za pomocą kilku kontrastowych kolorów barw możemy stymulować uwagę odbiorcy. Najsilniejszy kontrast barwny uzyskujemy zestawiając ze sobą kolory ciepłe i zimne niebieski – pomarańczowy, czerwony – zielony. Efekt kontrastu uzyskamy również, gdy z czystymi barwami połączymy kolory niechromatyczne takie jak (biały, szary, czarny), ale nigdy nie da to takiego silnego kontrastu jak kontrast barw chromatycznych. Kolory gdy znajdą się w otoczeniu innych barw kontrastowych zmieniają się w odbiorze. I tak kolor czerwony na chłodnym tle wyda się bardziej ekspresyjny (żarzący). Należy jednak pamiętać, że kolory kontrastowe są męczące dla wzroku i nadmierne użycie kontrastu barwnego może okazać się niekorzystne.
Tabela pokazująca wartość procentową kontrastu dla podstawowych kolorów.
Są tu 2 tabele z tymi samymi kolorami, bo kolorowe i kontrastowe zwraca uwagę, ale nie jest to równoznaczne, że jest to rozwiązanie najczytelniejsze.
| beżowy | biały | szary | czarny | brązowy | różowy | fiolet | zielony | pomarańcz | niebieski | żółty | czerwony | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| czerwony | 78 | 84 | 32 | 38 | 7 | 57 | 28 | 24 | 62 | 13 | 82 | 0 |
| żółty | 14 | 16 | 73 | 89 | 80 | 58 | 75 | 76 | 52 | 79 | 0 | |
| niebieski | 75 | 82 | 21 | 47 | 7 | 50 | 17 | 12 | 56 | 0 | ||
| pomarańcz | 44 | 60 | 44 | 76 | 59 | 12 | 47 | 50 | 0 | |||
| zielony | 72 | 80 | 11 | 53 | 18 | 43 | 6 | 0 | ||||
| fiolet | 70 | 79 | 5 | 56 | 22 | 40 | 0 | |||||
| różowy | 51 | 65 | 37 | 73 | 53 | 0 | ||||||
| brązowy | 77 | 84 | 26 | 43 | 0 | |||||||
| czarny | 87 | 91 | 58 | 0 | ||||||||
| szary | 69 | 78 | 0 | |||||||||
| biały | 28 | 0 | ||||||||||
| beżowy | 0 |
| beżowy | biały | szary | czarny | brązowy | różowy | fiolet | zielony | pomarańcz | niebieski | żółty | czerwony | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| czerwony | 78 | 84 | 32 | 38 | 7 | 57 | 28 | 24 | 62 | 13 | 82 | 0 |
| żółty | 14 | 16 | 73 | 89 | 80 | 58 | 75 | 76 | 52 | 79 | 0 | |
| niebieski | 75 | 82 | 21 | 47 | 7 | 50 | 17 | 12 | 56 | 0 | ||
| pomarańcz | 44 | 60 | 44 | 76 | 59 | 12 | 47 | 50 | 0 | |||
| zielony | 72 | 80 | 11 | 53 | 18 | 43 | 6 | 0 | ||||
| fiolet | 70 | 79 | 5 | 56 | 22 | 40 | 0 | |||||
| różowy | 51 | 65 | 37 | 73 | 53 | 0 | ||||||
| brązowy | 77 | 84 | 26 | 43 | 0 | |||||||
| czarny | 87 | 91 | 58 | 0 | ||||||||
| szary | 69 | 78 | 0 | |||||||||
| biały | 28 | 0 | ||||||||||
| beżowy | 0 |
Przykłady zastosowania kontrastu barw w projektach stron WWW
