Izračun i interpretacija omjera kontrasta
Omjer kontrasta predstavlja brojčani odnos između svjetline teksta i njegove pozadine, a izražava se u rasponu od 1:1 do 21:1. Omjer 1:1 označava potpunu odsutnost kontrasta (primjerice, bijeli tekst na bijeloj pozadini), dok omjer 21:1 predstavlja maksimalni mogući kontrast (crni tekst na bijeloj pozadini).
Alat inicijalno koristi vrijednost #4f46e5 za boju teksta i #ffffff za boju pozadine, što rezultira omjerom kontrasta od 6.29:1. Izračun se temelji na službenoj formuli standarda WCAG 2.1 / 2.2 kako bi se osigurala usklađenost s važećim smjernicama o pristupačnosti.
Ulazni formati boja i upravljanje sučeljem
Za provjeru kontrasta potrebno je definirati dvije komponente: boju teksta i boju pozadine. Alat prihvaća tri standardna formata za unos boja:
- Hex vrijednosti: npr.
#1a1a1a - RGB vrijednosti: npr.
rgb(26, 26, 26) - HSL vrijednosti
U slučaju unosa neispravnog formata, sustav prikazuje odgovarajuće poruke upozorenja. Ako unesena boja teksta nije valjana, pojavit će se poruka: "Unesite valjanu boju teksta, poput #1a1a1a or rgb(26, 26, 26).". Ako je unesena nevaljana boja pozadine, prikazuje se poruka: "Unesite valjanu boju pozadine, poput #ffffff ili rgb(255, 255, 255).". Korisnicima je na raspolaganju i gumb za zamjenu koji omogućuje brzu zamjenu mjesta definirane boje teksta i boje pozadine.
Kriteriji za normalan i veliki tekst prema WCAG standardu
Pravila pristupačnosti razlikuju zahtjeve za kontrast ovisno o veličini i težini znakova. Veliki tekst definira se kao tekst s veličinom od najmanje 18pt (oko 24px) ili najmanje 14pt (oko 18.5px) ako je tekst podebljan. Svi tekstovi koji ne ulaze u ove okvire smatraju se normalnim tekstom.
Za postizanje usklađenosti primjenjuju se sljedeći pragovi:
- Normalan tekst (AA razina): Zahtijeva omjer kontrasta od najmanje 4.5:1.
- Normalan tekst (AAA razina): Zahtijeva omjer kontrasta od najmanje 7:1.
- Veliki tekst (AA razina): Zahtijeva omjer kontrasta od najmanje 3:1.
- Veliki tekst (AAA razina): Zahtijeva omjer kontrasta od najmanje 4.5:1.
Kontrast za elemente sučelja i grafiku
Pristupačnost digitalnog sadržaja ne ovisi isključivo o čitljivosti teksta. Korisničko sučelje i grafičke komponente također moraju biti jasno vidljivi kako bi korisnici mogli prepoznati interaktivne elemente i vizualne informacije.
Za kategoriju sučelja i grafike primjenjuje se jedinstveno pravilo. Za razliku od tekstualnog sadržaja, ova kategorija ne sadrži podjelu na AA i AAA razine, već se provjerava u odnosu na jedan fiksni prag. Da bi grafički elementi i komponente sučelja zadovoljili kriterije pristupačnosti, omjer kontrasta mora iznositi najmanje 3:1. Alat za ovu provjeru prikazuje samo jedan rezultat.
Evaluacija rezultata i konačna ocjena
Nakon obrade unesenih vrijednosti, alat prikazuje status prolaznosti ("Prolazi" ili "Ne prolazi") za svaku pojedinačnu kategoriju te generira konačni sažetak u obliku jedne od sljedećih poruka:
- "Prolazi AA i AAA za normalan tekst."
- "Prolazi AA za normalan tekst."
- "Prolazi AA samo za veliki tekst."
- "Ispod AA minimuma — povećajte kontrast."
Ove ocjene omogućuju dizajnerima, programerima i kreatorima sadržaja brzu provjeru usklađenosti s propisanim standardima te donošenje odluka o eventualnim korekcijama palete boja.
Privatnost i lokalna obrada podataka
Sigurnost i privatnost podataka u potpunosti su integrirani u rad ovog alata. Svaka se provjera izvodi u Vašem pregledniku. Ništa što unesete ne šalje se na BroBroGo, što znači da se obrada podataka odvija lokalno na vašem uređaju bez prijenosa informacija na vanjske poslužitelje.
Često postavljana pitanja (FAQ)
Što znače rezultati AA i AAA?
AA je razina kojoj teži većina web-mjesta: zahtijeva omjer od najmanje 4.5:1 za normalan tekst i 3:1 za veliki tekst. AAA je stroža razina — 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).
Što se smatra velikim tekstom?
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 s omjerom 3:1 i AAA s 4.5:1 umjesto strožih pragova za normalan tekst.
Koje formate boja mogu unijeti?
Upišite hex vrijednost poput #1a1a1a, rgb() vrijednost poput rgb(26, 26, 26) ili hsl() vrijednost — ili kliknite na bilo koji uzorak kako biste odabrali boju. Koristite gumb za zamjenu kako biste zamijenili boju teksta i pozadine.
Koristi li se ovdje WCAG 2 ili novija APCA metoda?
Ovaj alat koristi formulu WCAG 2.1 / 2.2, na koju se danas odnose pravila o pristupačnosti i revizije. APCA je novija metoda koja se još uvijek priprema za WCAG 3 — obećavajuća je, ali još nije službeni standard, pa je rezultati ovdje ne koriste.