SmerniceDober kontrast omogoča, da so vsebine jasno zaznavne v različnih pogojih: pri slabšem vidu, utrujenih očeh, močni sončni svetlobi ali na manjših zaslonih. Zato kontrast ni le estetska odločitev, temveč temeljna zahteva dostopne zasnove.
Za katere uporabnike je kontrast posebej pomemben?
Ustrezna uporaba barv in kontrasta je ključna za:
- slabovidne osebe,
- osebe z barvno slepoto,
- starejše uporabnike.
Hkrati pa kontrast koristi tudi mnogim drugim uporabnikom v vsakdanjih situacijah, na primer pri uporabi mobilnega telefona na prostem ali pri dolgotrajnem delu z zaslonom.
Besedilni kontrast
Pri besedilu je najpomembneje, da je razlika med barvo besedila in barvo ozadja dovolj velika, da je besedilo lahko berljivo brez napora.
Po dostopnostnih smernicah mora biti:
- razmerje kontrasta vsaj 4,5 : 1 za običajno besedilo,
- razmerje vsaj 3 : 1 za večje besedilo (18 px in več ali 14 px v krepkem tisku).
To velja za vse oblike besedila: odstavke, naslove, povezave, oznake v obrazcih in tudi besedilo v gumbih.
Pomembno v praksi
Besedilo je lahko formalno pravilno, vendar še vedno neberljivo, če je kontrast prenizek. Svetlo sivo besedilo na belem ozadju ali barvne kombinacije z majhno razliko v svetlosti so pogosta težava.
Primer prenizkega kontrasta na spletni strani:
Besedilo v gumbih in interaktivnih elementih
Tudi besedilo v gumbih, zavihkih in drugih interaktivnih elementih mora izpolnjevati zahteve za kontrast. Pogosta napaka je, da ima gumb ustrezno barvo ozadja, besedilo na njem pa je presvetlo ali pretemno.
Primer neustreznega in ustreznega kontrasta besedila v gumbih:
Nebesedilni kontrast
Kontrast ni pomemben le pri besedilu, temveč tudi pri nebesedilnih elementih, kot so:
- ikone,
- gumbi brez besedila,
- vnosna polja,
- potrditvena polja,
- grafični prikazi in deli slik, ki nosijo pomen.
Pri teh elementih mora biti kontrast med elementom in ozadjem vsaj 3 : 1.
Vsa stanja elementov (običajno, fokus, hover, izbran)
Interaktivni elementi (gumbi, povezave, zavihki, polja obrazcev) nimajo samo enega videza. Spreminjajo se glede na to, kako jih uporabnik uporablja:
- običajno stanje – ko element samo vidimo,
- hover – ko je nad njim miška,
- fokus – ko je izbran s tipkovnico (npr. s tipko Tab),
- izbran/aktiven – ko je kliknjen ali trenutno uporabljen.
Pomembno je, da so vsa ta stanja jasno vidna tudi brez zanašanja na barvo, saj morajo uporabniki, ki ne uporabljajo miške (npr. gibalno ovirani), imajo barvno slepoto ali uporabljajo bralnike zaslona oziroma povečave, takoj razumeti, kje se na strani nahajajo in kateri element je trenutno aktiven.
Primer iz prakse
Na obrazcu je gumb »Pošlji«:
- v običajnem stanju ima obrobo,
- ob fokusu se pojavi jasen okvir (ne samo sprememba barve),
- ko je izbran, se prikaže ikona kljukice.
Funkcionalne slike, ki delujejo kot gumbi
Včasih slika ali ikona ni le okras, ampak ima funkcijo, na primer:
- ikona koša za brisanje,
- puščica za naprej/nazaj,
- ikona tiskalnika za tiskanje.
Zato morajo biti takšni elementi jasno prepoznavni kot interaktivni, imeti ustrezen kontrast za zanesljivo prepoznavo ter ostati razumljivi tudi brez uporabe barv.
Primer prenizkega kontrasta pri funkcionalnih slikah:
In primer ustreznega kontrasta pri funkcionalnih slikah, ki imajo svojo interaktivno vlogo:
Grafi in diagrami, ki z barvo prenašajo ključne informacije
Pri grafih se pogosto uporablja barva za razlikovanje podatkov (npr. rdeča, zelena, modra). To ni dovolj, ker barv ne zaznavajo vsi enako.
To je pomembno, ker osebe z barvno slepoto ali slabovidni uporabniki pogosto ne razlikujejo rdeče in zelene, ne prepoznajo svetlih odtenkov ali uporabljajo sivinski prikaz, zato je informacija, ki je podana samo z barvo, zanje izgubljena.
Dobra praksa pri grafih je, da so dopolnjeni z ustrezno dostopno tabelo, saj so tako podatki uporabnikom še bolj dostopni in lažje razumljivi.
Primer uporabe vzorcev pri grafu:
Orodje za preverjanje ustreznih kontrastov
Za preverjanje ustreznosti barvnih kontrastov lahko uporabimo WebAIM Contrast Checker, orodje organizacije WebAIM, ki je enostavno in priročno za uporabo. V orodje vnesemo barvo besedila (ospredja) in barvo ozadja, nato pa nam samodejno izračuna kontrast ter prikaže skladnost s smernicami WCAG. Namesto ročnega vnosa lahko barve izberemo tudi s pomočjo pipete.
Orodje uporabljamo za preverjanje kontrasta tako pri besedilnih kot tudi pri nebesedilnih elementih, koristno pa je tudi že v fazi načrtovanja barvnih kombinacij za spletne strani ali dokumente.
Povezava s smernicami dostopnosti (WCAG)
Področje ustreznih kontrastov in rabe barv naslavljajo naslednji kriteriji uspeha WCAG:
- 1.4.3 Kontrast (najmanjši)
- 1.4.6 Kontrast (izboljšan – AAA)
- 1.4.11 Nebesedilni kontrast
- 1.4.1 Uporaba barve
Ti kriteriji zagotavljajo, da so besedilo, ikone, gumbi in drugi pomembni elementi jasno razločljivi od ozadja ter da pomen informacij ni podan zgolj z barvo. S tem omogočajo zaznavo vsebine tudi uporabnikom z zmanjšanim vidom, barvno slepoto ali drugimi omejitvami zaznavanja, pa tudi v manj ugodnih okoliščinah, kot so močna svetloba, manjši zasloni ali utrujene oči. Ustrezen kontrast tako ni le vprašanje dostopnosti, temveč pomembno prispeva k boljši berljivosti, preglednosti in splošni uporabniški izkušnji za vse.