Contrast insuficient între text și fundal este una dintre problemele care apare cel mai frecvent în scanurile de accesibilitate și, în același timp, una dintre greșelile cel mai ușor de evitat. Problema apare atunci când textul gri deschis se află pe un fundal alb, atunci când butoanele sunt vizibile doar printr-o schimbare subtilă de culoare, sau atunci când textul substituibil într-un câmp de formular servește drept singura indicație pentru ceea ce trebuie completat. Pentru persoanele cu o deficiență vizuală, dar și pentru oricine folosește un ecran la lumina soarelui strălucitoare, textul devine literalmente ilizibil.
WCAG 2.1, norma la care se referă EN 301 549, prevede pentru nivelul AA un raport de contrast minim între text și fundalul pe care se află: de obicei 4,5 la 1 pentru textul obișnuit și 3 la 1 pentru textul mare și pentru elemente controlabile, cum ar fi butoanele și marginile formularelor. Sună tehnic, dar gândul din spate este simplu: contrastul nu este o alegere estetică, este o condiție pentru transmiterea informațiilor.
Unde merge prost în practică
Problemele de contrast apar rar intenționat. Se strecuară prin alegeri de identitate vizuală care arată bine pe un ecran mare și ascuțit într-un studio de design, dar pe un ecran mediu la un utilizator mediu se situează chiar sub normă. Textul unui buton gri deschis pe un fundal de culoare pastel este un exemplu clasic. Același lucru se aplică legăturilor care sunt recunoscute doar printr-o diferență de culoare, fără subliniере sau alt semnal vizual, ceea ce face ca persoanele cu daltonism să nu le perceapă pur și simplu ca fiind clickabile.
Un alt model recurent este starea hover: un buton care în repaus se conformează perfect, dar la mișcarea mouse-ului se schimbă în o combinație de culori care nu a fost testată. De asemenea, mesajele de eroare în formulare sunt o greșeală frecventă: textul roșu pe un fundal roșu deschis arată consecvent cu identitatea vizuală, dar adesea nu atinge raportul necesar. Cine este curios cum arată acest tip de probleme în propria sa mediu, poate într-câteva întrebări să vadă unde se află site-ul dvs. fără a trebui să creeze mai întâi un cont pentru asta.
De ce o scanare automată rezolvă aceasta parțial, dar nu în totalitate
Rapoartele de contrast pot fi măsurate bine automat: un scanner citește valorile de culoare ale textului și fundalului și calculează raportul. Cu asta, acesta este unul dintre puținele criterii WCAG pe care un instrument le poate testa în mod fiabil. Ceea ce o scanare nu vede este contrastul care apare doar după o interacție, cum ar fi un meniu derulant, un sfat care apare la focalizare, sau un status care devine vizibil doar după o acțiune a utilizatorului. Acesta este exact motivul pentru care fiecare raport menționează ce parte a fost testată automat și ce parte necesită o evaluare manuală; contrastul este un punct forte al testării automate, dar nu întreaga imagine.
Cum o preveniti structural
Cel mai frecvent mod de a preveni permanent această problemă este stabilirea contrastului la nivelul sistemului de design, mai degrabă decât pe fiecare pagină. Atunci când culorile de bază ale unei identități vizuale sunt deja testate la conformitate cu norma în momentul stabilirii acesteia, un editor sau dezvoltator nu trebuie să verific asta de fiecare dată. Aceasta previne, de asemenea, ca o pagină nouă, o banner de acțiune temporară sau un widget cumpărat din exterior să nu compromită raportul de contrast fără să fie observat.
Este util, de asemenea, să includeți contrastul în mod explicit în fiecare modificare vizuală a site-ului, nu doar la lansarea inițială. O reîmprospătare a identității vizuale, o nouă temă sezonală sau un stil de buton modificat poate introduce o problemă care nu exista în versiunea anterioară. Accesibilitatea nu este în acest sens o casetă pe care o bifați o singură dată, ci un aspect care merge alături de întreținere. Cititi mai multe despre cum funcționează în practică o astfel de verificare continuă în o explicație a locului de unde provine evaluarea.
În final, merită să vă uitați nu doar la norma minimă, ci la intenția din spatele ei: poate toți, chiar și în condiții de lumină mai puțin ideale sau pe un ecran mai vechi, să distingă efectiv textul și butoanele. Cazurile frecvente de îndoieli, cum ar fi dacă un logo sau o imagine decorativă trebuie, de asemenea, să respecte cerința de contrast, sunt explicate pe pagina cu răspunsuri la întrebări care se repetă mai des.
Vreți să știți dacă contrastul și celelalte probleme recurente se manifestă și în mediul dvs. propriu? Scanarea rapidă gratuită oferă o primă indicație în acest sens, iar banca de cunoștințe cu subiecte selectate pentru fiecare situație arată cum această problemă se conectează la restul obligațiilor din directiva europeană privind accesibilitatea.