Svijetlo sivi tekst na bijeloj pozadini može izgledati elegantno i minimalistički na prvi pogled — i biti potpuno nečitljiv korisnicima s oštećenjem vida, jakim sunčevim svjetlom na ekranu ili običnom naprezanju očiju na kraju radnog dana. Kontrast boja jedan je od "najtehničkijih" kriterija u pristupačnosti — postoje točni brojevi koje treba ispuniti — ali također je jedan od najlakših za testiranje i popravljanje unaprijed.

Ukratko — što ovaj vodič pokriva

  1. Koje omjere zahtijeva WCAG
  2. Zašto je velikom tekstu dopušten manji kontrast
  3. Kako u praksi provjeriti omjer kontrasta
  4. Kako unaprijed odabrati dostupnu paletu boja

Koje omjere zahtijeva WCAG

WCAG definira omjer kontrasta kao broj između 1:1 (uopće nema kontrasta — identična boja) i 21:1 (maksimalni mogući kontrast — čista crna na čistoj bijeloj). Na razini AA (obavezna razina na većini mjesta, uključujući Izrael), zahtjev je omjer od najmanje 4,5:1 između uobičajenog teksta i pozadine iza njega. Na strožoj razini AAA, zahtjev raste na 7:1.

Zašto je velikom tekstu dopušten manji kontrast

Veliki tekst ostaje čitljiv čak i s nižim kontrastom, stoga WCAG postavlja lakši prag: 3:1 na razini AA (umjesto 4,5:1) i 4,5:1 na razini AAA (umjesto 7:1). "Veliki tekst" je definiran kao tekst od 18 točaka ili veći (oko 24 px) ili 14 točaka ili veći (oko 18,7 px) ako je podebljan. Veliki naslovi, na primjer, mogu "priuštiti" malo niži kontrast od običnog glavnog odlomka, a da i dalje ispunjavaju zahtjev.

Ilustrativni dijagram Usporedba omjera kontrasta Tri primjera teksta na pozadini s različitim omjerima kontrasta Omjer kontrasta između teksta i pozadine Uzorak teksta 1,8:1 — ✕ ne uspijeva Uzorak teksta 7,1:1 — ✓ zadovoljava i AAA Uzorak teksta 5,4:1 — ✓ zadovoljava razinu AA Uobičajeni tekst: najmanje 4,5:1 · Veliki tekst (24px+ ili 18,7px podebljano): najmanje 3:1 Alati kao što je WebAIM Contrast Checker daju vam točan omjer prije finaliziranja palete boja
Tri primjera teksta na pozadini: prenizak omjer (1,8:1) ne zadovoljava čak ni osnovnu razinu; druga dva omjera ispunjavaju zahtjeve AA i AAA.

Kako provjeriti omjer kontrasta u praksi

Nema potrebe za ručnim izračunom — besplatni alati kao što je WebAIM Contrast Checker omogućuju vam da unesete kodove boja teksta i pozadine i odmah dobijete točan omjer i ocjenu za prolaz/pad za svaku razinu. Vrijedno je provjeriti ne samo tekst na čvrstoj pozadini, već i tekst preko pozadinskih slika ili gradijena — gdje kontrast može varirati između različitih područja iste slike, pa je najbolje testirati "najproblematičnije" mjesto.

💡 Praktičan savjet

Ne samo tekst: isti zahtjev za kontrastom (na lakšem pragu, 3:1) također se primjenjuje na komponente grafičkog korisničkog sučelja kao što su obrisi polja obrasca, funkcionalne ikone i obrubi gumba — ne samo na slova.

Kako unaprijed odabrati pristupačnu paletu boja

Najučinkovitiji pristup je provjera kontrasta u fazi dizajna predloška, ​​a ne u svakom dokumentu zasebno. Prilikom odabira boja robne marke za naslove, glavni tekst i veze, vrijedi unaprijed potvrditi da svaka kombinacija teksta i pozadine koju stvarno koristite ispunjava najmanje 4,5:1. Na taj način svaki novi dokument kreiran iz predloška automatski "nasljeđuje" pravilan kontrast, umjesto da se svaki dokument posebno provjerava nakon što je već napisan.

Želite li znati ispunjavaju li vaši dokumenti zahtjeve za kontrast?

Naš alat provjerava kontrast boja kao dio automatskog skeniranja svake PDF datoteke na vašem web-mjestu.

Skenirajte svoju stranicu besplatno ←