Culorile mărcii dvs. au un impact emoțional puternic, dar cum le par vizitatorilor site-ului care au vedere parțial, daltoniști sau se confruntă cu factori de mediu care îngreunează vizibilitatea?
Nivelurile de culoare și contrast sunt esențiale pentru comunicare, iar obținerea acestor detalii exacte este esențială pentru designerul care se gândește la accesibilitate.'
Tulburările de percepție a culorii sunt mai frecvente decât ați crede. Așadar, în această postare, vom vorbi despre modul în care persoanele cu dizabilități precum vederea scăzută, dislexia și daltonismul interacționează cu web-ul.
Cuprins
Cum folosesc un verificator de culori pentru a îmbunătăți accesibilitatea site-ului meu?
Această secțiune este de fapt destul de simplă, deși necesită un efort. Va trebui să utilizați instrumentul online de verificare a contrastului WebAIM. WebAIM este o organizație non-profit cu sediul la Universitatea de Stat din Utah, cu misiunea de a îmbunătăți accesibilitatea web la nivel mondial.
Pur și simplu introduceți culoarea primului plan (de exemplu, culoarea textului sau a pictogramelor) și culoarea de fundal ca valori hexazecimale (cunoscute și ca valori hexadecimale), așa cum este specificat în HTML sau CSS, iar verificatorul raportului de contrast vă va informa dacă raportul este suficient. Amintiți-vă că raportul de contrast minim pe care ar trebui să-l căutați este de 4.5 la 1. Textul negru pe fundal alb are un raport de contrast de 21 la 1, așa că aveți o mare marjă de manevră.
5 instrumente pentru realizarea unei palete de culori web pe care toată lumea să o poată vedea
1. WebAIM Color Contrast Checker
Introduceți culorile hexagonale pentru prim-plan și fundal. Ieșirea arată conformitatea AA și AAA pentru textul normal și mare, împreună cu o propoziție exemplu. Glisoarele vă permit să schimbați lucrurile până când găsiți o combinație bună.
Atuuri
- Instrument simplu, cu o interfață ușoară pentru ochi.
- Acesta este un instrument frumos și simplu pentru începători și nu doar pentru designeri.
Puncte slabe
- Nu pot compara mai mult de două culori, doar două.
- Glisorul de luminozitate nu este o modalitate foarte bună de a alege culorile. Este greu de spus cât de atractive sunt culorile în acest afișaj simplu.
2. Verificator de contrast pentru WCAG
Introduceți culorile hexagonale pentru prim-plan și fundal. Afișează conformitatea AA și AAA pentru textul normal și mare lângă un eșantion de text Lorem Ipsum. Puteți încărca și o poză. O paletă de 9 culori este aleasă automat pentru dvs. Apoi, puteți compara fiecare culoare ca culoare de prim-plan sau de fundal.
Atuuri
- Instrument simplu, cu o interfață ușor de utilizat.
- Având capacitatea de a face palete din imagini.
Puncte slabe
- Paleta este aleasă automat și o puteți modifica în continuare cu selectorul de culori, dar acele modificări nu sunt salvate înapoi în paletă. Trebuie să copiați și să lipiți informațiile într-un document nou.
3. Cubul de culoare
Introduceți culorile pentru paletă, fiecare pe linia sa. Ieșirea prezintă exemple de litere cu rapoarte de contrast în comparație cu standardele AA pentru fonturi mici și mari. Trei coloane arată contrastul cu un fundal alb, un fundal negru și un set de culori de marcă care sunt „Cele mai lizibile dintre disponibile”.
Atuuri
- Ușor de observat Interfața cu utilizatorul (UI) este bine organizată, iar starea de trecere/eșec/edge este ușor de văzut.
Puncte slabe
- Nu respectă standardele stabilite de AAA.
- Nu face toate combinațiile posibile de culori și nu este clar la început că acesta este cazul.
4.) Grilă de contrast opt forme
Introduceți culorile paletei. De asemenea, puteți da fiecărei culori un nume. Aplicația realizează o masă cu toate combinațiile posibile de culori. Există trei dimensiuni de plăci. Există indicii vizuale pentru AA și AAA trece/eșec/margine și raportul de contrast efectiv. Coloanele și rândurile pot fi mutate în aplicație prin glisare și plasare. Datele tabelare pot fi salvate, exportate și partajate.
Atuuri
- Există o mulțime de caracteristici utile care ajută la analiza paletelor întregi.
Puncte slabe
- Este mai greu de învățat decât alte instrumente care sunt mai ușor de utilizat.
- Nu este modul corect de a compara doar două culori.
- Nu este bun pentru a-ți da seama cum se potrivesc culorile.
- Puțin copleșitor de privit, dar sunt afișate multe informații.
5. Color sigur
Introduceți culoarea de fundal. Alegeți familia, dimensiunea și greutatea fontului. Alegeți AA sau AAA ca standard. Afișează culoarea selectată și codul său hex, precum și un eșantion și raportul de contrast efectiv. Miniaturile mari ale posibilelor culori de prim plan cu suficient contrast sunt partea cea mai bună. Puteți alege să le priviți pe toate sau doar la anumite grupuri de culori (verde, albastru, violet etc.)
Atuuri
- Cu o interfață care este ușoară pentru ochi, este ușor să găsești o combinație de culori care arată bine și funcționează bine.
- Acesta este un instrument util dacă nu aveți deja o paletă de culori de marcă sau dacă doriți să o adăugați la una pe care o aveți deja pentru web.
Puncte slabe
- Puteți compara doar culorile de prim-plan și de fundal la un moment dat.
- Trebuie să copiați și să lipiți culorile într-un document separat dacă doriți să le salvați.
- Ieșiți și faceți lucruri pentru toată lumea!
Odată ce știți cum să utilizați aceste instrumente, este posibil să descoperiți că aveți nevoie de mai multe pentru un proiect. Poate Color Cube este cea mai bună modalitate de a arăta unui client ceea ce ați învățat despre accesibilitate. Poate veți folosi instrumentul WebAIM tot timpul pentru a face verificări rapide.
Concluzie
Folosind sfaturile, îndrumările și instrumentele despre care tocmai am vorbit, puteți oferi site-ului dvs. web culori și etichete cu un contrast ridicat. Acest lucru va face mai ușor pentru persoanele cu vedere scăzută, dislexie și daltonism să vă citească site-ul și conținutul. Nu fi surprins dacă publicul tău general consideră că este mai ușor să folosească site-ul tău.
