Barvni kontrast: razmerja WCAG, preverjanje in popravki

Svetlo sivo besedilo na beli podlagi je v oblikovalski datoteki videti čisto. Na telefonu na močnem soncu ali za slabovidne ga je težko brati. To je tudi najpogostejša napaka dostopnosti sploh: WebAIM Million 2026 (odpre se v novem zavihku) je besedilo z nizkim kontrastom našel na 83,9 % milijona najbolj obiskanih domačih strani, v povprečju 34 ločenih primerov na stran.

Dobra novica je, da je kontrast merljiv, meje so jasne, popravki pa večinoma poceni. Ta vodnik vam da številke, brezplačna orodja in način, kako popraviti barve blagovne znamke, ne da bi začeli znova.

Kaj je razmerje barvnega kontrasta?

Kontrastno razmerje je število, ki primerja relativno svetlost ali luminanco dveh barv, običajno besedila in njegovega ozadja. WCAG ga izračuna po določeni formuli, rezultat pa sega od 1:1 (brez razlike, belo na belem) do 21:1 (črno na belem). Višje kot je število, laže ločimo barvi.

Formula je (L1 + 0,05) / (L2 + 0,05), pri čemer je L1 relativna luminanca svetlejše barve, L2 pa temnejše. Ročno vam je ne bo treba nikoli računati, pomembna pa je ena podrobnost: šteje samo luminanca, ne barvni ton. Zato je lahko rdeče besedilo na zeleni podlagi videti živo in kljub temu dobi slab rezultat.

Druga podrobnost, ki jo ljudje spregledajo, je zaokroževanje. W3C v pojasnilnem dokumentu za merilo 1.4.3 (odpre se v novem zavihku) pravi, da se izračunane vrednosti „ne smejo zaokroževati (npr. 4,499:1 ne bi doseglo praga 4,5:1)“. Siva #767676 na belem (4,54:1) torej ustreza, #777777 na belem (4,48:1) pa ne, čeprav ju nihče ne bi ločil s prostim očesom.

Kakšno kontrastno razmerje zahteva WCAG?

Za raven AA, na katero se sklicuje večina zakonov in pogodb, potrebuje običajno besedilo razmerje vsaj 4,5:1 glede na ozadje, veliko besedilo pa 3:1 (merilo uspešnosti 1.4.3). Komponente vmesnika in pomenska grafika potrebujejo 3:1 glede na sosednje barve (1.4.11). Strožja raven AAA zahteva 7:1 za običajno in 4,5:1 za veliko besedilo (1.4.6).

Zakaj 4,5:1? W3C pojasnjuje, da to razmerje „nadomesti izgubo občutljivosti za kontrast, ki jo običajno doživljajo uporabniki z izgubo vida, enakovredno približno vidu 20/40“ (to je ostrina vida približno 0,5). Z drugimi besedami, določeno je za ljudi z zmerno zmanjšanim vidom, med katere spadajo tudi mnogi starejši kupci, ki se nikoli ne bi imeli za invalide.

Nekatero besedilo je izvzeto: logotipi in imena blagovnih znamk, zgolj okrasno besedilo, besedilo, ki ni vidno nikomur, besedilo na sliki z drugo pomembno vizualno vsebino in besedilo v neaktivnih (onemogočenih) kontrolnikih. Vaš logotip lahko ostane, kakršen je. Odstavek v bledi barvi vašega logotipa pa ne.

Kaj šteje za veliko besedilo?

Veliko besedilo v WCAG pomeni vsaj 18 točk ali vsaj 14 točk, če je krepko. W3C to preračuna v približno 24 pikslov CSS oziroma 18,5 piksla za krepko besedilo. Vse manjše potrebuje polnih 4,5:1. Osnovno besedilo, napisi pod slikami, oznake obrazcev, cene in povezave v nogi skoraj nikoli niso veliko besedilo, zato potrebujejo višje razmerje.

Takole je to videti v praksi. Siva #949494 na belem doseže 3,03:1. To je v redu za 28-pikselski naslov in neustrezno za 16-pikselski odstavek v isti barvi. Veliko spletnih mest ustreza pri naslovih in ne ustreza pri vsem, kar je pod njimi.

Tanke in okrasne pisave zahtevajo dodatno pozornost. W3C opozarja, da zaradi glajenja robov (anti-aliasing) „brskalniki lahko posebej tanke ali nenavadne pisave prikažejo v precej bledejši barvi“ od izbrane. Če je pisava vaše blagovne znamke tanka, si pustite rezervo nad 4,5:1, namesto da ciljate na 4,51.

