Razumevanje smernic za kontrast WCAG 2.1 / 2.2
Spletna dostopnost temelji na zagotavljanju, da so informacije berljive vsem uporabnikom, vključno s tistimi z motnjami vida. Smernice za dostopnost spletnih vsebin (WCAG 2.1 / 2.2) določajo natančne pogoje za kontrast med besedilom in njegovim ozadjem. Te smernice pomagajo oblikovalcem, razvijalcem in ustvarjalcem vsebin preveriti, ali je vizualna predstavitev besedila dovolj izrazita.
Kontrastno razmerje se matematično izraža v razponu od 1:1 do 21:1. Razmerje 1:1 pomeni, da med barvama ni nikakršnega kontrasta (npr. belo besedilo na beli podlagi), medtem ko razmerje 21:1 predstavlja največji možni kontrast, ki ga dosežemo s črnim besedilom na belem ozadju. Preverjevalnik kontrasta uporablja formulo WCAG 2.1 / 2.2 za izračun teh razmerij in določanje skladnosti z zahtevanimi standardi.
Razlike med ravnmi dostopnosti AA in AAA
Standardi WCAG opredeljujejo različne stopnje skladnosti, pri čemer sta za kontrast ključni ravni AA in AAA:
- Raven AA: To je standardna raven skladnosti, h kateri strmi večina spletnih mest. Zahteva kontrastno razmerje vsaj 4,5:1 za običajno besedilo in vsaj 3:1 za veliko besedilo.
- Raven AAA: To je strožja raven dostopnosti, ki zagotavlja še boljšo berljivost. Zahteva kontrastno razmerje vsaj 7:1 za običajno besedilo in vsaj 4,5:1 za veliko besedilo.
Orodje ob vsakem izračunu natančno prikaže, ali kombinacija barv ustreza posamezni ravni, kar oblikovalcem omogoča prilagoditev barvnih palet glede na ciljno raven dostopnosti.
Definicija običajnega in velikega besedila
Dostopnostni standardi razlikujejo med velikostmi besedila, saj večje in krepkejše pismenke lažje preberemo tudi pri nižjem kontrastnem razmerju. Meje so natančno določene:
- Običajno besedilo: Vse besedilo, ki ne dosega kriterijev za veliko besedilo. Zahteva višje kontrastno razmerje (4,5:1 za AA in 7:1 za AAA).
- Veliko besedilo: Definirano je kot besedilo z velikostjo od 18pt (približno 24px) naprej, ali od 14pt (približno 18,5px) naprej, če je besedilo krepko. Za to vrsto besedila veljajo nižji pragovi kontrasta (3:1 za AA in 4,5:1 za AAA).
Kontrast za uporabniški vmesnik in grafiko
Sodobne smernice WCAG 2.1 / 2.2 ne predpisujejo kontrastnih zahtev le za besedilo, temveč tudi za netekstovne elemente. Vrstica za uporabniški vmesnik in grafiko v orodju preverja skladnost vizualnih informacij, kot so gumbi, vnosi v obrazce in ključni grafični elementi.
Za te komponente velja enoten prag:
- Zahtevano kontrastno razmerje je vsaj 3:1.
- Ta vrstica nima ločenih ravni AA in AAA, temveč prikazuje le en sam rezultat skladnosti.
Vnosi, izpisi in delovanje orodja
Orodje ob zagonu uporabi privzeti barvni kombinaciji: #4f46e5 za besedilo in #ffffff za ozadje, kar daje kontrastno razmerje 6,29:1.
Podprti barvni formati
V polji za vnos lahko vpišete barve v naslednjih zapisih:
- Hex vrednosti (npr.
#1a1a1a) - Vrednosti
rgb()(npr.rgb(26, 26, 26)) - Vrednosti
hsl()
Uporabite lahko tudi gumb za zamenjavo, ki takoj zamenja barvo besedila in ozadja.
Sporočila o napakah
Če vnesete neveljaven zapis barve, orodje izpiše naslednji opozorili:
- Za napačno barvo besedila: "Vnesite veljavno barvo besedila, na primer #1a1a1a or rgb(26, 26, 26)."
- Za napačno barvo ozadja: "Vnesite veljavno barvo ozadja, na primer #ffffff ali rgb(255, 255, 255)."
Rezultati in povzetki (Verdict)
Za vsako kategorijo (običajno besedilo, veliko besedilo ter uporabniški vmesnik in grafika) orodje izpiše "Ustreza" ali "Ne ustreza". Na koncu poda še končni povzetek glede na izračunano razmerje:
- "Ustreza ravnema AA in AAA za običajno besedilo."
- "Ustreza ravni AA za običajno besedilo."
- "Ustreza ravni AA samo za veliko besedilo."
- "Pod minimumom AA — povečajte kontrast."
Zasebnost in obdelava podatkov
Vsako preverjanje poteka v vašem brskalniku. Nič od tega, kar vnesete, se ne prenaša na BroBroGo.
Pogosta vprašanja (FAQ)
Kaj pomenijo rezultati AA in AAA?
AA je raven, h kateri strmi večina spletnih mest: zahteva razmerje vsaj 4,5:1 za običajno besedilo in 3:1 za veliko besedilo. AAA je strožja — 7:1 za običajno besedilo in 4,5:1 za veliko besedilo. Razmerje se giblje od 1:1 (brez kontrasta) do 21:1 (črno na belem).
Kaj šteje za veliko besedilo?
Besedilo od 18pt (približno 24px) ali 14pt (približno 18,5px), če je krepko. Večje besedilo ostane čitljivo pri nižjem kontrastu, zato ustreza ravni AA pri 3:1 in AAA pri 4,5:1 namesto strožjih pragov za običajno besedilo.
Katere barvne formate lahko vnesem?
Vnesite hex vrednost, kot je #1a1a1a, vrednost rgb(), kot je rgb(26, 26, 26), ali vrednost hsl() — ali pa kliknite kateri koli vzorec, da izberete barvo. Uporabite gumb za zamenjavo, da zamenjate barvo besedila in ozadja.
Ali gre za WCAG 2 ali novejšo metodo APCA?
Uporablja formulo WCAG 2.1 / 2.2, na katero se danes sklicujejo pravila o dostopnosti in revizije. APCA je novejša metoda, ki se še pripravlja za WCAG 3 — je obetavna, vendar še ni uradni standard za skladnost, zato je rezultati tukaj ne uporabljajo.