Barvni kontrast za besedilo, gumbe in ikone

Zakaj je kontrast pomemben

Bledo besedilo bralce nekaj stane. Slabovidni, starejši bralci in vsi, ki gledajo telefon na močni svetlobi, potrebujejo jasno razliko med besedilom in ozadjem. Smernice za dostopnost spletne vsebine (WCAG) organizacije W3C zato določajo najmanjše vrednosti za besedilo, za kontrolnike, kot so gumbi in vnosna polja, ter za ikone in grafike. Te vrednosti je mogoče izmeriti in preveriti pred zagonom.

Kako deluje kontrastno razmerje

Kontrastno razmerje primerja, kako svetli sta dve barvi. WCAG ne gleda odtenka, temveč relativno svetilnost: vrednost med 0 za najtemnejšo črno in 1 za najsvetlejšo belo. Trije kanali, rdeči, zeleni in modri, se pretvorijo in utežijo: zelena šteje največ, rdeča manj in modra najmanj. Razmerje je (L1 + 0,05) / (L2 + 0,05), kjer je L1 svetilnost svetlejše barve. Rezultat leži med 1:1 za dve enaki barvi in 21:1 za črno na beli.

V praksi sta pomembni dve pravili W3C. Prvič, vrednosti se ne zaokrožujejo: razmerje 4,499:1 ne doseže meje 4,5:1. Drugič, kontrast se meri glede na ozadje, ki je nastavljeno za besedilo. Če stran nastavi samo barvo besedila, barve ozadja pa ne, W3C to šteje za neuspeh, ker privzeto ozadje obiskovalca ni znano. Vedno nastavi obe barvi skupaj.

Trije kriteriji uspešnosti

• 1.4.3 Kontrast (najmanjši), raven AA: besedilo in slike besedila potrebujejo vsaj 4,5:1, veliko besedilo vsaj 3:1.
• 1.4.6 Kontrast (izboljšani), raven AAA: besedilo potrebuje vsaj 7:1, veliko besedilo vsaj 4,5:1. To je strožja raven in najbolj pomaga pri dolgih besedilih.
• 1.4.11 Kontrast nebesedilnih elementov, raven AA: vsaj 3:1 glede na sosednje barve, za vse, kar moraš videti, da prepoznaš kontrolnik in njegovo stanje (na primer rob vnosnega polja ali indikator fokusa), in za dele grafik, ki jih potrebuješ za razumevanje vsebine, kot so ikone ali črte v grafikonu.

Kaj šteje za veliko besedilo

Veliko besedilo ima vsaj 18 točk ali vsaj 14 točk v krepki pisavi. W3C to pretvori v približno 24 pikslov in približno 18,5 piksla v krepki pisavi. Veliko besedilo ima lahko manj kontrasta, ker so črke večje in njihove poteze širše. Pazi pri tankih pisavah: po navedbah W3C lahko glajenje robov tanke ali nenavadne pisave prikaže bledejše od določene barve. Priporoča debelejše pisave ali barvni par, ki je jasno nad najmanjšo vrednostjo.

Česa ni treba izpolniti

• Neaktivnih komponent, na primer onemogočenega gumba.
• Čistega okrasja in besedila, ki ga nihče ne more videti.
• Besedila, ki je del logotipa ali imena blagovne znamke.
• Naključnega besedila na sliki z drugo pomembno vsebino, na primer cestnega znaka na fotografiji.

Pogoste napake

