Kako zagotoviti kontrastne barve
Barve in kontrasti imajo ključno vlogo pri dostopnosti digitalnih vsebin. Kontrast pomeni razliko v svetlosti med dvema barvama, na primer med besedilom in ozadjem ali med ikono in površino za njo. Če kontrast ni zadosten, so informacije težko berljive ali celo nevidne – tudi če je besedilo pravilno zapisano.
Stopnje Zahtevnosti
Osnovno
Avtor
Andreja Bevc
Objavljeno
29. 05. 2026
Posodobljeno
15. 08. 2026
Smernica pokriva oviranosti:
•	Kognitivna oviranost
•	Vidna oviranost
Dober 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.
Slika: Primer ikon družbenih omrežij z neustreznim in ustreznim kontrastom za boljšo vidnost in prepoznavnost.
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:
Slika: Besedilo in ikone na svetlem ozadju imajo prenizek kontrast, zato so težje berljivi in opazni.
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:
Slika: Primer gumbov z oranžnim besedilom na oranžnem ozadju ter črnim besedilom na oranžnem ozadju.
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.
Slika: Primer gumba v običajnem, fokusiranem in izbranem stanju za prikaz različnih stanj interaktivnega elementa.
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:
Slika: Ikoni tiskanja in prenosa z neustreznim kontrastom, zaradi česar sta slabše vidni uporabnikom.
In primer ustreznega kontrasta pri funkcionalnih slikah, ki imajo svojo interaktivno vlogo:
Slika: Ikoni tiskanja in prenosa z ustreznim kontrastom, zato sta jasno vidni in enostavno prepoznavni.
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.
  Namig:  Pri grafih ne uporabljajte zgolj barve za razlikovanje podatkov, temveč uporabite tudi oznake, vzorce ter besedilne opise ali legende z dobrim kontrastom.
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:
Slika: Krožni graf uporablja poleg barv tudi šrafure, zato so posamezni deli grafa lažje razlikovani.
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.
Slika: Prikaz orodja za preverjanje kontrasta, ki izračuna razmerje med barvo besedila in ozadja.
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.
Področja: Aplikacije, Dokumenti, Družabna omrežja, Spletna mesta, Digitalna dostopnost
Sektor: Izobraževanje, Javna uprava, Kultura, Turizem
Vir: https://dostopnovsem.org/smernice/vse-smernice/1827-kako-zagotoviti-kontrastne-barve/