O rată de respingere ridicată este adesea cauzată de accesibilitatea vizuală slabă a unui site web . Când fonturile sunt prea mici sau sunt greu lizibile, când există prea multe distrageri sau nu sunt suficiente spații albe, mulți oameni părăsesc site-ul fără să se gândească .

Unul dintre cele mai frecvente motive pentru abandonarea timpurie este schemele de culori prost selectate care scad lizibilitatea conținutului.

Conform statisticilor OMS , există aproximativ 285 de milioane de persoane cu deficiențe de vedere în întreaga lume, dintre care mulți sunt parțial sau total dalton.

Persoanele cu dizabilități vizuale văd culorile diferit, așa că evitarea contrastului scăzut al culorilor în modelele noastre este inevitabil dacă dorim să oferim clienților noștri un site web accesibil și ușor de utilizat.

Standarde web pentru contrastul culorilor

Raportul de contrast al culorii măsoară diferența de contrast dintre două culori. Cu cât valoarea este mai mare, cu atât este mai ușor să distingeți obiectul (text, imagine, grafic) din prim-plan de fundal.

Culorile pot contrasta în multe moduri diferite, cum ar fi nuanța , valoarea și saturația. Raportul de contrast al culorilor este calculat printr-o formulă furnizată de W3C, principala organizație internațională de standardizare pentru World Wide Web.

Poate lua o valoare între 1:1 ( nici un contrast , primul plan și fundalul au aceeași culoare) și 21:1 ( contrastul maxim care există doar între alb și negru).

Cele mai recente Ghiduri de accesibilitate a conținutului web ( WCAG ) 2.0 ale W3C oferă dezvoltatorilor web și creatorilor de conținut valori de referință pentru valoarea minimă (Nivel AA) și îmbunătățită (Nivel AAA) a raportului de contrast de culoare acceptabil.

Nivelul AA necesită cel puțin un raport de 4,5:1 pentru text obișnuit și 3:1 pentru text mare . Este mult mai ușor să citești text mare precum subtitrări, de aceea are nevoie de un contrast de culoare mai mic.

Dacă doriți să atingeți nivelul AAA, care este nivelul îmbunătățit, trebuie să vă proiectați schema de culori cu mai multă grijă, deoarece necesită un raport de contrast de cel puțin 7:1 pentru textul normal și 4,5:1 pentru mare . Dacă un text face parte dintr-un logo sau dintr-un nume de marcă, nu există nicio cerință minimă de contrast de culoare la niciun nivel WCAG.

Putem numi un site web accesibil doar dacă raportul de contrast de culoare dintre fiecare obiect din prim-plan și fundalul său atinge cel puțin nivelul AA.

Beneficiile raportului ridicat de contrast al culorilor

Asigurând o mai bună lizibilitate, nu implicați doar utilizatorii 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, în condiții de iluminare proastă și pe monitoare de calitate inferioară .

De asemenea, oamenii citesc mai repede atunci când există un contrast mai mare între text și fundal, așa că, cel mai probabil, le va dura mai mult timp să se plictisească de conținutul site-ului.

Dacă vă faceți griji că aplicarea unui raport de contrast mai mare va avea un impact negativ asupra esteticii designului dvs., trebuie să verificați proiectul web Contrast Rebellion care demonstrează, cu exemple din viața reală, că respectarea regulilor privind raportul de contrast ridicat poate rezulta în continuare. în modele atractive și cool.

Aplicații pentru verificarea contrastului culorilor

Există multe instrumente gratuite pe tot internetul care îi pot ajuta pe designeri să verifice raportul de contrast al culorilor site-ului lor.

Cea mai ușoară modalitate de a vă testa designul pentru contrastul culorilor este să alegeți culorile principale fie cu Photoshop, fie cu o extensie de browser adecvată ca aceasta pentru Firefox și să copiați valorile într-una dintre aplicațiile de mai jos.

Cel mai important lucru de reținut este că trebuie întotdeauna să comparați culoarea primului plan, cum ar fi culoarea textului, cu zona înconjurătoare (culoarea fundalului).

