Care este raportul WCAG? De ce ar trebui să-l implementați în desenele dvs

Ghidurile de accesibilitate a conținutului web (WCAG) sunt linii directoare de accesibilitate pentru design digital și web. Respectarea acestor instrucțiuni asigură că culorile sunt suficient de contrastate pentru a-i ajuta pe cei cu deficiențe de vedere să vă vadă și să citească corect desenele. Acest lucru merge, de asemenea, mână în mână cu dimensiunea tipografică, pentru a asigura lizibilitatea acesteia împreună cu culorile.

Într-o lume care ar trebui să fie mai incluzivă, adăugarea de elemente accesibile la design-ul dvs. nu va face decât să vă ridice munca și vă va permite să o împărtășiți cu mai mulți oameni.

Care este raportul WCAG?

WCAG înseamnă Instrucțiuni privind accesibilitatea conținutului web. WCAG ajută pe oricine proiectează sau creează pentru web sau internet să se asigure că design-urile lor ating obiectivele de accesibilitate. Aceasta înseamnă că desenele dvs. pot fi savurate și utilizate de oricine, fără a-i exclude pe cei cu deficiențe de vedere sau alte dizabilități atunci când este posibil.

Raportul WCAG stabilește ratele minime pentru atingerea accesibilității țintă. Aceasta include contrastul de culoare și dimensiunea textului, ambele care asigură celor cu deficiențe de vedere au șanse mai mari de a vedea, de a interacționa cu și de a folosi design-urile dvs. Nu numai că atingerea raportului WCAG îi ajută pe cei cu deficiențe de vedere, dar crește și experiența utilizatorului pentru toți utilizatorii web.

The World Wide Web Consortium dezvoltă standarde pentru dezvoltarea web. Deși nu există reguli stabilite pentru accesibilitatea web, WCAG stabilește un standard pe care trebuie să-l urmeze orice designer web.

Când se testează raporturile de contrast, WCAG sugerează o evaluare de la A la AAA. O evaluare A arată cele mai scăzute niveluri de contrast. AA sunt niveluri de contrast medii cu un raport de 4,5:1 - considerat raportul minim. În cele din urmă, AAA este cel mai înalt nivel de contrast. Dacă proiectați pentru toată lumea, nivelurile dvs. de contrast sunt cele mai bune atunci când sunt între un interval AA și AAA.

De ce este important raportul WCAG în design grafic și web?

Designul grafic și designul web nu ar trebui doar să facă informațiile să arate frumos. Designul informațiilor informează masele - aceasta înseamnă să vă faceți informațiile accesibile tuturor. Implementarea WCAG asigură modele accesibile pentru cei cu deficiențe de vedere, dislexie, neurodivergență sau orice lucru care afectează vederea sau capacitatea de citire a cuiva.

Designul web și digital – precum și programarea – au deja stabilite funcții de accesibilitate. De exemplu, Windows oferă instrumente utile de accesibilitate pentru utilizatoriși este deja obișnuit ca majoritatea videoclipurilor YouTube să le ofere subtitrări sau subtitrări. Dar putem întotdeauna să îmbunătățim accesibilitatea.

Designul global creează un design mai bun. Cu cât sunt mai mulți oameni care se pot implica cu designul tău, cu atât are mai mult succes și cu atât are mai multă acoperire. Nu numai că este bine pentru tine, ca designer, să ajungi la mai mulți oameni, dar este mai bine pentru lume ca mai puțini oameni să fie excluși.

Proiectarea cu raportul WCAG și caracteristicile de accesibilitate în desenele dvs. vor avea efecte pozitive asupra paletelor de culori, alegerilor tipografiei și dimensiunilor textului. Nu ați proiecta în mod intenționat ceva greu de citit, așa că de ce nu ați include mai multe modalități de a crea modele cu o mai bună lizibilitate pentru toți oamenii?

Implementarea raportului WCAG în proiectele dvs

Există locuri în care puteți verifica raportul WCAG în design-ul dvs., cum ar fi acesta verificator de contrast site-ul web. Dar ar trebui să te apuci oricum de a implementa caracteristici de design accesibile în munca ta, fără să te bazezi pe verificarea cu strictul minim.

