Kako funkcionira Provjera kontrasta
Alat pod nazivom "Provjera kontrasta" omogućava vam da unesete boju teksta i boju pozadine kako biste odredili njihov omjer kontrasta u skladu sa WCAG 2.1 / 2.2 standardima. Nakon unosa, alat prikazuje koje nivoe pristupačnosti (AA i AAA) kombinacija boja zadovoljava za normalan tekst, veliki tekst i komponente korisničkog interfejsa.
Inicijalne postavke alata koriste boju #4f46e5 za tekst i #ffffff za pozadinu, što rezultira omjerom kontrasta od 6.29. Za brzu izmjenu unesenih vrijednosti, dugme za zamjenu omogućava vam da jednostavno zamijenite boju teksta i pozadine.
Ulazni podaci i podržani formati
Da biste izvršili provjeru, potrebno je definirati dva ulazna polja:
- Boja teksta: Vrijednost boje koja se koristi za tekstualni sadržaj.
- Boja pozadine: Vrijednost boje koja se koristi za pozadinu iza teksta.
Alat prihvata sljedeće formate za oba polja:
- Hex vrijednosti (npr.
#1a1a1a) rgb()vrijednosti (npr.rgb(26, 26, 26))hsl()vrijednosti
U slučaju unosa neispravnih vrijednosti, sistem prikazuje odgovarajuće poruke o grešci:
- Ako unesete nevažeću boju teksta, prikazat će se poruka: "Unesite važeću boju teksta, poput #1a1a1a or rgb(26, 26, 26)."
- Ako unesete nevažeću boju pozadine, prikazat će se poruka: "Unesite važeću boju pozadine, poput #ffffff ili rgb(255, 255, 255)."
Rezultati provjere i tumačenje izlaza
Nakon obrade unesenih boja, alat generiše sljedeće izlazne podatke:
- Omjer kontrasta: Izračunati omjer između boje teksta i pozadine, prikazan u formatu "X:1". Raspon omjera se kreće od 1:1 (potpuni izostanak kontrasta) do 21:1 (crna boja na bijeloj pozadini).
- Normalan tekst: Prikazuje oznaku "Zadovoljava" ili "Ne zadovoljava" za AA i AAA nivoe.
- Veliki tekst: Prikazuje oznaku "Zadovoljava" ili "Ne zadovoljava" za AA i AAA nivoe.
- Korisnički interfejs i grafika: Prikazuje oznaku "Zadovoljava" ili "Ne zadovoljava" u odnosu na jedinstveni prag od 3:1. Ovaj red ne sadrži podjelu na AA i AAA nivoe, već alat za njega prikazuje samo jedan rezultat.
- Konačna ocjena: Sažeta poruka koja ukazuje na najviši nivo koji kombinacija zadovoljava. Poruke uključuju:
- "Zadovoljava AA i AAA za normalan tekst."
- "Zadovoljava AA za normalan tekst."
- "Zadovoljava AA samo za veliki tekst."
- "Ispod AA minimuma — povećajte kontrast."
Pravila i standardi za nivoe pristupačnosti
Izračunavanje i evaluacija se vrše prema WCAG 2.1 / 2.2 formuli na osnovu sljedećih pravila:
- Normalan tekst: Zahtijeva omjer od najmanje 4.5:1 za AA nivo, odnosno najmanje 7:1 za AAA nivo.
- Veliki tekst: Zahtijeva omjer od najmanje 3:1 za AA nivo, odnosno najmanje 4.5:1 za AAA nivo. Veliki tekst je definisan kao tekst od 18pt (oko 24px) ili više, odnosno 14pt (oko 18.5px) ili više ukoliko je podebljan.
- Korisnički interfejs i grafika: Zahtijeva omjer od najmanje 3:1, što predstavlja jedinstveni prag bez podjele na AA i AAA nivoe.
Kome je ovaj alat namijenjen
Provjera kontrasta je razvijena za različite profesionalne uloge koje učestvuju u kreiranju digitalnog sadržaja:
- Dizajneri: Koriste alat za provjeru čitljivosti teksta i vizuelnih komponenti tokom procesa dizajniranja.
- Programeri: Osiguravaju da implementirana rješenja ispunjavaju zvanične standarde pristupačnosti.
- Timovi za sadržaj: Verifikuju kontrast boja u svojim materijalima prije objavljivanja.
Privatnost i obrada podataka
Svaka provjera kontrasta u potpunosti se izvršava lokalno unutar Vašeg web preglednika. Podaci koje unesete u polja za provjeru ne šalju se niti se na bilo koji način učitavaju na platformu BroBroGo.
Često postavljana pitanja (FAQ)
Šta znače rezultati AA i AAA?
AA je nivo kojem većina sajtova teži: zahtijeva omjer od najmanje 4.5:1 za normalan tekst i 3:1 za veliki tekst. AAA je strožiji — 7:1 za normalan tekst i 4.5:1 za veliki tekst. Omjer se kreće od 1:1 (bez kontrasta) do 21:1 (crno na bijelom).
Šta se računa kao veliki tekst?
Tekst od 18pt (oko 24px), ili 14pt (oko 18.5px) ako je podebljan. Veći tekst ostaje čitljiv i pri nižem kontrastu, pa prolazi AA na 3:1 i AAA na 4.5:1 umjesto strožih pragova za normalan tekst.
Koje formate boja mogu unijeti?
Unesite hex vrijednost poput #1a1a1a, rgb() vrijednost poput rgb(26, 26, 26) ili hsl() vrijednost — ili kliknite na bilo koji uzorak da odaberete boju. Koristite dugme za zamjenu da zamijenite boju teksta i pozadine.
Da li je ovo WCAG 2 ili novija APCA metoda?
Ovaj alat koristi formulu WCAG 2.1 / 2.2, na koju se danas pozivaju pravila i revizije pristupačnosti. APCA je novija metoda zasnovana na percepciji koja se još uvijek priprema za WCAG 3 — obećava mnogo, ali još uvijek nije službeni standard usklađenosti, pa je rezultati ovdje ne koriste.