Ali kontrast velja za gumbe, ikone, indikatorje fokusa in grafikone?

Da. Po merilu uspešnosti 1.4.11 (raven AA) potrebuje vse, kar morajo ljudje videti, da prepoznajo kontrolnik, njegovo stanje ali grafiko, 3:1 glede na sosednje barve. To zajema robove polj obrazcev, ikone brez besedilne oznake, obrobe fokusa, stanja potrditvenih polj in stikal ter črte in segmente grafikonov. Besedilo v gumbu še vedno potrebuje 4,5:1.

• Polja obrazcev: svetlo siv rob #CCCCCC na belem doseže 1,61:1. Če je ta bleda črta edino, kar kaže, kam pisati, ne ustreza.
• Gumbi: WCAG ne zahteva vidnega roba okoli vsakega gumba. W3C v pojasnilnem dokumentu za merilo 1.4.11 (odpre se v novem zavihku) pravi, da je meja potrebna le, kadar ni drugega vizualnega načina za prepoznavanje kontrolnika. Če je gumb prepoznaven samo po obarvani obliki, mora imeti ta oblika 3:1 glede na stran.
• Ikone: povečevalno steklo za iskanje, srce za seznam želja ali ikona košarice brez besedila zraven potrebujejo 3:1.
• Indikatorji fokusa: obroba, ki kaže fokus tipkovnice, mora biti v kontrastu z okoliškim ozadjem. Novejša merila za fokus obravnava naš vodnik po WCAG 2.2.
• Grafikoni: črte v črtnem grafikonu in izseki tortnega grafikona potrebujejo 3:1, razen če so iste vrednosti prikazane tudi z besedilom.
• Onemogočeni kontrolniki so izvzeti, čeprav morajo ljudje še vedno vedeti, ali je gumb mogoče pritisniti.

Povezave v tekočem besedilu so poseben primer. Če so označene samo z barvo, brez podčrtaja, tehnika W3C G183 (odpre se v novem zavihku) zahteva 3:1 med barvo povezave in okoliškim besedilom, obe pa še vedno potrebujeta 4,5:1 glede na ozadje. Najti tri barve, ki izpolnijo vse to, je težko. Podčrtaj je veliko lažja rešitev.

Kako preverim barvni kontrast?

Za posamezne barvne pare uporabite brezplačen preverjevalnik kontrasta, za žive strani orodja za razvijalce v brskalniku, za iskanje težavnih območij po celotnem spletnem mestu pa samodejni pregled. Nato z očmi preverite, kar orodja spregledajo: besedilo na fotografijah in prelivih, stanja ob prehodu z miško in fokusu, besedilo ograde in sporočila o napakah. Večina tega vzame nekaj minut na predlogo strani.

• WebAIM Contrast Checker (odpre se v novem zavihku): vnesite dve šestnajstiški kodi barv in dobite razmerje z oceno za običajno besedilo, veliko besedilo in grafične predmete. Drsnik za svetlost je priročen za iskanje najbližjega ustreznega odtenka.
• Colour Contrast Analyser (odpre se v novem zavihku): brezplačna namizna aplikacija podjetja Vispero za Windows in macOS. Njena kapalka zajame kateri koli piksel na zaslonu, kar je uporabno za besedilo na slikah, v PDF-jih in aplikacijah, vključuje pa tudi simulator barvne slepote.
• Chrome DevTools: preglejte del besedila in odprite izbirnik barv. Njegov razdelek o kontrastnem razmerju (odpre se v novem zavihku) prikaže črti za AA in AAA in lahko predlaga ustrezno barvo. Plošča CSS Overview navede vse težave s kontrastom na strani.
• Samodejni preverjevalniki: razširitve brskalnika in Lighthouse označijo besedilo z nizkim kontrastom na celotni strani, besedilo na slikah ali prelivih pa pogosto označijo kot besedilo, ki potrebuje ročni pregled, namesto da bi ga ocenili kot ustrezno ali neustrezno.

Kjer orodja ne zadoščajo, vzorčite ročno. Pri besedilu na glavni fotografiji preverite najsvetlejši del slike za najsvetlejšimi črkami; W3C slike v ozadju brez zadostnega kontrasta navaja kot znano napako (F83). Z miško pojdite čez gumbe, se do njih pomaknite s tipko Tab, sprožite napako v obrazcu, preklopite v temni način, če ga ponujate. Tudi temna tema lahko ne ustreza: siva #757575 na ozadju #121212 doseže 4,07:1. Naš vodnik kako preizkusiti dostopnost spletnega mesta kontrast obravnava skupaj z drugimi hitrimi ročnimi preverjanji.

