Kontrast boja i pristupačnost: WCAG omjeri, provjere i popravci

Svijetlosivi tekst na bijeloj pozadini u dizajnerskoj datoteci izgleda čisto. Na mobitelu na jakom suncu teško se čita, a osobi sa slabijim vidom čitanje je pravi napor. Usto je to najčešći propust pristupačnosti uopće: WebAIM Million 2026 (otvara se u novoj kartici) pronašao je tekst niskog kontrasta na 83,9 % početnih stranica milijun najposjećenijih web-stranica, prosječno 34 zasebna slučaja po stranici.

Dobra je vijest da se kontrast može izmjeriti, pragovi su jasni, a popravci uglavnom jeftini. Ovaj vam vodič daje brojke, besplatne alate i način da popravite boje svojeg brenda, a da ne krećete ispočetka.

Što je omjer kontrasta boja?

Omjer kontrasta broj je koji uspoređuje relativnu svjetlinu, odnosno luminanciju, dviju boja, obično teksta i njegove pozadine. WCAG ga izračunava fiksnom formulom, a rezultat ide od 1:1 (nema razlike, bijelo na bijelom) do 21:1 (crno na bijelom). Što je broj veći, to se dvije boje lakše razlikuju.

Formula glasi (L1 + 0,05) / (L2 + 0,05), pri čemu je L1 relativna svjetlina svjetlije boje, a L2 tamnije. Nikada je nećete morati računati ručno, ali jedan je detalj važan: računa se samo svjetlina, a ne ton boje. Zato crveni tekst na zelenoj pozadini može izgledati živo, a ipak loše proći.

Drugi detalj koji ljudi propuštaju je zaokruživanje. W3C-ov dokument s objašnjenjima za kriterij 1.4.3 (otvara se u novoj kartici) navodi da se izračunate vrijednosti „ne bi smjele zaokruživati (npr. 4,499:1 ne bi zadovoljilo prag od 4,5:1)“. Tako siva #767676 na bijelom (4,54:1) prolazi, a #777777 na bijelom (4,48:1) ne prolazi, iako ih nitko ne bi razlikovao golim okom.

Koji omjer kontrasta traži WCAG?

Za razinu AA, na koju upućuje većina zakona i ugovora, normalan tekst treba najmanje 4,5:1 u odnosu na pozadinu, a velik tekst 3:1 (kriterij uspješnosti 1.4.3). Komponente sučelja i grafika koja nosi značenje trebaju 3:1 u odnosu na susjedne boje (1.4.11). Stroža razina AAA traži 7:1 za normalan tekst i 4,5:1 za velik tekst (1.4.6).

Zašto 4,5:1? W3C objašnjava da taj omjer „nadoknađuje gubitak osjetljivosti na kontrast koji obično imaju korisnici s gubitkom vida jednakim vidu od približno 20/40“ (vidna oštrina od oko 0,5). Drugim riječima, postavljen je za osobe s umjereno slabijim vidom, među kojima su mnogi stariji kupci koji sebe nikada ne bi nazvali osobama s invaliditetom.

Neki su tekstovi izuzeti: logotipovi i nazivi brendova, čisto ukrasni tekst, tekst koji nikome nije vidljiv, tekst na slici sa značajnim drugim vizualnim sadržajem i tekst u neaktivnim (onemogućenim) kontrolama. Vaš logotip može ostati kakav jest. Odlomak u blijedoj boji vašeg logotipa ne može.

Što se smatra velikim tekstom?

Velik tekst u WCAG-u znači najmanje 18 točaka ili najmanje 14 točaka ako je podebljan. W3C to pretvara u otprilike 24 CSS piksela, odnosno 18,5 piksela podebljano. Sve manje treba punih 4,5:1. Osnovni tekst, opisi slika, oznake obrazaca, cijene i poveznice u podnožju gotovo nikada nisu velik tekst, pa trebaju viši omjer.

Evo kako to izgleda u praksi. Siva #949494 na bijelom daje 3,03:1. To je dovoljno za naslov od 28 piksela, a propust za odlomak od 16 piksela u istoj boji. Mnoge web-stranice prolaze s naslovima, a padaju sa svime ispod njih.

Tanki i ukrasni fontovi traže dodatnu pažnju. W3C napominje da zbog zaglađivanja rubova (anti-aliasing) „osobito tanke ili neobične fontove korisnički agenti mogu prikazati znatno bljeđom bojom“ od one koju ste odabrali. Ako koristite tanki rez fonta svojeg brenda, ostavite si rezervu iznad 4,5:1 umjesto da ciljate na 4,51.

