Nizek barvni kontrast je najpogostejša napaka dostopnosti, ki jo vidimo pri pregledih slovenskih spletnih strani. Svetlo siva besedila na beli podlagi so v oblikovalskem programu videti umirjena, na zaslonu prenosnika pri dnevni svetlobi pa jih marsikdo ne prebere.
Spodaj so mejne vrednosti, ki jih zahtevajo smernice WCAG 2.2 na ravni AA, in praktičen postopek, kako jih preverite brez posebnega znanja.
Katere vrednosti zahteva WCAG 2.2 AA
Kontrast se izraža kot razmerje med svetlostjo besedila in svetlostjo ozadja. Črno na belem ima razmerje 21:1, enaka siva na sivi 1:1.
- Navadno besedilo: najmanj 4,5 : 1.
- Veliko besedilo (od 24 px ali od 19 px pri polkrepki pisavi): najmanj 3 : 1.
- Gumbi, polja obrazcev, ikone in grafi, ki nosijo pomen: najmanj 3 : 1.
- Fokusni obroč pri navigaciji s tipkovnico mora biti jasno viden proti ozadju.
Kako kontrast izmerite v petih minutah
Odprite stran v brskalniku Chrome, kliknite z desno tipko na besedilo in izberite Preglej (Inspect). V razdelku s stili se pri barvi besedila prikaže tudi razmerje kontrasta glede na ozadje, z opozorilom, če je pod mejo.
Za hitro preverjanje celotne palete uporabite spletni preverjalnik kontrasta, kjer vpišete barvo besedila in barvo ozadja. Preverite tudi stanja gumbov: navadno, ob prehodu miške in onemogočeno.
Najpogostejše napake
- Svetlo siva pomožna besedila (#999 in svetlejše) na beli podlagi.
- Besedilo na fotografiji brez temne prevleke — kontrast se spremeni z vsako sliko.
- Bela besedila na svetlih barvah blagovne znamke, na primer na svetlo modri ali rumeni.
- Povezave, ki so označene samo z barvo, brez podčrtaja ali druge oznake.
- Rdeča sporočila o napakah v obrazcih, ki so na beli podlagi prešibka.
Kaj pri tem pomaga pripomoček za dostopnost
Pripomoček obiskovalcu omogoči, da si sam vklopi visok kontrast, temni način, invertirane barve ali sivine, poveča besedilo in poudari povezave. To takoj pomaga ljudem s slabšim vidom in barvno slepoto.
Kontrasta v izvorni obliki strani pripomoček ne popravi namesto vas. Če je osnovna paleta prešibka, jo je treba popraviti v oblikovanju — pripomoček je dodatna možnost za obiskovalca, ne nadomestilo za dostopno zasnovo.
Preberite tudi
Nadomestna besedila slik (alt): kdaj, kako in kdaj naj ostane prazno
Kako napisati koristno nadomestno besedilo slike, kdaj naj bo alt prazen, kaj z grafi in logotipi ter zakaj alt ni prostor za ključne besede.
Izjava o dostopnosti: kaj mora vsebovati in kako jo pripravite
Kdo mora objaviti izjavo o dostopnosti, katere sestavine so obvezne, kje na strani naj bo objavljena in kako pripravite prvo različico.