Izmantojot augstas krāsas kontrastu, lai iegūtu vieglāk pieejamu dizainu
Augstu atlēcienu biežumu bieži izraisa tīmekļa vietnes slikta vizuālā pieejamība. Ja fonti ir pārāk mazi vai tie ir grūti salasāmi, ja ir pārāk daudz traucējošu vai nepietiekamu atstarpi, daudzi cilvēki vienkārši atstājiet vietni bez otrās domas.
Viens no biežākajiem iemesliem agrīnai pamešanai ir slikti izvēlēts krāsu shēmas, kas samazina lasāmību saturu.
Saskaņā ar PVO statistiku visā pasaulē ir aptuveni 285 miljoni vājredzīgu cilvēku, no kuriem daudzi ir daļēji vai pilnīgi krāsaini. Vizuāli invalīdi redz krāsas atšķirīgi izvairoties no zema krāsu kontrasta mūsu dizainos ir neizbēgami, ja vēlamies nodrošināt mūsu klientiem pieejamu un lietotājam draudzīgu tīmekļa vietni.
Web standarti krāsu kontrastam
Krāsu kontrastu attiecība mēra atšķirību kontrastā starp divām krāsām. Jo augstāka vērtība ir, jo vieglāk ir atšķirt objektu (tekstu, attēlu, grafiku) priekšplānā no fona.
Krāsas var kontrastēt dažādos veidos, piemēram, nokrāsu, vērtību un piesātinājums. Krāsu kontrastu aprēķina, izmantojot formulu, ko sniedz W3C, kas ir galvenā starptautiskā standartu organizācija World Wide Web.
Tas var radīt vērtību starp 1: 1 (nekāds kontrasts vispār, priekšplānā un fonā ir tāda pati krāsa) un 21: 1 (maksimālo kontrastu kas pastāv tikai starp melnbaltu).
W3C jaunākās tīmekļa satura pieejamības vadlīnijas (WCAG) 2.0 nodrošina tīmekļa izstrādātājiem un satura veidotājiem kritērijus minimālajai (AA līmeņa) un uzlabotās (AAA līmeņa) vērtībai, kas ir pieņemama krāsu kontrastu attiecība.
AA līmenis prasa vismaz 4.5: 1 attiecība regulārajam tekstam, un 3: 1 lielam tekstam. Tas ir daudz vieglāk lasīt lielu tekstu, piemēram, subtitriem, tāpēc tam ir nepieciešams mazāks krāsu kontrasts.
Ja vēlaties sasniegt AAA līmeni, kas ir uzlabots līmenis, jums ir nepieciešams veidot krāsu shēmu ar lielāku rūpību, jo tas prasa vismaz 7: 1 kontrasta attiecība normālam tekstam, un 4.5: 1 lieliem. Ja teksts ir daļa no logotipa vai zīmola nosaukuma, nepastāv minimālā krāsu kontrasta prasība ne WCAG līmenī.
Mēs varam piezvanīt tikai vietnei, kas pieejama vizuāli, ja krāsu kontrastu attiecība starp katru priekšplānu un tā fonu sasniedz vismaz AA līmeni.
Augstas krāsu kontrastu priekšrocības
Nodrošinot labāku lasāmību, jūs ne tikai piesaista vājredzīgus lietotājus, bet arī cilvēki, kas lasa jūsu saturu mazos ekrānos piemēram, viedtālrunī vai viedtālrunī slikti apgaismojuma apstākļi, un tālāk zemākas kvalitātes monitori.
Cilvēki arī lasa ātrāk, ja ir lielāks kontrasts starp tekstu un fonu, tāpēc, visticamāk, viņiem būs nepieciešams vairāk laika, lai viņi būtu garlaicīgi ar vietnes saturu..
Ja jūs uztraucaties par to, ka augstāka kontrasta attiecība būs negatīva ietekme uz jūsu dizaina estētiku, jums ir jāpārbauda Contrast Rebellion tīmekļa projekts, kas pierāda ar reāliem piemēriem, ka joprojām var rasties lielas kontrasta attiecības noteikumi pievilcīgu un vēsu dizainu.
Lietojumprogrammas krāsu kontrastam
Visā tīmeklī ir daudz lielisku bezmaksas rīku, kas var palīdzēt dizaineriem pārbaudīt savas mājas lapas krāsu kontrastu.
Vienkāršākais veids, kā pārbaudīt savu krāsu kontrastu, ir izvēlēties galvenās krāsas ar Photoshop vai piemērotu pārlūkprogrammas paplašinājumu, piemēram, šo programmu Firefox, un kopēt vērtības vienā no tālāk norādītajām lietotnēm.
Vissvarīgākais ir atcerēties, ka jums vienmēr ir nepieciešams salīdziniet priekšplāna krāsu, piemēram, teksta krāsu, ar tās apkārtni (fona krāsa).
1. WebAim krāsu kontrastu pārbaudītājs
WebAim (Web Accessibility In Mind) ir organizācija, kas veicina tīmekļa pieejamību, kas piedāvā izstrādātājiem vienkāršu, bet uzticamu krāsu kontrasta pārbaudītāju starp daudziem citiem lieliskiem pieejamības rīkiem, piemēram, Wave, vispārēju pieejamības novērtēšanas lietotni, kas var jums palīdzēt ātri novērtējiet vietnes pieejamības problēmas.
WebAim Color Contrast Checker stāsta jums ja jūsu krāsas iziet WCAG AA un AAA testus, gan parastiem, gan lieliem tekstiem.
2. Pārbaudiet krāsu kontrastu
Džonatans Snook, kas pašlaik strādā kā vadošais priekšgala attīstītājs Shopify, jau vairāk nekā desmit gadus ir uzturējis savu ērto krāsu kontrasta pārbaudes rīku. Snook lietotne ļauj jums mainīt HSL un RGB vērtības priekšplānā un fona krāsā pa vienam, izmantojot ērti diapazona slīdņi līdz sasniegsiet rezultātu, kas atbilst WCAG 2.0 kritērijiem.
CheckMyColours
Giovanni Scala izveidotās CheckMyColours ļauj jums pārbaudīt visu priekšplāna fona krāsu kombināciju krāsu kontrastu attiecību tiešraides vietnē.
Tā aprēķina spilgtuma kontrasta attiecība, spilgtuma starpība, un krāsu atšķirība, un sniedz jums pilnīgu pārskatu par rezultātiem. CheckMyColours ziņojums var ievērojami atvieglot jūsu izpratni par to, kā jūs varat uzlabot vietnes redzamību.
Krāsu shēmas dizainers
Krāsu shēmas dizainers nav īpaši krāsu kontrasta pārbaudītājs, bet gan rīks pilnīgu krāsu shēmu izstrāde.
Mēs to iekļāvām šajā kolekcijā, jo tai ir iezīme, kas ļauj jums redzēt, kā jūsu krāsu shēmu uztver cilvēki ar dažāda veida redzes traucējumiem. Jūs varat pārbaudīt savas krāsas, lai iegūtu pilnu krāsu aklumu, protanopiju, deuteranopiju un daudzus citus redzes traucējumus. Lietojumprogrammai ir jaunāka versija, ko sauc par Paletton, kas padara iespējamu vēl sarežģītāku redzes simulāciju (varat pārbaudīt arī tādas lietas kā neveiksmīgs LED displejs vai vājš CRT displejs).
W3C piedāvā arī lielu tīmekļa pieejamības novērtēšanas rīku sarakstu, kurā var atrast daudzus citus krāsu kontrastus, piemēram, šo noderīgo pieejamības krāsu ratu.
Padomi vizuāli pieejamu tīmekļa vietņu izveidei
Ja vēlaties izveidot vizuāli pieejamu tīmekļa vietni, tā vienmēr ir laba ideja izvairīties no krāsu izmantošanas, lai nodotu funkcionalitāti vai nozīmi. Ikonas, kas maina to krāsu, pamatojoties uz to pašreizējo stāvokli, ir tipisks piemērs.
Ja tas ir iespējams, vienmēr veidot papildu vizuālus norādījumus kas palīdz cilvēkiem, kuri redz atšķirīgas krāsas, saprast funkcionalitāti.
Nekad neaizmirstiet pievērsiet īpašu uzmanību pogas, saites un izvēlņu krāsu kontrastam, jo tie ir navigācijas līdzekļi jūsu vietnē. Ja lietotāji nevar ērti pārvietoties jūsu vietnē, jūs tos ātri zaudēsiet. Pieejamās krāsas darbībai ar pogām ir arī izšķiroša nozīme ir labiem konversijas kursiem.
Tā ir laba darbplūsmas prakse, lai pēc iespējas agrāk pārbaudītu krāsu kontrastu, jo būs grūti pārliecināt savu klientu mainīt vietnes krāsu shēmu vēlāk, izstrādājot projektēšanas procesu..
Tagad lasiet: praktiska pieeja mājas lapas krāsu shēmas izvēlei
