Utilizarea contrastului de înaltă calitate pentru un design mai accesibil
O rată ridicată de respingere este adesea cauzată de accesibilitatea vizuală slabă a unui site Web. Când fonturile sunt prea mici, sau sunt greu lizibile, atunci când există prea multe distragere a atenției sau spațiu liber suficient, mulți oameni doar părăsiți site-ul fără un al doilea gând.
Unul dintre motivele cele mai frecvente pentru abandonul timpuriu este cel slab selectat culori care scad lizibilitatea a conținutului.
Potrivit statisticilor OMS, există aproximativ 285 de milioane de persoane cu deficiențe de vedere din întreaga lume, dintre care multe sunt parțial sau complet colorate orb. Persoanele cu handicap vizual văd culori în mod diferit, deci evitând contrastul redus al culorilor în desenele noastre este inevitabilă dacă dorim să oferim clienților noștri un site accesibil și ușor de utilizat.
Standardele web pentru contrastul de culoare
Contrast de culoare măsoară diferența de contrast dintre două culori. Cu cât este mai mare valoarea, cu atât este mai ușor să distingi obiectul (text, imagine, grafic) în prim plan de fundal.
Culorile pot contrasta în multe moduri diferite, cum ar fi: nuanţă, valoare și saturare. Raportul de contrast color este calculat printr-o formulă furnizată de W3C, principala organizație internațională de standarde pentru World Wide Web.
Poate avea o valoare intre 1: 1 (nici un contrast, fundalul și fundalul au aceeași culoare) și 21: 1 (contrastul maxim care există doar între alb și negru).
Cele mai recente recomandări privind accesibilitatea conținutului Web (WCAG) al W3C (WCAG) 2.0 furnizează dezvoltatorilor web și creatorilor de conținut standarde de referință pentru valoarea minimă (nivelul AA) și valoarea îmbunătățită (nivelul AAA).
Nivelul AA necesită cel puțin Raportul 4.5: 1 pentru textul obișnuit, și 3: 1 pentru textul mare. Este mult mai ușor să citești textul mare ca subtitrările, de aceea este nevoie de un contrast de culoare mai scăzut.
Dacă doriți să atingeți Nivelul AAA, care este nivelul îmbunătățit, trebuie să proiectați schema de culori cu o mai mare grijă, deoarece aceasta necesită cel puțin Raport de contrast de 7: 1 pentru textul normal, și 4.5: 1 pentru mari. Dacă un text face parte dintr-un logo sau dintr-un nume de marcă, nu există cerințe minime de contrast de culoare la nivelul fiecărui nivel WCAG.
Putem apela doar un site vizibil accesibil dacă raportul de contrast de culoare între fiecare obiect din prim plan și fundalul său atinge cel puțin nivelul AA.
Beneficii ale raportului de contrast ridicat
Prin asigurarea unei mai bune lizibilități, nu numai că implicați utilizatori cu deficiențe de vedere, ci și persoanele care vă citesc conținutul pe ecrane mici cum ar fi pe un smartphone sau un smartwatch, printre condiții de iluminare nepotrivite, și pe monitori de calitate inferioară.
Oamenii citesc mai repede si atunci cand exista un contrast mai mare intre text si fundal, asa ca cel mai probabil va dura mai mult timp pentru a se plictisi de continutul site-ului.
Dacă vă faceți griji că aplicarea unui raport de contrast mai ridicat va avea un impact negativ asupra esteticii designului dvs., trebuie să verificați proiectul de web Contrast Rebellion, care dovedește, cu exemple din viața reală, că respectarea regulilor privind contrastul ridicat poate rezulta în modele atractive și reci.
Aplicații pentru verificarea contrastului color
Există multe instrumente gratuite excelente pe tot globul, care îi pot ajuta pe designeri să verifice raportul de contrast al culorilor site-ului lor.
Cea mai ușoară modalitate de testare a designului pentru contrastul color este alegerea culorilor principale fie cu Photoshop, fie cu o extensie adecvată a browserului ca aceasta pentru Firefox, și copiați valorile într-una din aplicațiile de mai jos.
Cel mai important lucru pe care trebuie să-l amintiți este că întotdeauna aveți nevoie comparați culoarea primului text, cum ar fi culoarea textului în zona înconjurătoare (culoarea de fundal).
1. Verificatorul contrastului color WebAim
WebAim (Web Accessibility In Mind) este o organizație care promovează accesibilitatea web care oferă dezvoltatorilor un simplu, dar sigur, control al contrastului color printre multe alte instrumente de accesibilitate excelente, cum ar fi Wave, o aplicație generală de evaluare a accesibilității care vă poate ajuta evaluați rapid problemele de accesibilitate ale site-ului dvs..
WebAim's Color Contrast Checker vă spune dacă culorile tale depășesc testele WCAG AA și AAA, atât pentru texte normale, cât și pentru texte mari.
2. Verificarea contrastului culorii Snook
Jonathan Snook, care lucreaza in prezent ca dezvoltator de front-end la Shopify, si-a gazduit instrumentul de control al contrastului color de peste un deceniu. Aplicația Snook vă permite să faceți modificați valorile HSL și RGB a culorii primare și a fundalului, folosind unul câte unul glisoare convenabile până când ajungeți la un rezultat care este compatibil cu referențialul WCAG 2.0.
CheckMyColours
CheckMyColours creat de Giovanni Scala vă permite să verificați raportul de contrast de culoare al tuturor combinațiilor culorilor primare pe un site web live.
Calculează raportul de contrast luminozitate, diferența de luminozitate, și diferența de culoare, și vă oferă un raport complet despre rezultate. Raportul CheckMyColours poate facilita semnificativ înțelegerea modului în care puteți îmbunătăți accesibilitatea vizuală a site-ului dvs..
Schemă de culori
Schema de culori Designer nu este în mod special un checker de contrast de culoare, ci un instrument pentru proiectarea schemelor complete de culori.
Am inclus în această colecție, deoarece are o funcție care vă permite să vedeți cum este percepută schema de culori de către persoanele cu diferite tipuri de dizabilități vizuale. Puteți să vă testați culorile pentru orbire plină, protanopie, deuteranopie și multe alte afecțiuni vizuale. Aplicația are o versiune mai nouă, numită Paletton, care face posibilă și o simulare mai complexă a viziunii (puteți încerca, de asemenea, pentru lucruri cum ar fi afișajul LCD prost sau afișajul CRT slab).
W3C vă oferă, de asemenea, o listă uriașă de instrumente de evaluare a accesibilității pe web, unde puteți găsi multe alte instrumente de contrast color, cum ar fi această accesibilă culoare de accesibilitate.
Sfaturi pentru crearea site-urilor accesibile vizual
Dacă doriți să creați un site accesibil vizual, este întotdeauna o idee bună evitați utilizarea culorii numai pentru a transmite funcționalitate sau semnificație. Icoanele care își schimbă culoarea pe baza stării lor actuale sunt exemple tipice pentru acest lucru.
Dacă este posibil, mereu proiectarea indiciilor vizuale suplimentare care ajută persoanele care văd culori în mod diferit în înțelegerea funcționalității.
Nu uita niciodată acordați o atenție deosebită contrastului de culoare al butoanelor, legăturilor și meniurilor, deoarece acestea sunt mijloacele de navigare pe site-ul dvs. Dacă utilizatorii nu pot naviga cu ușurință pe site-ul dvs., le veți pierde rapid. Culori accesibile pentru butoanele de chemare la acțiune sunt deasemenea crucial pentru rate de conversie bune.
Este o practică bună de lucru pentru a testa raportul de contrast de culoare cât mai curând posibil în procesul de proiectare, deoarece va fi greu să convingi clientul să schimbe schema de culori a site-ului mai târziu în jos procesul de proiectare.
Acum citiți: Abordarea practică la alegerea schemei de colorare a site-ului web