• Svetlo siva na beli. Siva za datume, podnapise ali drugotno besedilo je pogosto prebleda: #999999 na beli doseže le 2,84:1. Najsvetlejša čista siva, ki na beli izpolni AA za običajno besedilo, je #767676 s 4,54:1.
• Besedilo na slikah. Kontrast se spreminja z vsakim delom fotografije. W3C slike ozadja brez dovolj kontrasta navaja kot neuspeh (F83). Besedilo postavi na enobarvno površino, sliko za njim potemni ali besedilo postavi ob sliko. Preveri najsvetlejšo točko za besedilom.
• Besedilo placeholderja. Sivi namig v praznem vnosnem polju je besedilo in zanj velja 1.4.3. Svetlo siva, kot je #9ca3af na beli, doseže le 2,53:1. Placeholder tudi ne nadomesti vidne oznake.
• Stanja ob lebdenju in fokusu. Besedilo, ki se pojavi ali spremeni ob lebdenju miške ali fokusu tipkovnice, mora dosegati enake vrednosti. Učinek ob lebdenju ne sme zmanjšati kontrasta kontrolnika ali oslabiti indikatorja fokusa. Indikator fokusa, ki ga oblikuješ sam, potrebuje 3:1 glede na sosednje ozadje.
• Belo besedilo na svetlih barvah blagovne znamke. Oranžni, rumeni, svetlo zeleni ali turkizni gumbi z belim besedilom pogosto ne ustrezajo: bela na #ff6600 doseže 2,93:1.
• Bledi robovi in ikone. Če je rob edino, kar kaže, kje je vnosno polje, potrebuje 3:1: #cccccc na beli ima 1,60:1. Tudi ikone, ki nosijo pomen brez besedila, kot sta puščica spustnega seznama ali ikona za zapiranje, potrebujejo 3:1.
• Preverjanje samo ene teme. Če ima tvoje spletno mesto temni način, njegove barvne pare preveri posebej. Barva, ki deluje na beli, lahko na temnem ozadju ne ustreza.

Popravi paleto blagovne znamke, ne da bi izgubil blagovno znamko

1. 1Zapiši vsako barvo z njeno vlogo: besedilo, ozadje, poudarek ali gumb, rob. Veliko težav se začne, ko ena barva opravlja vse naloge.
2. 2Barvo blagovne znamke obdrži tam, kjer je pravila laže izpolniti ali ne veljajo: v logotipu, na velikih površinah, za okrasje in za velike naslove.
3. 3Za besedilo in majhne elemente uporabi temnejši ali svetlejši odtenek istega barvnega tona. Če se spremeni le svetlost, barva ostane prepoznavna: belo besedilo na #c74f00, temnejši oranžni, doseže 4,61:1.
4. 4Ali pa namesto tega spremeni barvo besedila. Temno besedilo na svetli barvi blagovne znamke pogosto deluje bolje kot belo: #1a1a1a na #ff6600 doseže 5,92:1.
5. 5Določi eno sivo za drugotno besedilo, ki ustreza, na primer #767676 na beli, in jo uporabljaj povsod namesto več bledih sivih.
6. 6Preveri vsako stanje: običajno, lebdenje, fokus, napako in temni način. Končne barve shrani kot spremenljivke v slogovni datoteki, da nihče več ročno ne izbere blede barve.

Preveri svoje barve z Do4U

Preverjanje barvnega kontrasta izračuna te vrednosti za tvoje barve. Vneseš svoje barve, eno na vrstico, in vsaki dodeliš vlogo: besedilo, ozadje, poudarek (na primer gumb) ali rob. Koda vsak smiseln par preveri glede na AA in AAA za običajno in veliko besedilo ter glede na 3:1 za robove, ikone in površine gumbov, brez zaokroževanja navzgor. Za vsak par, ki ne ustreza, dobiš najbližjo ustrezno barvo, enkrat temnejšo in enkrat svetlejšo, v istem barvnem tonu. Do4U sestavi tudi prilagojeno paleto, jo še enkrat preveri kot celoto in jo izvozi kot lastnosti CSS po meri, SCSS ali JSON. Vse teče v kodi, brez UI, preverjanje pa je brezplačno.

Preverjanje pozna le barvne pare, ki jih vneseš. Ne vidi velikosti pisav, slik za besedilom, prosojnosti ali stanj ob lebdenju in fokusu, zato preizkusi tudi končane strani. Do4U sestavi osnutek, ti pa preveriš in odločiš.