Kontrast boja za tekst, gumbe i ikone

Zašto je kontrast važan

Blijed tekst košta čitatelje. Ljudi slabijeg vida, stariji čitatelji i svi koji gledaju mobitel na jakom svjetlu trebaju jasnu razliku između teksta i pozadine. Smjernice za pristupačnost web-sadržaja (WCAG) W3C-a stoga propisuju minimalne vrijednosti za tekst, za kontrole poput gumba i polja za unos te za ikone i grafiku. Mogu se izmjeriti i provjeriti prije pokretanja.

Kako radi omjer kontrasta

Omjer kontrasta uspoređuje koliko su dvije boje svijetle. WCAG ne gleda nijansu, nego relativnu luminanciju: vrijednost između 0 za najtamniju crnu i 1 za najsvjetliju bijelu. Tri kanala, crveni, zeleni i plavi, pretvaraju se i ponderiraju: zelena se računa najviše, crvena manje, a plava najmanje. Omjer je (L1 + 0.05) / (L2 + 0.05), pri čemu je L1 luminancija svjetlije boje. Rezultat je između 1:1 za dvije jednake boje i 21:1 za crnu na bijeloj.

U praksi su važna dva pravila W3C-a. Prvo, vrijednosti se ne zaokružuju: omjer 4.499:1 ne ispunjava granicu od 4.5:1. Drugo, kontrast se mjeri prema pozadini koja je postavljena za tekst. Ako stranica postavlja samo boju teksta, a ne i boju pozadine, W3C to smatra nesukladnošću jer zadana pozadina posjetitelja nije poznata. Uvijek postavi obje boje zajedno.

Tri kriterija uspješnosti

• 1.4.3 Kontrast (minimalni), razina AA: tekst i slike teksta trebaju najmanje 4.5:1, velik tekst najmanje 3:1.
• 1.4.6 Kontrast (pojačani), razina AAA: tekst treba najmanje 7:1, velik tekst najmanje 4.5:1. To je stroža razina i najviše pomaže kod dugih tekstova.
• 1.4.11 Netekstualni kontrast, razina AA: najmanje 3:1 prema susjednim bojama, za sve što trebaš vidjeti da bi prepoznao/la kontrolu i njezino stanje (na primjer obrub polja za unos ili indikator fokusa) te za dijelove grafike potrebne za razumijevanje sadržaja, poput ikona ili linija u grafikonu.

Što se smatra velikim tekstom

Velik tekst ima najmanje 18 točaka ili najmanje 14 točaka podebljano. W3C to preračunava na oko 24 piksela i oko 18.5 piksela podebljano. Velik tekst smije imati manje kontrasta jer su slova veća, a potezi širi. Pazi s tankim fontovima: prema W3C-u, zaglađivanje rubova (anti-aliasing) može tanke ili neobične fontove učiniti bljeđima od njihove definirane boje. Preporučuje deblje fontove ili par boja jasno iznad minimuma.

Što ne mora proći

• Neaktivne komponente, poput onemogućenog gumba.
• Čista dekoracija i tekst koji nitko ne može vidjeti.
• Tekst koji je dio logotipa ili naziva marke.
• Usputni tekst na slici sa znatnim drugim sadržajem, poput uličnog znaka na fotografiji.

Česte pogreške

