Kontraszt a webdesignban: mire és hogyan használd?

Sokan, amikor a kontraszt szót meghallják, arra gondolnak, hogy az új weboldalukon fehér alapon fekete a szöveg, tehát jó a kontraszt, léphetünk tovább. A kontraszt azonban nem merül ki ennyiben, hiszen nem is csak a színek kapcsán beszélhetünk kontrasztról egy weboldalon, miközben rendkívül fontos a szerepe a webdesginban. A hiánya pedig teljesen használhatatlanná tehet egy weboldalt.

Egy weboldalon a kontraszt felel azért, hogy megjelenjen a vizuális hierarchia, mely által értelmezhetővé válik a tartalom. A jó kontraszt elengedhetetlen egy jó weboldalhoz, használatával vezethető a látogatók tekintete az oldalon, segítségével úgy rendezhetők az elemek, hogy a figyelem a legfontosabb területre essen.

A grafikus designban kontrasztról két olyan elem esetén beszélünk, melyek „ellentétes módon” vannak ábrázolva. Lényegében a kontraszt a különbséget jelenti két elem között. Ha nagyobb a különbség, akkor nagyobb a kontraszt, ami kiemeli az egyik elemet. A megfelelő kontraszt révén nemcsak jobban néz ki a weboldalad, hanem irányíthatod a felhasználói viselkedést.

Kontraszt a színeknél

A legegyszerűbb megjelenése a kontrasztnak, amikor a színeknél használjuk. A színkontraszttal érdekesebbé tehető a design, ráadásul nem is csak egyféle módon. Használhatsz például sötét és világos színeket, eltérő színárnyalatokat, színhőmérsékleteket  a kontraszt kialakítására.

Sötét és világos színárnyalatokkal könnyen létrehozható a kontraszt, gondolj csak a fehér háttéren a sötét szövegre, vagy épp fordítva. Ugyanakkor használhatsz különböző színkombinációkat is.

Sötét és világos színek kontrasztja

A legnagyobb kontraszt a tiszta fehér és a tiszta fekete között van. Ezt nem is nagyon használják a webdesignban, legalábbis normális webdesign esetén. De kontrasztot nem csak fekete-fehér színekkel lehet kialakítani. Az egyik legegyszerűbb megoldás, ha növelni akarod a kontrasztot, és így ki akarsz emelni bizonyos elemeket a weboldalon, ha világosabb szín mellé egy sötétebbet helyezel.

Kontraszt a színhőmérsékletnél

A színek hőmérsékletük alapján három csoportba sorolhatók: lehetnek hidegek, melegek és semlegesek. A meleg színek közé tartozik például a piros, a narancs vagy a sárga, míg a hideg színek közé például a kék vagy a zöld. A fekete, a fehér és a szürke pedig semleges szín. Amennyiben hideg és meleg színeket párosítasz egy webdesignban, akkor azzal erős kontrasztot alakíthatsz ki.

Kontraszt az intenzitásnál

Egy szín intenzitását a telítettség-értékével fejezik ki. Száz százalékos szaturációnál megkapod egy szín legtisztább, legerősebb verzióját. Minél közelebb kerül azonban a szürkéhez, annál telítetlenebbé válik. Telített és telítetlen színek segítségével kontraszt alakítható ki. Önmagukban a telített színek egy semleges színre ráhelyezve is kontrasztosak, de nem érdemes visszaélni ezzel a tulajdonságukkal.

Mit ajánl a WCAG a kontraszt irányelveknél?

A WCAG a kontrasztarányt használja a színkontraszt meghatározására. Ez 1:1-től 21:1-ig változhat. Minél nagyobb a kontrasztarány, annál könnyebb elkülöníteni a szöveget a háttértől. Az 1:1 kontrasztarány azt fejezi ki, amikor a fehér háttérre fehér betűkkel írunk, míg a 21:1 kontrasztaránynál fekete betűk kerülnek rá.

