Korostusväri

Korostusväri on visuaalisen suunnittelun väri, jota käytetään kiinnittämään huomio ja ohjaamaan käyttäjän toimintaa. Se on tärkeä osa visuaalista hierarkiaa sekä vuorovaikutteisten elementtien erottamista, kuten linkkejä, nappuloita, ilmoituksia ja valikoita. Korostusväri sijoittuu yleensä kontrastiin päävärin tai neutraalin taustan kanssa, jolloin se erottuu mutta säilyttää järjestelmän yhtenäisen ilmeen.

Korostusväri auttaa luomaan selkeän käyttäjäpolun ja nopeuttamaan vuorovaikutusta: se merkitsee toimintoja, uusia asioita tai palautetta. Suunnittelussa sitä käytetään harkiten: yleensä yksi pääkorostusväri ja mahdollisesti toinen, enintään muutama sävy koko tuotteen väriasteikossa. Sen tarkoituksena on tuoda visuaalinen paino ilman, että ilme muuttuu sekavaksi.

Saavutettavuus ja käytettävyys on huomioitava: väriä käytettäessä on varmistettava riittävä kontrasti sekä teksteissä että interaktiivisissa elementeissä. Pelkkä väri ei saa olla ainoa erottelukeino; käytetään lisäksi kuvakkeita, tilamerkintöjä tai tekstiä. WCAG-ohjeiden suositukset määrittelevät kontrastin vähimmäistasot, jotka koskevat sekä normaalitekstiä että käyttöliittymälementtejä.

Käytännössä korostusväri määritellään design systemissä: sitä hallitaan CSS-variabeleillä, ja tilat kuten normaalisti, hover, focus, aktiivinen ja poistettu käytöstä dokumentoidaan. Väri tulisi toimia brändin identiteetin ja käyttäjäkokemuksen ohjaajana sekä tarjota selkeä visuaalinen viesti ilman liiallista toistoa.