Kasutades suure värvi kontrastsust rohkem ligipääsetava disaini jaoks

Värvikontrastide veebistandardid

Värvi kontrasti suhe mõõdab kahe värvi kontrastsuse erinevust. Mida kõrgem on väärtus, seda lihtsam on eseme (taust, pilt, graafika) esiplaanil taustast eristada..

Värvid võivad kontrastsed olla mitmel erineval viisil, näiteks värvitoon, väärtus ja küllastus. Värvikontrastsuse suhe arvutatakse valemiga, mille annab W3C, mis on peamine rahvusvaheline veebiorganisatsioon.

See võib võtta väärtuse 1: 1 (mingit kontrastsust, esiplaanil ja taustal on sama värvi) ja 21: 1 (maksimaalne kontrast mis on olemas ainult musta ja valge vahel).

W3C viimased veebisisu juurdepääsetavuse juhised (WCAG) 2.0 annavad veebiarendajatele ja infosisu loojatele minimaalse (taseme AA) ja täiustatud (taseme AAA) väärtuse vastuvõetava värvi kontrasti suhte võrdlusalused.

Tase AA nõuab vähemalt 4.5: 1 suhe tavalise teksti puhul, ja 3: 1 suure teksti jaoks. See on palju lihtsam lugeda suurt teksti nagu subtiitrid, mistõttu vajab see väiksemat värvikontrasti.

Kui soovid jõuda tasemele AAA, mis on täiustatud tase, peate oma värvilahenduse rohkem hoolitsema, sest see nõuab vähemalt 7: 1 normaalse teksti kontrastisuhe, ja 4,5: 1 suurte jaoks. Kui tekst on osa logo või kaubamärgi nimest, ei ole minimaalset värvi kontrasti nõuet WCAG tasandil.

Me võime helistada ainult veebisaidile, mis on visuaalselt kättesaadav, kui värvi kontrastsuse suhe iga esiplaani objekti ja selle tausta vahel ulatub vähemalt tasemeni AA.

Kõrge värvi kontrasti suhte eelised

Parema loetavuse tagamisega ei kaasata ainult nägemispuudega kasutajaid, vaid ka inimesed, kes loevad teie sisu väikestel ekraanidel näiteks nutitelefoni või nutitelefoni vahel halb valgustus, ja edasi madalama kvaliteediga monitorid.

Inimesed loevad kiiremini ka siis, kui teksti ja tausta vahel on suurem kontrastsus, seega võtab see tõenäoliselt rohkem aega, et nad saidi sisuga igavleda..

Kui te muretsete, et suurema kontrastsuse suhe avaldab negatiivset mõju teie disaini esteetikale, peate kontrollima Contrast Rebellioni veebiprojekti, mis tõestab reaalsete näidetega, et suure kontrastsuse suhtarvuga reeglite järgimine võib endiselt kaasa tuua atraktiivsetes ja jahedates kujundustes.

Rakendused värvi kontrastsuse kontrollimiseks

Kogu veebis on palju suurepäraseid tasuta tööriistu, mis aitavad disaineritel kontrollida oma veebisaidi värvikontrastsust.

Lihtsaim viis värvide kontrastsuse testimiseks on valida peamised värvid kas Photoshopi või sobiva brauseri laiendiga, nagu see on Firefoxile, ja kopeerige väärtused ühte allpool toodud rakendustest.

Kõige tähtsam on meeles pidada, et sa pead alati võrrelge esiplaani värvi, näiteks teksti värvi, ümbritseva piirkonnaga (taustavärv).

1. WebAimi värvi kontrasti kontroller

WebAim (Web Accessibility In Mind) on veebi juurdepääsetavust edendav organisatsioon, mis pakub arendajatele lihtsa, kuid usaldusväärse värvi kontrastsuse kontrollija paljude teiste suurepäraste juurdepääsetavuse vahendite, nagu Wave, üldise juurdepääsetavuse hindamise rakenduse, mis aitab teil kiiresti hinnata saidi juurdepääsetavuse probleeme.

WebAimi värvi kontrasti kontroller ütleb teile kui teie värvid läbivad WCAG AA ja AAA testid, nii tavaliste kui ka suurte tekstide puhul.

2. Värvikontrolli kontroll

Jonathan Snook, kes praegu tegutseb Shopify esirinnakujundajana, on üle kümne aasta korraldanud oma käepärase värvi kontrasti kontrollimise tööriista. Snooki rakendus võimaldab teil muutke HSL ja RGB väärtusi esiplaanile ja taustavärvile ükshaaval, kasutades mugavad vahemiku liugurid kuni jõuate tulemusega, mis vastab WCAG 2.0 võrdlusalustele.

CheckMyColours

Giovanni Scala loodud CheckMyColours võimaldab teil kontrollida kõikide esiplaanide taustavärvi kombinatsioonide värvikontrastsust otse veebisaidil.

See arvutab heleduse kontrastsuse suhe, heleduse erinevus, ja värvi erinevus, ja annab teile tulemuste kohta täieliku aruande. CheckMyColours'i aruanne võib oluliselt lihtsustada teie arusaamist, kuidas saate oma saidi visuaalset kättesaadavust parandada.

Värviskeemi disainer

Värviskeemi disainer ei ole eriti värvikontraster, vaid tööriist täielike värviskeemide kavandamine.

Me lisame selle sellesse kogumisse, sest sellel on omadus, mis võimaldab teil näha, kuidas teie värviskeemi tajuvad inimesed, kellel on erinevat tüüpi nägemispuudega inimesed. Te saate oma värve testida täisvärvuse, protanopia, deuteranoopia ja paljude teiste nägemispuudega. Rakendusel on uuem versioon nimega Paletton, mis teeb võimalikuks isegi keerukama nägemissimulatsiooni (saate ka testida asju, nagu halb LED-ekraan või nõrk CRT-ekraan).

W3C pakub teile ka tohutut veebi juurdepääsetavuse hindamise tööriistade loendit, kust leiate palju teisi värvi kontrasti tööriistu, näiteks seda abivalmis värvituba.

Näpunäited visuaalselt juurdepääsetavate veebisaitide loomiseks

Kui soovite luua visuaalselt ligipääsetavat veebisaiti, on alati hea mõte vältida värvide üksi kasutamist funktsionaalsuse või tähenduse edastamiseks. Selle jaoks on tüüpilised näited, mis muudavad nende värvi nende praeguse oleku põhjal.

Kui see on võimalik, alati kujundada täiendavaid visuaalseid näpunäiteid mis abistavad värve erinevalt nägevaid funktsioone.

Ära kunagi unusta pöörama erilist tähelepanu nuppude, linkide ja menüüde värvikontrastile, kuna need on teie saidil navigeerimise vahendid. Kui kasutajad ei suuda saidil kergesti navigeerida, kaotate need kiiresti. Tegevusnuppudele juurdepääsuvärvid on ka oluline konversioonimäär.

See on hea töövoo tava, et testida värvide kontrastsust nii kiiresti kui võimalik projekteerimisprotsessis, sest on raske veenda klienti saidi värvilahendust hiljem projekteerimisprotsessis hiljem muutma..

Nüüd loe: Praktiline lähenemine veebisaidi värviskeemi valikule