Mint látható, a gyenge kontraszt problémát okoz a szövegeknél. A WCAG ezért minimum 4,5:1 kontrasztarány javasol a szövegeknél. Ez azonban a szöveg méretétől is függ, így 18 pontos vagy vastagon szedett 14 pontos betűknél 3:1 kontrasztarány is megfelelő lehet. Ezt a minimum 3:1 kontrasztarányt a weboldal minden eleménél be kell tartani. Vagyis vedd figyelembe, amikor színpalettát készítesz.

A WCAG-megfelelőségnek három fokozata van: A, AA és AAA. Utóbbi esetében a nagyméretű szövegeknél 4,5:1 kontrasztarányt írnak elő. A kontrasztarányt különféle eszközökkel ellenőrizheted, mint például a Wave vagy a Color Contrast Analyzer.

Színvakság

A színvakság kapcsán elsősorban azt érdemes tudni, hogy a leggyakrabban a piros/zöld színeknél fordul elő. Ez azt jelenti, hogy bármely árnyalat vörös és zöld részei nem úgy jelennek meg egy adott személy számára, ahogy kellene. Tehát például a lilát kéknek látják, mivel a lilát a piros szín mozdítja el a kéktől.

Ez persze megbonyolítja a helyzetet, amikor színválasztásról van szó. Ha például zöld lesz a háttered színe, vagy akár zöld lesz a betűszín, akkor a célközönséged egy része nehezen fogja olvasni a szöveget.

Kontraszt a méretnél

Nem csak a színekkel lehet kontrasztot elérni, hanem a mérettel is. A méretkontraszt a különböző grafikus elemek méretezésével alakítható ki. Nyilván a nagyobb elemek lesznek a jelentősebbek, melyekre elsőként pillantanak a weboldalra érkező látogatók.

Méretkontrasztot bárhol használhatsz a designban, így a szövegeknél vagy az egyes formáknál is. Ha valamely szöveget vagy formát nagyobbra veszed, akkor felhívod rá a figyelmet. Teljesen megszokott megoldásként a címsoroknál jelenik ez meg, melyek elsősorban méretűkkel hívják fel magukra a figyelmet.

Amennyiben ki akarod használni a méretkontrasztot a designban, akkor figyelembe kell venned, hogy a nagyobbra méretezett elemeknek valóban fontosabbnak kell lenniük, mint a kicsiknek.

Kontraszt a vizuális súly révén

A vizuális súly azt fejezi ki, hogy a weboldal valamely eleme mennyire különbözik a design többi részétől, azaz mennyire kontrasztos az adott elem. Ugyanakkor a vizuálisan legjelenősebb elem nem feltétlenül a legnagyobb eleme az oldalnak. A szín, a mintázat, a forma vagy bármely tulajdonság révén különbözhet egy elem, ezáltal növelve saját vizuális súlyát, és megragadja a felhasználó figyelmét. Leegyszerűsítve itt arról van szó, hogy mennyire teszel feltűnővé egy elemet.

Kontraszt a tipográfiánál

A betűknél azáltal jeleníthető meg kontraszt, hogy két erősen eltérő betűt használunk a szövegben. Kétféle betűtípus megjelenhet a cím és a szövegtörzs esetében, ezzel fejezve ki, hogy a címsor a legfontosabb része a szövegnek. Érdemes figyelembe venni azt is, hogy míg a díszes betűtípusok jó kontrasztot alakíthatnak ki az egyszerűbb betűkből álló szövegtörzzsel, addig az olvashatóságuk gyengébb. Ezért nem szabad hosszú szövegeknél alkalmazni.

Kontraszt a tereknél

A negatív tér vagy whitespace, illetve a szövegigazítás szintén segít a struktúra és a hierarchia kialakításában. Például, ha tervezel egy oldalt egy csomó tartalommal, akkor a kritikus elem köré elhelyezett, a megszokottnál nagyobb tér kiemeli az elemet és felhívja rá a felhasználó figyelmét.

A teret használjuk akkor is, ha összetartozó elemeket egymás közelébe helyezünk, így a felhasználó arra következtet, hogy ezek valamiképpen összetartoznak. A kontrasztot már azáltal is kialakíthatod a weboldaladon, ha tudatosan használod erre a whitespace-t.

Címkék: webdesign

Hozzászólás jelenleg nem lehetséges.