Uporaba kontrastnih slik v ozadju in ozadju v spletnem oblikovanju

Izboljšajte branje svojega spletnega mesta in uporabniško izkušnjo z ustreznim kontrastom

Kontrast igra pomembno vlogo pri uspehu oblikovanja katerega koli spletnega mesta. Od tipografije tega spletnega mesta do slik, uporabljenih na celotnem spletnem mestu, do kontrasta med elementoma v ospredju in barvami v ozadju - dobro zasnovana stran mora imeti ustrezen kontrast na vseh teh področjih, da se zagotovi kakovostna uporabniška izkušnja in dolgoročni uspeh na spletnem mestu.

Nizek kontrast je enako slabemu branju

Spletne strani, ki so premajhno v nasprotju, je težko brati in uporabljati, kar bo negativno vplivalo na uspeh katerega koli spletnega mesta. Težave s slabim barvnim kontrastom so pogosto lažje prepoznati. To lahko ponavadi storite samo tako, da poiščete stran, ki je prikazana v spletnem brskalniku, in vidite, ali je besedilo pretežno berljivo zaradi slabih barvnih izbir. Kljub temu, da je lahko težko ugotoviti, katere barve ne delujejo dobro, je lahko zelo težko odločiti, katere barve delujejo dobro v nasprotju z drugimi. Ne morete, kaj ne deluje, ampak kako boste ugotovili, kaj deluje? Slika v tem članku naj bi vam pomagala prikazati različne barve in kako se razlikujejo kot barve ospredja in ozadja. Vidite lahko nekaj "dobrih" parov in nekaj "slabega" seznanjanja, kar vam bo pomagalo pri izbiri pravilnih barv v svojih projektih.

Glede kontrasta

Ena stvar, ki jo morate opozoriti, je, da je kontrast več kot le, koliko svetla barva primerja z ozadjem. Kot bi morali videti v tej zgoraj omenjeni sliki, so nekatere od teh barv zelo svetle in se močno pojavljajo na barvi ozadja - na primer v modri barvi na črni barvi, vendar jo še vedno označujem kot slab kontrast. To sem naredil, ker je kombinacija barv, čeprav je lahko svetla, še vedno težko prebrati besedilo. Če bi morali ustvariti stran v vsem modrem besedilu na črnem ozadju, bodo vaši bralci zelo hitro imeli očesne oči. Zato kontrast ni samo črno-beli (da, ta pun je bil namenjen). Obstajajo pravila in najboljše prakse za kontrast, ampak kot oblikovalec morate vedno ovrednotiti ta pravila, da se prepričate, ali delujejo v vašem posebnem primeru.

Izbira barv

Kontrast je le eden izmed dejavnikov, ki ga je treba upoštevati pri izbiri barv za oblikovanje vašega spletnega mesta, vendar je to pomembno. Ko izberete barve, bodite pozorni na standarde blagovne znamke podjetja, hkrati pa bodite pripravljeni obravnavati barvne palete, ki pa, čeprav so v skladu s smernicami organizacije za blagovno znamko, ne delujejo dobro na spletu. Na primer, vedno sem našel rumeno in svetlo zelenjavo, ki je grozljivo izziv za učinkovito uporabo na spletnih straneh. Če so te barve v smernicah za blagovno znamko podjetja, jih bo verjetno treba uporabiti samo kot naglasne barve, saj je težko najti barve, ki dobro ustrezajo.

Podobno, če so vaše barve znamk črno-bele, to pomeni velik kontrast, če pa imate spletno stran z dolgimi količinami besedila, ima črno ozadje z belim besedilom zelo težko branje. Tudi kontrast med črno-belo je odličen, belo besedilo na črnem ozadju povzroči napetost oči za dolge prehode. V tem primeru bi barve obrnil, da bi črno besedilo uporabljali na belem ozadju. To morda ni tako vizualno zanima, vendar ne boste našli boljšega kontrasta kot to!

Spletna orodja

Poleg lastnega oblikovalskega smisla obstaja nekaj spletnih orodij, ki jih lahko uporabite za preizkušanje barvne izbire na vašem spletnem mestu.

CheckMyColors.com bo preizkusil vse barve vašega spletnega mesta in poročal o kontrastnem razmerju med elementi na strani.

Poleg tega pri razmišljanju o barvnih odločitvah upoštevajte tudi dostopnost do spletnih strani in osebe, ki imajo oblike barvne slepote. WebAIM.org lahko s tem pomaga, kot tudi ContrastChecker.com, ki bo preizkusil vaše odločitve glede na smernice WCAG.