1. WebAim Color Contrast Checker

WebAim (Web Accessibility In Mind) este o organizație care promovează accesibilitatea web, care oferă dezvoltatorilor un verificator de contrast de culoare simplu, dar de încredere, printre multe alte instrumente excelente de accesibilitate, cum ar fi Wave , o aplicație generală de evaluare a accesibilității care vă poate ajuta să evaluați rapid problemele de accesibilitate ale site-ului dvs. .

Color Contrast Checker de la WebAim vă spune dacă culorile dvs. trec testele WCAG AA și AAA , atât pentru texte normale, cât și pentru texte mari.

2. Snook Color Contrast Check

Jonathan Snook, care lucrează în prezent ca dezvoltator front-end principal la Shopify, găzduiește instrumentul său la îndemână de verificare a contrastului de culoare de peste un deceniu. Aplicația lui Snook vă permite să modificați valorile HSL și RGB ale culorii primului plan și ale fundalului una câte una, utilizând glisoare convenabile pentru interval, până când ajungeți la un rezultat care este compatibil cu standardele WCAG 2.0.

VerificațiMyColours

CheckMyColours creat de Giovanni Scala vă permite să verificați raportul de contrast al tuturor combinațiilor de culori din prim-plan-fond pe un site web live .

Acesta calculează raportul de contrast de luminozitate, diferența de luminozitate și diferența de culoare și vă oferă un raport complet despre rezultate. Raportul CheckMyColours vă poate facilita în mod semnificativ înțelegerea modului în care puteți îmbunătăți accesibilitatea vizuală a site-ului dvs.

Designer de scheme de culori

Color Scheme Designer nu este în mod special un verificator de contrast de culoare, ci un instrument pentru proiectarea schemelor complete de culori .

Îl includem în această colecție, deoarece are o caracteristică care îți permite să vezi cum este percepută schema ta de culori de către persoanele cu diferite tipuri de dizabilități vizuale.

Vă puteți testa culorile pentru daltonism, protanopie, deuteranopie și multe alte deficiențe de vedere. Aplicația are o versiune mai nouă, numită Paletton , care face posibilă și o simulare a vederii mai sofisticată (puteți testa și lucruri precum afișaj LED prost sau afișaj CRT slab).

W3C vă oferă, de asemenea, o listă uriașă de instrumente de evaluare a accesibilității web , unde puteți găsi multe alte instrumente de contrast de culoare, cum ar fi această roată utilă pentru accesibilitate .

Sfaturi pentru crearea de site-uri web accesibile vizual

Dacă doriți să creați un site web accesibil vizual , este întotdeauna o idee bună să evitați să folosiți doar culoarea pentru a transmite funcționalitate sau sens . Pictogramele care își schimbă culoarea în funcție de starea lor actuală sunt exemple tipice pentru aceasta.

Dacă este posibil, proiectați întotdeauna indicații vizuale suplimentare care să ajute oamenii care văd culorile diferit în înțelegerea funcționalității.

Nu uitați niciodată să acordați o atenție sporită contrastului de culoare al butoanelor, linkurilor și meniurilor , deoarece acestea sunt mijloacele de navigare pe site-ul dvs. Dacă utilizatorii nu pot naviga cu ușurință pe site-ul dvs., îi veți pierde rapid. Culorile accesibile pentru butoanele de îndemn sunt, de asemenea, cruciale pentru rate de conversie bune .

Este o practică bună pentru fluxul de lucru să testați raportul de contrast de culoare cât mai devreme posibil în procesul de proiectare, deoarece va fi greu să vă convingeți clientul să schimbe schema de culori a site-ului mai târziu în procesul de proiectare.

AllmaDesign vă oferă servicii profesionale de web design la prețuri avantajoase, creare site-uri prezentare pentru companii mici și mijlocii, creare magazine online și cataloage de produse, precum și alte servicii conexe: întreținere și administrare site-uri web, optimizare SEO și promovare online, design grafic și identitate companie, găzduire web și înregistrare nume de domenii.