Kako odpravim nizek kontrast, ne da bi spremenil blagovno znamko?

Običajno tako, da za besedilo in majhne elemente dodate temnejši odtenek barve blagovne znamke, izvirnik pa ohranite za velike naslove, ozadja in ilustracije. Veliko barv blagovnih znamk ne ustreza le pri majhnih velikostih. Pogosto je dovolj, da belo besedilo na svetli barvi blagovne znamke zamenjate s temnim, večina obiskovalcev pa bo opazila le, da se stran laže bere.

1. Za vsako barvo blagovne znamke pripravite različico, varno za besedilo, z vsaj 4,5:1 glede na glavna ozadja, in jo uporabite za osnovno besedilo, povezave in majhne ikone.
2. Izvirno svetlo barvo uporabite za velike naslove (tam zadošča 3:1), ozadja, ilustracije in okrasje.
3. Na svetlih barvah blagovne znamke belo besedilo na gumbih zamenjajte s temnim.
4. Pod besedilo na fotografijah dodajte polno ali delno prosojno podlago.
5. Preverite vsako stanje: prehod z miško, fokus, obiskano, izbrano, napako in besedilo ograde.
6. Ustrezne pare shranite kot oblikovalske žetone (design tokens) ali nastavitve teme, da jih nove strani podedujejo, namesto da bi jih izumljale znova.

Oblikovanje za barvno slepoto: zakaj barva sama ni dovolj

Kontrast in barva sta različni težavi. Po podatkih Colour Blind Awareness (odpre se v novem zavihku) ima motnjo barvnega vida približno vsak 12. moški in vsaka 200. ženska, najpogosteje gre za rdeče-zeleno slepoto. WCAG 1.4.1 (odpre se v novem zavihku) (raven A) pravi, da barva ne sme biti edini vizualni način za posredovanje informacij, zato jo kombinirajte z besedilom, ikonami, vzorci ali podčrtaji.

• Napake v obrazcih: samo rdeč rob ne ustreza. Ob polje dodajte sporočilo, kot je „Vnesite poštno številko“, najbolje z ikono.
• Zaloga in stanje: zelena ali rdeča pika ob izdelku mnogim kupcem ne pove ničesar. Napišite „Na zalogi“ ali „Razprodano“.
• Grafikoni: legendo, ki temelji na ujemanju barv, je težko brati. Črte označite neposredno ali uporabite vzorce in različne sloge črt.
• Povezave: v besedilu jih podčrtajte, iz zgoraj navedenih razlogov.

Če želite težavo videti sami, lahko Chrome DevTools posnema motnje vida, simulator pa ima tudi Colour Contrast Analyser. Tudi tu kontrast pomaga: razmerje meri svetlost, ne barvnega tona, zato dve barvi z visokim razmerjem ostaneta ločljivi, tudi ko sta si tona videti podobna. Več o tem, kako slabovidni in ljudje z drugimi okvarami nastavijo svoje naprave, preberite v članku kako osebe z invalidnostjo uporabljajo splet.

Ali so načini visokega kontrasta in stikala za kontrast dovolj?

Ne. Kontrastne teme operacijskega sistema in stikala za kontrast na strani pomagajo ljudem, ki vedo, da potrebujejo več kontrasta, in ga vklopijo. WCAG pa vašo stran ocenjuje v privzetem stanju, zato morajo barve, ki jih vsak obiskovalec vidi najprej, še vedno ustrezati. Stikalo je dodatna možnost za tiste, ki želijo več, ne popravek za barve, ki ne ustrezajo.

Nekatere osebe z invalidnostjo uporabljajo kontrastne teme v sistemu Windows, ki vaše barve zamenjajo s svojimi. Spletno mesto je vredno preizkusiti z vklopljeno takšno temo: ikone, sestavljene iz slik v ozadju, lahko izginejo, prav tako slogi fokusa, narisani samo s senco (box-shadow). Medijska poizvedba CSS prefers-contrast omogoča tudi, da ponudite različico z višjim kontrastom tistim, ki so jo zahtevali v sistemskih nastavitvah.

Naš pripomoček ima prilagoditev kontrasta in profil za barvno slepoto in nekaterim obiskovalcem koristita. Kljub temu bi vam povedali enako: če je vaše osnovno besedilo #999999 na belem, spremenite CSS. Pripomoček obiskovalcu, ki želi več kontrasta, omogoči, da ga dobi. Privzetih barv, ki ne ustrezajo, ne naredi ustreznih, in to piše tudi v poglavju o WCAG v naši dokumentaciji.