Journal

Mikä on tehokkain CTA-painikkeen väri?

Kirjoittaja
Mait Lukka
Luku aika
5 min

Aika ajoin esiin nousee kysymys siitä, mikä on tehokkain väri CTA-painikkeelle. Punainen? Vihreä? Keltainen? Vai onko tällaista universaalia, kaikkiin tilanteisiin sopivaa ratkaisua edes olemassa? Se onkin kysymys erikseen.  

Kun asiaa tarkastellaan väriteorian näkökulmasta, parhaan huomioarvon saa kontrastivärillä. Eli mitä suurempi kontrasti taustan ja CTA-elementin välillä on, sitä korkeampi on myös sen huomioarvo.

vastavärit eli komplementariset värit
Vastavärit eli komplementariset värit

Toisin sanoen vastaväri eli komplementaarinen väri takaa terävimmän kontrastin. Vastavärin määrittäminen on helppoa väriympyrän avulla, sillä vastaväri sijaitsee väriympyrän vastakkaisella puolella valittuun väriin nähden.

vastavärin määritys väriympyrän avulla
Vastavärin määritys väriympyrän avulla

Vihreän vastaväri on punainen, sinisen vastaväri on oranssi, violetin vastaväri on keltainen ja niin edelleen. Jos haluat vastavärin tarkan arvon, mutta sinulla ei ole Adoben -lisenssia, voit poimia halutun värin hex-arvon esim. Keynoten tai Powerpointin Pipetin avulla.

Syötä hex-arvo ilmaiseen Color Calculator -sovellukseen. Painamalla Complementary -ikonia sovellus luo vastavärin arvon.

vastavärit väriympyrällä
Vastavärit väriympyrällä

Kun verkkosivuston pääväri on esimerkiksi vihreä, väriteorian näkökulmasta punainen väri toimii parhaiten huomion herättämisessä.

vihreä cta-painike vs. punainen cta-painike
Vihreä CTA-painike vs. punainen CTA-painike

Kun tausta on kokonaisuudessaan vihreä, punainen suorastaan paukkuu vihreällä taustalla.

vihreä painike vs. punainen bannereissa
Vihreä painike vs. punainen bannereissa

Toisaalta, mikä tahansa ns. huomioväri toimii hyvin tummalla taustalla, kuten keltainen, oranssi, pinkki, punainen tai vihreä.

eri huomiovärit cta-painikkeen värinä
Eri huomiovärit CTA-painikkeen värinä

Mikä tahansa huomioväri ei puolestaan aina toimi vaalealla taustalla.

Summa summarum

1. Parhaan huomioarvon saa vastavärin avulla.
2. Jos tausta on tumma, mikä tahansa vaalea väri tai huomioväri toimii riittävän hyvin. Varmista kuitenkin, ettei valittu huomioväri ole ristiriidassa brändisi graafisen ohjeen kanssa.
3. Vaalealla taustalla parhaiten toimivat tummemmat värit, esimerkiksi, sininen, violetti, punainen tai vihreä.

Kysyttävää? Autamme mielellämme!

Jäitkö vielä pohtimaan, miten huomio herätetään juuri teidän brändin mukaisesti? Sparraamme mielellämme lisä- ja huomiovärien kanssa. Autamme tarvittaessa myös värimäärittelyn ja graafisen ohjeen suunnittelussa sekä toteutuksessa. Kysy rohkeasti!