A design system színskálája a vizuális észlelés, az inkluzív tervezés és a tudatos színhasználat alapelveit követi. A színhasználat szabályrendszerének követésével segíthetünk a felhasználóknak azonosítani, hogy a felület mely elemei igényelnek figyelmet, mik a következő lépések vagy az esetleges hibák.
A digitális állami szolgáltatások főként információs és funkcionális felületekből állnak, és az állampolgárok tranzakcionálisan veszik őket igénybe. A színhasználatnak ezt a tranzakcionális viszonyt kell támogatnia, és erősítenie kell a jelentésbeli és tartalmi hierarchiát.
Ennek megfelelően olyan színrendszert hoztunk létre, amely jól megfontolt céllal használja a színeket, azaz a színeknek szemantikai jelentésük 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 – például ha napsütésben használjuk a mobiltelefonunkat – mindenki számára előnyös.
- 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ája megfelel a WCAG luminancia-alapú kontraszt elvárásának és az APCA értéknek. Így a színek szemantikai címkéit használva megfelelő kontrasztú szövegek és interfész elemek állnak elő.
A színek nemcsak árnyalatukban, hanem fényerősségükben is különböznek, ezért 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 nem biztos, hogy csak a színek alapján értelmezni tudják a látottakat. (Magyarországon a férfiak közel 8%-a színvak vagy színtévesztő.)
A deuteranópiával, azaz zöldszín-tévesztéssel élő felhasználók a piros és zöld színeket sárgaként és barnaként érzékelik. Ez nem hordozza az eredeti színek a hiba és a helyes jelentését.
A design system releváns komponensei – hibaüzenetek, 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. Ez a színtér az RGB vagy az abból származtatott HSL/HSV színtérnél alkalmasabb a keretrendszer számára.
- Az OKLAB színtér fényerőssége perceptuálisan uniform. Ez a kiszámíthatóság alkalmassá teszi programatikusan színpaletta generálására.
- Az OKLAB színátmenetek nem generálnak halott zónákat a grádiens interpoláció során.
- Az OKLAB nagyobb gamuttal rendelkezik, mint az RGB, és támogatja a P3/wide-gamut kijelzőket is.
- A CSS Module 4 az OKLAB és a könnyebben olvasható LCH formátumot is támogatja. Ez könnyű átjárhatóságot biztosít a design és a kód között.
Mivel több közigazgatási szervezetnek erős, jól felismerhető arculata van, a design system brand színe kicserélhető. A brand szín további árnyalatai a választott szín alapján könnyen generálhatóak.
Az így generált paletta árnyalatai ugyanúgy tartják a kontrasztcélokat, mint a rendszerben alkalmazott egyéb színek árnyalatai.
A színrendszer támogatja a sötét témák használatát. A sötét témában a skálák alacsonyabb fényességértékű árnyalatait használjuk a kontraszt célokat továbbra is tartva.
A legtöbb operációs rendszer legalább egy speciális szín- és kontrasztmódot kínál az asszisztív beállítások között.
A design system komponenseit úgy építjük fel, hogy érvényesüljenek ezek a beállítások, a saját színtémáink nem írják felül őket.
A keretrendszer magja egy 20 árnyalatot tartalmazó neutrális szürke paletta. A neutralitás biztos alapot teremt a felhasználói felületeknek, amit az egyes árnyalatok meghatározott funkciónak leírása foglal rendszerbe.
Az első három szín (100-300) a hátterekhez használható.
- Az alapértelmezett háttérszín a 100-as.
- A kontraszt megfelelőségét a 300-as, azaz a legsötétebb háttérként használható színhez mértük. Ezzel biztosítjuk, hogy minden háttérszínnél megfelelő legyen a kontraszt.
A 400 és 800 közötti színek a dekoratív elemekhez – elválasztók, nem interaktív elemek keretei, nem funkcionális ikonok – használhatók.
A 900-as színnél a 3:1, az 1000-es színtől felfelé pedig a 4.5:1 kontrasztarány biztosított, így ezek a színek a szövegekhez és az interfész elemekhez használhatók.
Ezek a szemantikai jelölések minden további színpalettára igazak.
A brand szín a rendszer egyetlen változója. Ebből a színből építkezik az interfész elemek és a dekoratív elemek nagy része.
A szemantikus színek erős jelentéssel bírnak. Ezek a színek csak akkor – például visszajelzésekre szolgáló interfész elemeknél – használhatók, ha kifejezett cél ezen jelentések átadása.
A kiegészítő színek nem szemantikus kiemeléseknél, dekorációknál vagy illusztrációknál használhatók.
Az interfész minden részének a design system által meghatározott színekből kell felépülnie, különben sem a konzisztencia, sem az akadálymentesítési előírásoknak való megfelelés nem áll elő.
Új komponensek építésekor a color-semantic kollekcióban levő tokeneket használd. Ne használj tokeneket a color-foundations, illetve color-theme kollekciókból.
A színtokenek és változók nevei utalnak a használatukra is, ezek követésével érhetőek el a kontraszt és egyéb akadálymentesítési célok.
A design systemben definiált transzparens színek kizárólag interakciós állapotok jelölésére alkalmazhatóak.
Ha csak pusztán a színt használod információ közlésre bizonyos felhasználók, például színvakok vagy színtévesztők nem feltétlenül úgy fogják értelmezni a felületet ahogy tervezted. Használj ikonokat és feliratokat.
