Miks on oluline kontrollida värvide kontrastsust?

Uut e-lahendust (näiteks veebilehte, rakendust, jne) disainides on üks esimestest sammudest õigete värvide valimine ja nende omavaheline kombineerimine. Hele tekst heledal taustal on raskesti loetav, sama probleem on tumeda tekstiga tumedal taustal.

Värvikontrast on kahe värvi (näiteks teksti ja selle tausta) heleduse erinevus. Oluline on kontrollida kõikide värvide omavahelisi kombinatsioone, mida on plaanis kasutada. Kui värvide omavaheline kontrastsus on liiga väike, on veebilehe sisu raske lugeda inimesel, kellel on nõrk nägemine või värvipimedus. Samas, kui värvid on liiga erksad, võivad inimesed kogeda silmade väsimust või peavalu. 

Mida on oluline pidada meeles?

Oluline number on siinkohal 4,5:1 – kui tavaline tekst on enda taustast 4,5 korda kontrastsem, siis on see olukord vastav kohustuslikele ligipääsetavusnõuetele. Kui teksti suurus on vähemalt 18 või on tekst paksus kirjas ja suurusega 14, peab kontrastsuse suhe olema vähemalt 3:1, sest tekst ise on suurem ja paksem ning seega taustast paremini eristatav.

Lisaks tekstile tuleb värvikontrastsust kontrollida kõikide elementide puhul, mida kasutaja vajutada saab – nupud, ikoonid, vormiväljad, sotsiaalmeedia kanalite nupud jne (näiteks ikooni ja selle tausta vahe). Ühtlasi tuleb üle vaadata ka ühe elemendi erinevate olekute kontrastsus (näiteks kui element ei ole aktiivne või on fookuses). Mittetekstiliste komponentide kontrastsus peab olema vähemalt 3:1

Millega kontrollida värvide kontastsust?

Üheks väga heaks ja mugavaks vahendiks on WebAIM-i veebipõhine värvikontrastsuse kontrollimise tööriist. Testimise vahend kuvab kahe värvi kontrastsuse erinevust ja aitab tuvastada soovitud kontrastitasemele vastavat värvi. Keskkonda tuleb sisestada nii teksti kui ka tausta värvikood.

Tänaseks on loodud ka sellesama vahendi järjehoidja-versioon, mille saab lisada enda brauseri järjehoidjaribale WebAIM-i lehelt. Selle tööriista abiga saab veebilehelt lahkumata kontrollida, kas toonide kombinatsioon on vastavuses kontrastsusreeglitega. 

Tööriista lisamine oma järjehoidjasse on lihtne. Olles vastaval lehel (link on leitav eelnevast lõigust), tuleb kursoriga tirida funktsiooni nupp enda järjehoidjate hulka. Kui nupp on brauseri järjehoidjasse lisatud, avaneb sellele vajutades eraldi WebAIM-i väike aken, millel kuvatakse võrreldavate värvide koodid ja tulemus. Samuti on seal võimalus muuta toonide heledust ja tumedust. Klikkides värvitooni kasti peale, saab sealse värvipipetiga liikuda mööda oma veebilehte ringi, et leida üles täpne värvikood. Vajutades soovitud tooni peale, ilmub aknasse värvikood ning see näitab kontrastsust teise värvi suhtes.    

Sobilike värvide valimine on väga loominguline ja seda on tegelikult võimalik rakendada ka ligipääsetavusnõuete raames. Värvikombinatsioone on lugematu hulk, kuid sobilikega võidavad kõik.

Viimati uuendatud 20.11.2023

open graph imagesearch block image