Siirry sisältöön

Värit tummassa tilassa

Ohjeita ja periaatteita värien käyttöön tummassa tilassa.

Yleistä

Tumman tilan käyttö on yleistynyt nopeasti digitaalisten sovellusten ja verkkosivustojen käyttöliittymissä. Ulkoasun tumma tila ei ole pelkästään esteettinen valinta, vaan sillä on myös käytettävyyteen ja saavutettavuuteen liittyviä etuja.

Tummassa tilassa värien käyttö on tärkeä osa käyttökokemusta. Tietyille käyttäjäryhmille, kuten henkilöille joilla on valoherkkyyttä tai heikentynyt näkökyky, tumma tila voi tarjota rauhallisemman yleisilmeen, paremman kontrastin ja helpomman luettavuuden.

Kela Design Systemin tumma tila

Kela Design System tarjoaa valmiit tumman tilan tyylit Kelan ja Kannan ulkoasuteemoille. Lue ohjeet KDS:n tumman tilan käyttöönotosta ja soveltamisesta.

KDS:n tumma tila käyttää samaa värijärjestelmää, kuin vaalea tila.

Värien käyttö tummassa tilassa

Tumman tilan tarkoituksena on tarjota käyttäjälle ulkoasu, jossa taustavärit ovat pääosin tummia ja teksti vaaleaa. Värien tasapaino on tärkeää, sillä voimakkaat värit voivat aiheuttaa silmien rasitusta, kun taas liian haaleat värit heikentävät luettavuutta.

Huomioi värien soveltamisessa aina saavutettavuuskriteerit.

Tee näin
  • Käytä tummia taustavärejä ja vaaleita tekstivärejä.
  • Käytä korostusvärejä harkiten.
  • Suosi neutraaleja ja vähemmän saturoituneita värisävyjä.
  • Huomioi saavutettavuus ja varmista riittävä kontrasti.
Älä tee näin
  • Älä käytä vaaleita taustoja ja tummia tekstejä.
  • Älä käytä liian monia eri värejä, jotta kokonaisuus pysyy selkeänä ja rauhallisena.
  • Älä käytä liian kirkkaita tai saturoituneita värejä.

Taustavärit

Tummassa tilassa taustaväreinä käytetään pääsääntöisesti harmaan tummia sävyjä. Kokonaan mustan käyttöä laajoissa pinnoissa kannattaa välttää, syvä harmaa luo pehmeämmän vaikutelman ja parantaa luettavuutta.

KDS:n tummassa tilassa sovelluksen taustaväri on #121212.

Käytettäessä muita väripaletin värejä taustaväreinä, esimerkiksi nostoissa tai muissa korostetuissa sisällöissä, on pyrittävä valitsemaan värin tumma sävy taustaa varten ja näyttämään teksti vaaleana.

Tekstiväri

Tekstiväri on tummassa tilassa vaalea. Kokonaan valkoisen sijaan voi olla hyvä käyttää harmaan vaaleata sävyä, jolloin saadaan aikaan pehmeämpi vaikutelma.

KDS:n tummassa tilassa tekstin väri on vaaleanharmaa #eef6ff.

Korostusvärit

Korostusvärejä kannattaa tummassa tilassa käyttää harkiten. Näin sävyt kiinnittävät huomion olennaiseen kuormittamatta visuaalista ilmettä. Vältä liian kirkkaita värejä, jotka voivat rasittaa silmiä.