Korostusväri: näin valitset toimivan sävyn

Korostusväri on paletin pieni, erottuva sävy, joka osoittaa tärkeän asian: painettavan painikkeen, hinnan tai yhden sanan otsikossa. Aloita pohjaväreistä ja valitse niistä selvästi sävyltään, vaaleudeltaan tai kylläisyydeltään eroava väri. Käytä sitä säästeliäästi. Tutussa 60 30 10 -jaossa se on kymmenen prosenttia. Mitä harvemmin väri näkyy, sitä enemmän jokainen esiintyminen merkitsee.

Mihin korostusväriä tarvitaan

Suurin osa suunnitelmasta on pohja- ja tukivärejä: taustoja, paneeleja ja tekstiä. Korostus on poikkeus, joka kertoo katseelle suunnan. Siksi se on palettisi toiminnallisin väri. Verkkosivulla se merkitsee ensisijaisen toiminnon, julisteessa päivämäärän. Brändissä siitä tulee muistettava yksityiskohta, kuten värillinen piste tai yksi kirkas raita.

60 30 10 -sääntö antaa mittasuhteet: noin kuusikymmentä prosenttia hallitsevaa väriä, kolmekymmentä toissijaista ja kymmenen korostusta. Pidä kymmentä ylärajana, älä tavoitteena. Monet parhaista asetteluista käyttävät paljon vähemmän.

Korostusvärin valinta

Kontrasti on koko tehtävä. Katso pohja- ja tukivärejäsi. Selvitä, mikä niitä yhdistää, ja tee korostuksesta selvästi erilainen ainakin yhdellä tavalla.

1. 1

   Sävykontrasti

   Valitse väriympyrän vastakkaiselta puolelta. Laivastonsininen ja sinivihreä paletti kaipaavat lämpimiä korostuksia, kuten korallia tai meripihkaa. Lämmin paletti kaipaa sinistä tai vihreää. Vastavärit ovat klassinen valinta.

2. 2

   Vaaleuskontrasti

   Tummalle pohjalle vaalea korostus, vaalealle syvä. Hillitty harmaapaletti voi käyttää korostuksena mustaa yhtä hyvin kuin kirkasta väriä.

3. 3

   Kylläisyyskontrasti

   Pehmeiden, pölyisten värien joukossa yksi kylläinen väri toimii korostuksena, vaikka sen sävy olisi sama. Hyvä esimerkki on savipaletti ja puhdas vermilionkorostus.

4. 4

   Testaa oikeassa koossa

   Korostus on yleensä pieni. Tarkista se painikkeen tekstinä tai ohuena alleviivausviivana, älä suurena värilaatikkona. Pienet värialueet näyttävät tummemmilta ja himmeämmiltä.

Missä korostusta kannattaa käyttää ja missä välttää

Kirkkaat korostukset, kuten lime, keltainen ja minttu, eivät usein toimi tekstinä valkoisella. Käytä niitä täyttöväreinä tumman tekstin alla. Tarkista parit värikontrastin ohjeista: vähintään 4,5:1 leipätekstille ja 3:1 suurelle tekstille sekä käyttöliittymän osille.

Pikainen tarkistus auttaa, jos korostus on levinnyt kaikkialle. Ota kuvakaappaus etusivusta tai viikon julkaisuista, sumenna sitä hieman ja katso, missä korostus näkyy. Jos katse osuu kolmeen tai neljään paikkaan yhtä aikaa, vaihda kaikki tärkeintä lukuun ottamatta tukiväriksi. Jos katse ei osu mihinkään, korostus on todennäköisesti liian lähellä pohjaa ja tarvitsee lisää sävy- tai vaaleuskontrastia.

CSS:n accent-color-ominaisuus

Verkossa accent-color värjää selaimen omat lomakesäätimet yhdellä rivillä: valintaruudut, valintanapit, liukusäätimet ja edistymispalkit. Suurten selainten nykyversiot tukevat sitä. MDN:n viite kertoo yksityiskohdat.

:root {
  --accent: #d42a35;
}

/* Native checkboxes, radios, sliders and progress bars */
body {
  accent-color: var(--accent);
}

/* The same accent on your own components */
.button-primary {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: #b3202a; /* a deeper shade for text links on white */
}

Selain voi muuttaa säätimen sisäisen rastin tai kahvan väriä, jotta se erottuu korostuksestasi. Testaa siksi sekä vaaleita että tummia korostuksia. Sivuston muista väreistä kertoo verkkosivun värimaailma.

Korostukset liukuväreissä ja valokuvissa

Runsaalla taustalla korostus kilpailee useamman asian kanssa. Valitse se taustan väriperheen ulkopuolelta: lämmin korostus viileälle liukuvärille tai lähes valkoinen värikkäälle. Gradientlyn Automaattinen muste valitsee jokaiselle riville vaalean tai tumman tekstin Markin omasta paletista. Sanat pysyvät luettavina taustan liikkuessa, ja korostus voi keskittyä yhteen tehtäväänsä. Yhden vahvan värin ympärille rakennetuista paleteista kertoo teknologiabrändien väripaletit.