Koristeći kontrastne boje i pozadinske boje u web dizajnu

Poboljšajte čitljivost i korisničko iskustvo Vaše web stranice s odgovarajućim kontrastom

Kontrast ima važnu ulogu u uspjehu dizajna bilo koje web stranice. Od tipografije te stranice , do slika korištenih na cijelom web mjestu, do kontrasta između elemenata u pozadini i pozadinske boje - dobro osmišljena web-lokacija mora imati odgovarajući kontrast u svim tim područjima kako bi se osiguralo kvalitetno korisničko iskustvo i dugoročni uspjeh na web-lokaciji.

Nizak kontrast jednako je lošem iskustvu čitanja

Web stranice koje su preniske u kontrastu mogu biti teške za čitanje i upotrebu, što će negativno utjecati na uspjeh bilo kojeg web mjesta. Loši problemi s kontrastom boja često se lako identificiraju. To obično možete učiniti samo pretraživanjem stranice koja se prikazuje u web pregledniku i možete vidjeti je li tekst previše teško čitati zbog loših izbora boja. Ipak, iako je lako odrediti koje boje ne rade dobro zajedno, može biti vrlo zahtjevno odlučiti koje boje funkcioniraju dobro u suprotnosti s drugima. Možda nećete što raditi, ali kako ćete odrediti što radi? Slika u ovom članku trebala bi vam pokazati različite boje i kako se razlikuju kao boje prednje i pozadinske boje. Možete vidjeti neke "dobre" parove i neke "loše" uparivanje, što će vam pomoći da napravite prave izbore boja u svojim projektima.

Što se tiče kontrasta?

Jedna stvar koju treba zapamtiti je da je kontrast više nego samo kako je svijetla boja uspoređena s pozadinom. Kao što biste trebali vidjeti u gore spomenutoj slici, neke od tih boja su vrlo svijetle i pametno se prikazuju na pozadinskoj boji - poput plave boje na crnu, ali još uvijek sam označio da ima loš kontrast. To sam učinio jer, iako je možda sjajna, kombinacija boja i dalje čini tekst teško čitljiv. Ako biste trebali stvoriti stranicu u svim plavim tekstovima na crnoj pozadini, vaši čitatelji bi se vrlo brzo pojavili. Zato kontrast nije samo crno-bijeli (da, to je bio namijenjen). Postoje pravila i najbolje prakse za kontrast, ali kao dizajner morate uvijek procijeniti ta pravila kako biste bili sigurni da rade u vašem primjeru.

Odabir boja

Kontrast je samo jedan od čimbenika koje treba uzeti u obzir prilikom odabira boja za dizajn vaše web stranice, ali je važan. Prilikom odabira boja, obratite pažnju na standarde marke za tvrtku, ali biste također spremni obratiti se bojama boja koje, iako mogu biti u skladu s smjernicama marke organizacije, ne rade dobro na mreži. Na primjer, uvijek sam pronašao žute i svijetle zelje da se užasno izazov za učinkovito korištenje na web stranicama. Ako su te boje u smjernicama marke tvrtke, vjerojatno će ih trebati koristiti samo kao boja akcenta, jer je teško pronaći boje koje se dobro razlikuju.

Slično tome, ako su vaše boje marke crno-bijele, to znači veliki kontrast, ali ako imate web stranicu s dugačkim količinama teksta, crna pozadina s bijelim tekstom vrlo je teško čitati. Čak je i kontrast crno-bijelog velik, bijeli tekst na crnoj pozadini uzrokuje naprezanje očiju dugih prolaza. U ovom slučaju, obrisao bih boje da koriste crni tekst na bijeloj pozadini. To možda neće biti vizualno zainteresirano, ali nećete naći bolji kontrast od toga!

Online alati

Osim vašeg vlastitog smisla za dizajn, postoje i neki online alati kojima možete testirati izbor boja vaše web stranice.

CheckMyColors.com će testirati sve boje vašeg web mjesta i izvijestiti o omjeru kontrasta između elemenata na stranici.

Osim toga, kada razmišljate o izboru boja, trebali biste razmotriti dostupnost web mjesta i osobe koje imaju oblike sljepoće boja. WebAIM.org može pomoći s tim, kao i ContrastChecker.com, koji će testirati vaše izbore prema WCAG smjernicama.