Vinkit kotisivun värien valintaan

Jos olet tekemässä kotisivua yri­tyk­sel­le­si ja käy­tös­sä­si on graafinen ohjeistus, kannattaa sivustosi väri- ja font­ti­va­lin­nat tehdä niitä silmälle pitäen. Monesti oh­jeis­tuk­sis­sa on mää­ri­tet­ty erikseen säh­köi­sis­sä ym­pä­ris­töis­sä käy­tet­tä­vät fontit. Väritkin löytyvät normaalisti Hex -värikoodeina, jotka voit syöttää suoraan teeman asetuksiin.


Jos yri­tyk­sel­lä­si ei ole vi­ral­lis­ta graafista oh­jeis­tus­ta, mutta olet tehnyt esi­mer­kik­si pai­no­tuot­tei­ta (käyn­ti­kort­te­ja, esitteitä jne.), kannattaa net­ti­si­vun tyyli pitää samassa linjassa.


Jos sinulla ei ole mitään valmista materiaalia, josta ottaa inspiraatiota nettisivuihin, valitse lähtökohdaksi vaikkapa Unsplash-palvelusta kuva, jonka värimaailmasta tykkäät ja tallenna se koneellesi. Netissä on olemassa palveluita, kuten Adoben Color, johon voit ladata kuvan koneeltasi ja ohjelma tekee sen pohjalta harmonisia väriyhdistelmä-ehdotuksia kopioitavine hex-koodeineen (ruutukaappaus työkalusta alla).

1660639786010_adobe-color-poimi-teema-me.png

Kiinnitä huomiota saa­vu­tet­ta­vuu­teen

Sivuston ra­ken­net­ta, graafista ilmettä ja vä­ri­maa­il­maa suun­ni­tel­les­sa­si kiinnitä erityistä huomiota saavutettavuuteen. Varmista, että kaikki tär­keim­mät elementit ja sisällöt (esim. yh­teys­tie­dot) ovat helposti löydettävissä ja luettavissa. Etenkin värejä valitessa on hyvä pitää mielessä, että esimerkiksi tekstin tulee erottua tarpeeksi hyvin taustasta ja värien va­lin­nas­sa kannattaa ottaa huomioon myös vä­ri­so­keat käyttäjät.


Eri vä­riyh­dis­tel­mien tes­tauk­seen on netissä saa­ta­vil­la apu­vä­li­nei­tä, esi­mer­kik­si Adoben kontrastin tarkistustoiminto, johon voit syöttää kaksi eri väriä ja sivu kertoo onko näiden välinen kontrasti riittävä.

1660639785901_adobe-color-kontrasti-me.png

Samalta sivulta löytyy myös ”Help­po­käyt­tö­työ­ka­lut” -kohdan alta ”Värisokeussuojattu” -työkalu, joka simuloi eri värien kont­ras­tia vä­ri­so­kean silmin.