Un ghid pentru accesibilitatea culorilor în designul produsului

Se vorbește mult despre designul accesibil, dar te-ai gândit vreodată la accesibilitatea culorilor?

Recent, un client a adus un proiect cu implementări complexe foarte specifice ale unui sistem de culori accesibil. Acest lucru mi-a deschis ochii nu numai cât de important este acest subiect, ci și cât de mult există de învățat.

Această poveste este de Justin Reyna

Să învățăm cum să facem culoare accesibilă folosind principiile de design pe care le cunoașteți deja.

De ce este atât de importantă accesibilitatea?

Accesibilitatea în proiectarea digitală a produsului este practicarea experiențelor de elaborare a tuturor oamenilor, inclusiv a celor cu dizabilități vizuale, vorbitoare, auditive, fizice sau cognitive. În calitate de designeri, dezvoltatori și oameni de tehnologie generală, avem puterea de a crea un web de care suntem cu toții mândri: un web inclusiv creat și consumabil de toți oamenii.

De asemenea, a nu crea produse accesibile este doar nepoliticos, deci nu fi nepoliticos.

Accesibilitatea culorilor permite persoanelor cu deficiențe de vedere sau deficiențe de vedere a culorilor să interacționeze cu experiențe digitale în același mod ca omologii lor care nu au deficiențe de vedere. În 2017, Organizația Mondială a Sănătății a estimat că aproximativ 217 de milioane de persoane trăiesc cu o formă de deficiență de vedere moderată până la severă. Numai această statistică este suficientă pentru a proiecta accesibilitatea.

„A nu crea produse accesibile este doar nepoliticos, deci nu fi nepoliticos.”

În afară de faptul că accesibilitatea este o bună practică etică, există, de asemenea, potențiale implicații legale pentru nerespectarea cerințelor de reglementare în jurul accesibilității. În 2017, reclamanții au depus cel puțin 814 procese federale cu privire la site-urile web presupuse inaccesibile, inclusiv o serie de acțiuni de clasă. Diverse organizații au căutat să stabilească standarde de accesibilitate, în special Consiliul de acces al Statelor Unite (Secțiunea 508) și World Wide Web Consortium (W3C). Iată o prezentare generală a acestor standarde:

  • Secțiunea 508: 508 respectă secțiunea 508 din Legea reabilitării din 1973. Puteți citi ordonanța în profunzime aici, dar pentru a rezuma, secțiunea 508 necesită ca site-ul dvs. să fie accesibil dacă sunteți o agenție federală sau creați site-uri pe în numele unei agenții federale (cum ar fi contractanții).
  • W3C: World Wide Web Consortium (W3C) este o comunitate internațională voluntară care a fost înființată în 1994 și dezvoltă standarde deschise pentru web. W3C își prezintă liniile directoare pentru accesibilitatea web în cadrul WCAG 2.1, care este esențial standardul de aur pentru cele mai bune practici în materie de accesibilitate web.

Asigurarea că produsul dvs. este accesibil la culoare

Contabilizarea accesibilității din ciclul de viață al unui produs este cel mai bun - reduce timpul și banii pe care îi veți cheltui pentru ca produsele dvs. să fie accesibile retroactiv. Accesibilitatea culorilor necesită un pic de lucru în față atunci când selectați paleta de culori a produsului dvs., dar asigurarea accesibilității culorilor dvs. va plăti dividende pe drum.

Iată câteva sfaturi rapide pentru a vă asigura că creați produse accesibile culorilor.

Adăugați suficient contrast

Pentru a atinge calificativul AA minim W3C, raportul de contrast fundal-text ar trebui să fie de cel puțin 4,5: 1. Deci, atunci când proiectați lucruri precum butoane, carduri sau elemente de navigare, asigurați-vă că verificați raportul de contrast al combinațiilor de culori.

Există o mulțime de instrumente care vă ajută să testați accesibilitatea combinațiilor de culori, dar cele pe care le-am considerat cel mai util sunt Colorable și Colorsafe. Îmi place Colorable pentru că are glisiere care vă permit să reglați nuanța, saturația și luminozitatea în timp real pentru a vedea cum afectează gradul de accesibilitate al unei anumite combinații de culori.

Nu vă bazați doar pe culoare

De asemenea, puteți asigura accesibilitatea asigurându-vă că nu vă bazați pe culoare pentru a transmite informații cruciale despre sistem. Așadar, pentru lucruri precum stările de eroare, stările de succes sau avertismente de sistem, asigurați-vă că includeți mesagerie sau iconografie care sună clar ce se întâmplă.

De asemenea, atunci când afișează lucruri precum grafice sau diagrame, oferirea utilizatorilor opțiunea de a adăuga textură sau modele asigură că cei care sunt nevăzători pot face distincția între ei, fără a fi nevoie să se îngrijoreze că culoarea le afectează percepția asupra datelor. Trello face o treabă excelentă în acest mod cu modul lor Colorblind-Friendly.

Contraste starea focalizării

Stările Focus ajută oamenii să navigheze pe site-ul dvs. cu o tastatură, oferindu-le un indicator vizual în jurul elementelor. Sunt utile pentru persoanele cu deficiențe de vedere, pentru persoanele cu dizabilități motorii și pentru persoanele care doresc doar să navigheze cu o tastatură.

Toate browserele au o culoare implicită a stării de focalizare, dar dacă intenționați să treceți peste acest produs, este esențial să vă asigurați un contrast de culoare suficient. Acest lucru asigură că cei cu deficiențe de vedere sau deficiențe de culoare pot naviga cu stări de focalizare.

Documentați și socializați sistemul de culori

În cele din urmă, cel mai important aspect al creării unui sistem de culori accesibil este acela de a oferi echipei tale posibilitatea de a-l referi atunci când este nevoie, astfel încât toată lumea are claritatea utilizării corespunzătoare. Acest lucru nu numai că reduce confuzia și putrezirea, dar, de asemenea, asigură că accesibilitatea este întotdeauna o prioritate pentru echipa ta. În experiența mea, apelul explicit la calificarea de accesibilitate a unei combinații de culori specifice dintr-un UI Kit sau un sistem de design este cel mai eficient, în special atunci când socializezi în întreaga echipă cu un instrument (cum ar fi InVision Craft sau InVision DSM). Iată un exemplu despre cum să documentați fundalul combinațiilor de culori text și ratingul de accesibilitate al fiecărei combinații.

Să fim accesibili

Acestea sunt doar câteva sfaturi pentru a vă face produsul mai accesibil, dar rețineți, acestea se referă doar la accesibilitatea culorilor. Pentru a înțelege în detaliu liniile directoare de accesibilitate, vă recomand să vă familiarizați cu WCAG 2.1. Cu toate că aceste orientări pot fi un pic descurajante, există o mulțime de resurse pentru a vă ajuta pe parcurs, iar atunci când aveți îndoieli, nu ezitați să vă adresați designerilor din zona dvs. (sau prin internet) pentru ajutor.

Ți-a plăcut această postare? Citiți mai multe pe like pe Inside Design, un nou blog de InVision.

Publicat inițial pe invisionapp.com.