• Svijetlosiva na bijeloj. Siva za datume, opise slika ili sporedni tekst često je preblijeda: #999999 na bijeloj doseže samo 2.84:1. Najsvjetlija čista siva koja na bijeloj prolazi AA za normalan tekst je #767676 s 4.54:1.
• Tekst na slikama. Kontrast se mijenja sa svakim dijelom fotografije. W3C pozadinske slike bez dovoljnog kontrasta navodi kao nesukladnost (F83). Stavi tekst na jednobojnu površinu, zatamni sliku iza njega ili tekst postavi pokraj slike. Provjeri najsvjetlije mjesto iza teksta.
• Placeholder tekst. Sivi savjet u praznom polju za unos je tekst i na njega se primjenjuje 1.4.3. Svijetlosiva poput #9ca3af na bijeloj doseže samo 2.53:1. Placeholder ni ne zamjenjuje vidljivu oznaku.
• Stanja pri prelasku mišem i fokusu. Tekst koji se pojavljuje ili mijenja pri prelasku mišem ili fokusu tipkovnicom mora ispunjavati iste vrijednosti. Efekt pri prelasku mišem ne smije smanjiti kontrast kontrole ni oslabiti indikator fokusa. Indikator fokusa koji sam/a dizajniraš treba 3:1 prema susjednoj pozadini.
• Bijeli tekst na svijetlim bojama marke. Narančasti, žuti, svijetlozeleni ili tirkizni gumbi s bijelim tekstom često ne prolaze: bijela na #ff6600 doseže 2.93:1.
• Blijedi obrubi i ikone. Ako je obrub jedino što pokazuje gdje je polje za unos, treba 3:1: #cccccc na bijeloj ima 1.60:1. Ikone koje nose značenje bez teksta, poput strelice padajućeg izbornika ili ikone za zatvaranje, također trebaju 3:1.
• Provjera samo jedne teme. Ako tvoje web-mjesto ima tamni način, njegove parove boja provjeri zasebno. Boja koja funkcionira na bijeloj može ne proći na tamnoj pozadini.

Popravi paletu marke, a da marka ostane prepoznatljiva

1. 1Zapiši svaku boju s njezinom ulogom: tekst, pozadina, naglasak ili gumb, obrub. Mnogi problemi počinju kada jedna boja obavlja svaki posao.
2. 2Zadrži boju marke ondje gdje je pravila lakše ispuniti ili se ne primjenjuju: u logotipu, na velikim površinama, za dekoraciju i za velike naslove.
3. 3Za tekst i male elemente koristi tamniju ili svjetliju nijansu iste boje. Ako se mijenja samo svjetlina, boja ostaje prepoznatljiva: bijeli tekst na #c74f00, tamnijoj narančastoj, doseže 4.61:1.
4. 4Ili umjesto toga promijeni boju teksta. Tamni tekst na svijetloj boji marke često funkcionira bolje od bijelog: #1a1a1a na #ff6600 doseže 5.92:1.
5. 5Odredi jednu sivu za sporedni tekst koja prolazi, na primjer #767676 na bijeloj, i koristi je svugdje umjesto više blijedih sivih.
6. 6Provjeri svako stanje: normalno, pri prelasku mišem, fokus, pogreška i tamni način. Konačne boje spremi kao varijable u svoju stilsku datoteku kako nitko više ne bi ručno odabrao blijedu boju.

Provjeri svoje boje uz Do4U

Provjera kontrasta boja izračunava ove vrijednosti za tvoje boje. Uneseš svoje boje, jednu po retku, i svakoj daš ulogu: tekst, pozadina, naglasak (na primjer gumb) ili obrub. Kôd provjerava svaki smislen par prema AA i AAA za normalan i velik tekst te prema 3:1 za obrube, ikone i površine gumba, bez zaokruživanja naviše. Za svaki par koji ne prolazi dobivaš najbližu boju koja prolazi, jednom tamniju i jednom svjetliju, u istoj nijansi. Do4U izrađuje i prilagođenu paletu, ponovno je provjerava u cjelini i izvozi je kao prilagođena CSS svojstva, SCSS ili JSON. Sve radi u kôdu, bez AI-ja, a provjera je besplatna.

Provjera poznaje samo parove boja koje uneseš. Ne vidi veličine fontova, slike iza teksta, prozirnost ni stanja pri prelasku mišem i fokusu, pa testiraj i gotove stranice. Do4U izrađuje nacrt, a ti provjeravaš i odlučuješ.