Kontrast

Kontrast je razlika u svjetlini između teksta i pozadine na kojoj stoji. Što je razlika veća, tekst se lakše čita. U dizajnu sajta se mjeri omjerom, od 1:1 za tekst iste boje kao pozadina do 21:1 za crno na bijelom.

Kontrast je jedan od rijetkih dijelova dizajna koji se može izmjeriti. Zato se o njemu ne mora raspravljati po ukusu.

Kako se mjeri

Omjer se računa iz svjetline dvije boje. Sama nijansa skoro da nije bitna: tamnoplava i tamnosmeđa na bijelom mogu imati isti omjer.

Smjernice za pristupačnost weba, poznate kao WCAG, traže:

• najmanje 4,5:1 za obični tekst;
• najmanje 3:1 za veliki tekst, otprilike od 24 piksela, ili od 19 piksela kad je podebljan;
• najmanje 3:1 za dugmad, rubove polja u formi i ikone koje nešto znače.

Strožiji nivo traži 7:1 za obični tekst. Za većinu sajtova je dovoljno da sav tekst prođe prvi nivo.

Zašto se tiče svakog sajta

Najčešće se misli na ljude koji slabije vide. Kontrast pogađa i one koji vide dobro: čovjeka koji telefon gleda na suncu, na gradilištu ili u autu, i starijeg kupca koji nije ponio naočale.

Kod nas se veliki dio posjeta dešava na telefonu, često na ekranu s utišanom svjetlinom. Svijetlosiv tekst koji na monitoru u agenciji izgleda elegantno, na takvom telefonu se jedva vidi.

Gdje se najčešće gubi

Prvo mjesto je svijetlosiv tekst na bijelom. Koristi se za opise, datume i sitna slova, a baš tu stoje uslovi, cijene i radno vrijeme.

Drugo je tekst preko fotografije. U hero sekciji bijeli naslov stoji na slici koja je negdje tamna, a negdje svijetla. Na računaru se čita, a na telefonu se slika izreže drugačije i pola naslova završi na nebu.

Treće je boja brenda koja nije birana za tekst. Narandžasta, žuta i svijetlozelena dobro izgledaju u logu, a kao boja dugmeta s bijelim tekstom obično padnu.

Četvrto su forme. Polje bez vidljivog ruba i natpis u svijetlosivom unutar polja izgledaju čisto, ali posjetilac ne zna gdje da klikne.

Kontrast i boje brenda

Kad boja brenda ne prolazi s bijelim tekstom, ima nekoliko rješenja. Može se koristiti tamni tekst na boji brenda. Može se za dugmad uzeti tamnija nijansa iste boje. Ili se boja brenda ostavi za površine i ukrase, a za tekst i dugmad se uzme druga iz palete boja.

Najbolje je to riješiti dok se paleta pravi, i zapisati u knjigu standarda koja kombinacija smije nositi tekst. Tako se ista greška ne ponavlja na svakom novom letku i oglasu.

Paletu i omjer za svaku boju možete provjeriti i u našem besplatnom generatoru palete boja.

Kontrast i hijerarhija

Kontrast određuje i šta oko vidi prvo. Dugme s jakim kontrastom privuče pogled, a dugme koje se stapa s pozadinom ostane neprimijećeno.

Zato se u vizuelnoj hijerarhiji kontrast koristi namjerno: najjači za glavni CTA, slabiji za sporedne linkove. Ako je sve jednako jako, ništa se ne izdvaja.

Isto važi za tekst. Naslov, podnaslov i sitna slova mogu se razlikovati po veličini i težini slova, dok sva tri i dalje imaju dovoljan kontrast prema pozadini.

Kako se provjerava

Najbrže je u pregledaču Chrome. Desni klik na tekst, Pregledaj element, i uz boju teksta stoji omjer s oznakom da li prolazi. Postoje i besplatni alati u koje se upišu dvije boje.

Tekst preko fotografija se provjerava okom, na telefonu, na najsvjetlijem dijelu slike. Pomaže tamni sloj preko fotografije ili traka iza teksta.

Kod štampe važe slična pravila, s tim da boje na papiru izađu tamnije ili bljeđe nego na ekranu. Zato se kod pripreme za štampu sitan tekst ne stavlja na srednje tonove.

Tamni način prikaza

Sve više telefona radi u tamnom načinu prikaza, a neki sajtovi tada okrenu boje. Svijetli tekst na tamnoj pozadini ima ista pravila, ali drugačije greške. Boja brenda koja je na bijelom bila dovoljno tamna, na crnom postane pretamna i stopi se s pozadinom.

Ako sajt ima tamnu verziju, svaka kombinacija iz palete se provjerava dvaput, jednom za svaku pozadinu. Isto važi za logo, kojem na tamnoj pozadini često treba svijetla verzija.

Primjer iz prakse

Turistička agencija iz Stoca ima sajt u bojama maslina: maslinastozelena dugmad s bijelim tekstom i svijetlosivi opisi aranžmana. Upita s telefona je primjetno manje nego s računara.

Provjera pokaže da dugmad imaju omjer oko 2,5:1, a opisi s cijenama oko 2:1. Dugmad dobiju tamniju nijansu iste zelene, opisi postanu tamnosivi, a naslov preko fotografije dobije tamni sloj. Izgled sajta se skoro ne promijeni, a cijene se mogu pročitati i na plaži.

Kad ovo nije vaša briga

Ako sajt koristi tamni tekst na bijeloj pozadini i standardnu temu bez većih zahvata, kontrast je vjerovatno u redu. Vrijedi ga provjeriti kad se uvode nove boje, tekst preko slika ili novi oglasi.

Greške koje najčešće viđamo

Najčešće je to svijetlosiv tekst za opise i cijene.

Česta su i bijela slova na žutoj ili narandžastoj boji brenda.

Viđamo naslove preko fotografija bez tamnog sloja.

Tu su i polja u formi bez vidljivog ruba.

Na kraju, kontrast provjeren samo na monitoru u kancelariji.

Lista za provjeru

• Ima li obični tekst omjer od najmanje 4,5:1?
• Prolaze li dugmad u boji brenda?
• Čita li se naslov preko fotografije na telefonu?
• Vide li se rubovi polja u formi?
• Piše li u knjizi standarda koje kombinacije smiju nositi tekst?

Pojmovi koje ćete čuti uz kontrast

• Omjer kontrasta: broj od 1:1 do 21:1 koji poredi svjetlinu dvije boje.
• WCAG: međunarodne smjernice za pristupačnost weba.
• AA i AAA: dva nivoa tih smjernica, osnovni i strožiji.
• Overlay: tamni ili svijetli sloj preko fotografije, da tekst na njoj bude čitljiv.
• Kontrast komponenti: pravilo za dugmad, polja i ikone, odvojeno od pravila za tekst.