Odnosi li se kontrast na gumbe, ikone, pokazatelje fokusa i grafikone?

Da. Prema kriteriju uspješnosti 1.4.11 (razina AA) sve što ljudi moraju vidjeti da bi prepoznali kontrolu, njezino stanje ili grafiku treba 3:1 u odnosu na susjedne boje. To uključuje obrube polja obrazaca, ikone bez tekstne oznake, obrube fokusa, stanja potvrdnih okvira i prekidača te linije i isječke grafikona. Tekst unutar gumba i dalje treba 4,5:1.

• Polja obrazaca: svijetlosivi obrub #CCCCCC na bijelom daje 1,61:1. Ako je ta blijeda linija jedino što pokazuje gdje se upisuje, ne prolazi.
• Gumbi: WCAG ne traži vidljiv obrub oko svakog gumba. W3C-ov dokument s objašnjenjima za kriterij 1.4.11 (otvara se u novoj kartici) navodi da je granica potrebna samo kad ne postoji drugi vizualni način prepoznavanja kontrole. Ako se gumb prepoznaje samo po svojem obojenom obliku, taj oblik treba 3:1 u odnosu na stranicu.
• Ikone: povećalo za pretraživanje, srce za popis želja ili ikona košarice bez teksta pokraj sebe trebaju 3:1.
• Pokazatelji fokusa: obrub koji pokazuje fokus tipkovnice mora biti u kontrastu s pozadinom oko sebe. Naš vodič kroz WCAG 2.2 obrađuje novije kriterije fokusa.
• Grafikoni: linije u linijskom grafikonu i isječci u kružnom grafikonu trebaju 3:1, osim ako su iste vrijednosti prikazane i kao tekst.
• Onemogućene kontrole su izuzete, iako ljudi i dalje trebaju moći razaznati može li se gumb pritisnuti.

Poveznice u tekstu poseban su slučaj. Ako se razlikuju samo bojom, bez podcrtavanja, W3C-ova tehnika G183 (otvara se u novoj kartici) traži 3:1 između boje poveznice i okolnog teksta, a oboje i dalje treba 4,5:1 u odnosu na pozadinu. Pronaći tri boje koje sve to zadovoljavaju teško je. Podcrtavanje je mnogo jednostavnije.

Kako provjeriti kontrast boja?

Koristite besplatan alat za provjeru kontrasta za određene parove boja, alate za razvojne programere u pregledniku za stranice uživo i automatizirano skeniranje kako biste pronašli problematična mjesta na cijeloj web-stranici. Zatim okom provjerite ono što alati propuštaju: tekst preko fotografija i prijelaza boja, stanja pri prelasku mišem i fokusu, zamjenski tekst u poljima i poruke o pogreškama. Većina toga traje nekoliko minuta po predlošku stranice.

• WebAIM Contrast Checker (otvara se u novoj kartici): upišete dva heksadecimalna koda i dobijete omjer, uz ocjenu prolazi/ne prolazi za normalan tekst, velik tekst i grafičke objekte. Klizač svjetline koristan je za pronalaženje najbliže nijanse koja prolazi.
• Colour Contrast Analyser (otvara se u novoj kartici): besplatna aplikacija tvrtke Vispero za Windows i macOS. Njezina kapaljka uzima uzorak bilo kojeg piksela na zaslonu, što je korisno za tekst na slikama, u PDF-ovima i aplikacijama, a uključuje i simulator sljepoće za boje.
• Chrome DevTools: pregledajte dio teksta i otvorite birač boja. Njegov odjeljak za omjer kontrasta (otvara se u novoj kartici) prikazuje linije za AA i AAA i može predložiti boju koja prolazi. Ploča CSS Overview popisuje sve probleme s kontrastom na stranici.
• Automatizirani alati: proširenja za preglednik i Lighthouse označavaju tekst niskog kontrasta na cijeloj stranici, ali tekst preko slika ili prijelaza boja često označe kao nešto što treba ručno provjeriti, umjesto da mu daju ocjenu.

Gdje alati zakažu, uzmite uzorke ručno. Za tekst preko glavne fotografije provjerite najsvjetliji dio slike iza najsvjetlijih slova; W3C pozadinske slike bez dovoljnog kontrasta navodi kao poznat propust (F83). Prijeđite mišem preko gumba, dođite do njih tipkom Tab, izazovite pogrešku u obrascu, prebacite se na tamni način ako ga nudite. I tamna tema može ne proći provjeru: siva #757575 na pozadini #121212 daje 4,07:1. Naš vodič kako testirati pristupačnost web-stranice stavlja kontrast uz ostale brze ručne provjere.

