A design system színskálája a vizuális észlelés, az inkluzív design és a tudatos színhasználat alapelveit követi. A színek következetes használatával a felület fontos elemeit, a következő lépéseket vagy az esetleges hibákat könnyebben felismerik a felhasználók.
A digitális állami szolgáltatások főként információs és funkcionális felületekből állnak, amiket az állampolgárok konkrét ügyintézésre használnak. A színhasználatnak ezt a használati módot kell támogatnia, és erősítenie kell a jelentésbeli és tartalmi hierarchiát.
Ennek megfelelően olyan színrendszert hoztunk létre, ahol minden színnek meghatározott jelentése és szerepe van.
Az olvashatóságot a tipográfia mellett leginkább a szöveg és a háttér kontrasztaránya befolyásolja. A túl alacsony kontraszt nem csak a gyengénlátó felhasználóknak okoz problémát.
-
A magasabb kontraszt bizonyos szituációkban mindenki számára előnyös (például ha napsütésben használjuk a mobiltelefonunkat).
-
A túl magas kontraszt viszont vizuális vibrálást eredményezhet, és egyes felhasználóknak (például a diszlexiásoknak) csökkentheti az olvashatóságot.
A design system színpalettájának segítségével megfelelő kontrasztú szövegek és UI-elemek hozhatók létre, ami az akadálymentesítési szempontoknak is megfelelnek.
A színek nemcsak árnyalatukban, hanem fényerősségükben is különböznek. Így akár monokróm eszközökön is megkülönböztethetőek maradnak az elemek.
A színérzékelésbeli különbségek miatt a szín önmagában nem elég az információk közlésére. A színvak vagy színtévesztő felhasználók csak színek alapján nem biztos, hogy értelmezni tudják a látottakat. (Magyarországon a férfiak közel 8 százaléka színvak vagy színtévesztő.)
Ezért a design system olyan komponensei, mint a hibaüzenetek vagy státuszjelölők a szín mellett egyéb jelölőket, ikonokat és szövegeket is tartalmaznak.
A színrendszert az OKLAB színtérben alakítottuk ki. Segítségével biztosíthatjuk az egyenletes fényerősséget, a jobb minőségű színátmenteket, és megkönnyíthetjük a design és fejlesztési munkát.
Mivel több közigazgatási szervezetnek erős, jól felismerhető arculata van, a design systemet úgy terveztük, hogy a márkaszín cserélhető legyen.
A választott márkaszínhez könnyen készíthetők további árnyalatok a kontrasztkövetelmények megtartásával.
A design systemben több színpaletta található. Ezek különböző, meghatározott használati esetekre készültek.
A design system színpalettájának alapja egy 20 árnyalatból álló, neutrális szürke paletta, ami biztos alapot ad a felhasználói felületeknek.
Az árnyalatokat funkciójuk szerint alkalmazzuk.
- 100-300: hátterek
- 400-800: dekoratív elemek (elválasztók, nem interaktív elemek keretei, nem funkcionális ikonok)
- 900: szövegek, UI-elemek
Az elsődleges vagy márkaszín a rendszer egyetlen változója. A dekoratív és UI-elemek nagy része ebből a színből építkezik.
A szemantikus színek egyértelmű jelentést hordoznak. Csak olyan esetekben lehet használni őket, amikor kifejezetten közvetíteni szeretnénk a színhez társított jelentést (pl. hiba, figyelmeztetés, siker).
A kiegészítő színeket nem szemantikus kiemeléseknél, dekorációknál vagy illusztrációknál lehet használni.
A felhasználói felület minden elemének a design system által meghatározott színekből kell felépülnie, mivel csak így biztosítható a konzisztencia és az akadálymentesítési előírásoknak való megfelelés.
Új komponensekhez csak color-semantic tokenek használhatók. A color-foundations és a color-theme tokenek nem használhatók.
A színtokenek és változók elnevezései utalnak a felhasználási módjukra is. Következetes használatukkal biztosítható a kontraszt és akadálymentesítési követelményeknek való megfelelés.
A design systemben meghatározott transzparens színeket kizárólag interakciós állapotok jelölésére lehet használni.
Csak színekkel történő kommunikáció esetén bizonyos felhasználók (pl. színvakok vagy színtévesztők) félreérthetik a felületet. A színjelöléseket ikonokkal és szövegekkel kell kiegészíteni.
