Besplatan alat
Provjera kontrasta boja — WCAG AA i AAA
Tekst koji vi čitate bez problema na svom monitoru u uredu često je nečitljiv na mobitelu na suncu ili nekome s oslabljenim vidom. Omjer kontrasta pretvara tu procjenu u broj.
Upišite boju teksta i boju pozadine i odmah vidite omjer te prolazi li kombinacija WCAG razine AA i AAA za normalan i za veliki tekst. Sav se izračun odvija u vašem pregledniku.
Boje
Veliki naslov
Ovo je primjer teksta u normalnoj veličini. Ako ga ne možete udobno pročitati, ni vaši posjetitelji neće moći.
Rezultat
Omjer kontrasta
14.68:1
- Normalan tekst, AAmin. 4.5:1Prolazi
- Normalan tekst, AAAmin. 7:1Prolazi
- Veliki tekst, AAmin. 3:1Prolazi
- Veliki tekst, AAAmin. 4.5:1Prolazi
Veliki tekst znači najmanje 18pt (oko 24px) ili podebljani tekst od najmanje 14pt (oko 18.5px). Izračun se odvija u vašem pregledniku.
Kako se koristi
- 1 Upišite HEX kod boje teksta ili je odaberite biračem boja.
- 2 Isto napravite za boju pozadine.
- 3 Pročitajte omjer i četiri oznake prolaza — normalni i veliki tekst, razine AA i AAA.
Česta pitanja
Česta pitanja — provjera kontrasta boja
Što znači omjer kontrasta 4.5:1?
Broj opisuje razliku u svjetlini između dvije boje. Najveći mogući omjer je 21:1 (crno na bijelom), a 1:1 znači dvije identične boje. Omjer 4.5:1 je najmanji koji WCAG razina AA traži za normalan tekst.
Koja je razlika između razina AA i AAA?
AA traži najmanje 4.5:1 za normalan tekst i 3:1 za veliki. AAA podiže granicu na 7:1 odnosno 4.5:1. AA je razina koju treba ciljati svaka poslovna stranica; AAA se u praksi traži od javnih usluga i sadržaja namijenjenog široj publici.
Što se računa kao veliki tekst?
Tekst od najmanje 18pt, što je otprilike 24px, ili podebljani tekst od najmanje 14pt, otprilike 18.5px. Veći tekst prolazi s nižim omjerom jer su deblji potezi slova sami po sebi čitljiviji.
Je li kontrast zakonska obveza u Hrvatskoj?
Za velik dio tvrtki jest. Europski akt o pristupačnosti od lipnja 2025. traži usklađenost s razinom WCAG AA za web trgovine, bankarske usluge, prijevoz i niz drugih digitalnih usluga, a za tijela javnog sektora obveza postoji i dulje.
Vrijedi li pravilo i za gumbe i ikone?
Da, uz drugu granicu. Za grafičke elemente koji prenose informaciju — rub polja obrasca, ikona, granica gumba — WCAG traži najmanje 3:1 prema susjednoj boji. Svijetlosivi obrub na bijelom to gotovo nikad ne zadovoljava.