Kako popraviti nizak kontrast bez mijenjanja brenda?

Obično tako da za tekst i male elemente dodate tamniju nijansu boje svojeg brenda, a original zadržite za velike naslove, pozadine i ilustracije. Mnoge boje brendova problematične su samo pri malim veličinama. Često je dovoljno bijeli tekst na svijetloj boji brenda zamijeniti tamnim, a većina posjetitelja primijetit će samo da se stranica lakše čita.

1. Napravite verziju svake boje brenda koja je sigurna za tekst, s najmanje 4,5:1 u odnosu na glavne pozadine, i koristite je za osnovni tekst, poveznice i male ikone.
2. Originalnu jarku boju koristite za velike naslove (ondje je 3:1 dovoljno), pozadine, ilustracije i ukrase.
3. Na svijetlim bojama brenda tekst gumba promijenite iz bijelog u tamni.
4. Iza teksta koji stoji na fotografijama stavite neprozirnu ili poluprozirnu podlogu.
5. Provjerite svako stanje: prelazak mišem, fokus, posjećenu poveznicu, odabrano, pogrešku i zamjenski tekst.
6. Parove koji prolaze spremite kao dizajnerske tokene ili postavke teme kako bi ih nove stranice naslijedile umjesto da ih izmišljaju iznova.

Dizajn za sljepoću za boje: zašto sama boja nije dovoljna

Kontrast i boja zasebni su problemi. Otprilike 1 od 12 muškaraca i 1 od 200 žena ima poremećaj raspoznavanja boja, najčešće crvene i zelene, prema podacima udruge Colour Blind Awareness (otvara se u novoj kartici). WCAG 1.4.1 (otvara se u novoj kartici) (razina A) kaže da boja ne smije biti jedini vizualni način prenošenja informacije, pa je uparite s tekstom, ikonama, uzorcima ili podcrtavanjem.

• Pogreške u obrascima: sam crveni obrub nije dovoljan. Uz polje dodajte poruku poput „Upišite poštanski broj“, po mogućnosti s ikonom.
• Zalihe i status: zelena ili crvena točka pokraj proizvoda mnogim kupcima ne govori ništa. Napišite „Na zalihi“ ili „Rasprodano“.
• Grafikoni: legendu koja se oslanja na uparivanje boja teško je čitati. Linije označite izravno ili koristite uzorke i različite stilove linija.
• Poveznice: u tekstu ih podcrtajte, iz gore navedenih razloga.

Da biste problem vidjeli svojim očima, Chrome DevTools može oponašati poremećaje vida, a i Colour Contrast Analyser ima simulator. Kontrast i ovdje pomaže: omjer mjeri svjetlinu, a ne ton, pa dvije boje s visokim omjerom ostaju razlučive čak i kad im tonovi izgledaju slično. Više o tome kako slabovidne osobe i osobe s drugim oštećenjima podešavaju svoje uređaje pročitajte u članku kako osobe s invaliditetom koriste web.

Jesu li načini visokog kontrasta i gumbi za kontrast dovoljni?

Nisu. Kontrastne teme operacijskog sustava i gumbi za kontrast na stranici pomažu ljudima koji znaju da im treba više kontrasta i uključe ga. No WCAG vašu stranicu ocjenjuje u zadanom stanju, pa boje koje svaki posjetitelj najprije vidi i dalje moraju prolaziti. Gumb je dodatna mogućnost za one koji žele više, a ne popravak za boje koje ne prolaze.

Neke osobe s invaliditetom koriste kontrastne teme u Windowsima, koje vaše boje zamjenjuju vlastitima. Isplati se testirati web-stranicu s uključenom takvom temom: ikone izrađene od pozadinskih slika mogu nestati, kao i stilovi fokusa nacrtani samo sjenom (box-shadow). CSS medijski upit prefers-contrast omogućuje vam i da ponudite verziju višeg kontrasta osobama koje su je zatražile u postavkama sustava.

Naš widget ima prilagodbu kontrasta i profil za sljepoću za boje, a nekim su posjetiteljima korisni. Svejedno bismo vam rekli isto: ako je vaš osnovni tekst #999999 na bijelom, promijenite CSS. Widget posjetitelju koji želi više kontrasta daje način da ga dobije. Zadane boje koje ne prolaze time ne postaju ispravne, a to kaže i pregled WCAG-a u našoj dokumentaciji.