Trebuie remarcat faptul că regulile de contrast nu se aplică designului logo-ului. Acest lucru se datorează faptului că logo-urile sunt prezentate la dimensiuni diferite și adesea pe fundaluri diferite. Cu toate acestea, nu vă dăunează să luați în considerare raportul WCAG atunci când proiectați logo-uri.

Culori cu contrast ridicat

Folosirea culorilor cu contrast ridicat este o modalitate ușoară de a adăuga incluziune design-urilor dvs. Culorile care contrastează unele cu altele îi vor ajuta pe cei cu deficiențe de vedere și daltonism să vă vadă mai bine desenele. Nu numai asta, dar chiar și persoanele fără nicio afectare a vederii lor vor vedea mai bine – și vor interacționa cu – design-urile tale.

Ați încercat vreodată să citiți un text roz deschis pe un fundal verde deschis? Este aproape imposibil. Dar un text albastru închis pe un fundal galben deschis este mult mai ușor de văzut și de citit.

Culorile cu contrast ridicat funcționează cel mai bine atunci când plasați text pe un fundal colorat sau dacă utilizați trasee mici în ilustrații. Khroma este un generator de palete de culori AI care vine cu un verificator de contrast încorporat - unul dintre multele grozave Instrumente AI pentru a vă ajuta fluxul de lucru de design grafic.

O modalitate excelentă de a verifica contrastul este să vă transformați designul în tonuri de gri. Dacă puteți separa culorile și înțelegeți designul în negru și gri, ar trebui să se traducă bine și în culorile alese.

Mărimea textului

Pe lângă faptul că culorile textului sunt suficient de contrastate cu culorile de fundal, textul în sine ar trebui să fie suficient de mare pentru a fi citit cu ușurință. Raportul WCAG pentru dimensiunea mare a textului este de 3:1.

Dimensiunea textului nu este egală în toate tipurile de tipografie, așa că nu vă bazați pe o dimensiune de 12 puncte, care este de obicei văzută ca dimensiune minimă pentru lizibilitatea standard, pentru toate fonturile. Testați-le singur sau cu testeri de utilizatori afișând sau imprimând modele la dimensiune reală. Dacă culorile dvs. nu sunt contrastate atât de bine, atunci textul mai mare va ajuta la lizibilitate, ca o soluție.

Lizibilitatea fontului

Este de la sine înțeles, dar fonturile pe care le alegeți în desenele dvs. trebuie să fie ușor de citit. Fonturile decorative, fonturile cursive sau fonturile desenate manual au adesea probleme de lizibilitate. Trupele de heavy metal sunt renumite pentru că folosesc fonturi inerent greu de citit pentru logo-urile trupei lor, de exemplu.

De asemenea, ar trebui să luați în considerare kerningul și urmărirea atunci când utilizați textul pentru modele mici. Spațierea dintre litere poate afecta, de asemenea, lizibilitatea dorită a cuvintelor.

Factori de accesibilitate incluzivi

În timp ce doar contrastul de culoare, dimensiunea fontului și lizibilitatea textului în designul web sunt luate în considerare în rapoartele WCAG, ar trebui să vă faceți toate designurile web și grafice ținând cont de incluziune.

Dacă ești un designer web care lucrează cu un programator sau un programator, asigură-te că ești folosind tehnici HTML care ajută la accesibilitatea web. Există, de asemenea funcțiile de accesibilitate din Canva pentru a extinde acoperirea designurilor tale cu publicul tău.

Nu ar trebui să vă opriți doar la cerințele minime pentru rapoartele WCAG; dacă aveți control asupra adăugarii de text alternativ la imagini, subtitrări la fișierele audio sau video sau chiar formularea utilă a textului pentru hyperlinkuri – care sunt citite cu voce tare de cititorii de ecran – ar trebui să treceți mai sus și dincolo. Includerea funcțiilor de accesibilitate nu exclude niciun public, ci doar invită mai multe persoane.

Proiectarea cu raportul WCAG îmbunătățește designul pentru toți

Standardele pentru design web provin de la World Wide Web Consortium, o comunitate care ajută la cele mai bune practici pe web. Consorțiul a dezvoltat Ghidul de accesibilitate a conținutului web, pe care designerii web ar trebui să le urmeze. Acesta oferă un standard de raport pentru verificările de vizibilitate atunci când proiectați pentru web.

Respectarea acestor linii directoare și standarde de raport înseamnă că design-urile dvs. web pot fi accesate de mai multe persoane.