Contrast și lizibilitate pe site: ghid pentru culori și fonturi

Un site poate avea un conținut excelent și totuși să fie obositor de citit: gri deschis pe alb, litere mici, rânduri foarte lungi, paragrafe fără aer. Problema nu afectează doar persoanele cu deficiențe de vedere. Citești pe telefon în soare, ai ochii obosiți la sfârșitul zilei, ai peste 50 de ani sau ai o dificultate de citire: toate aceste situații fac diferența dintre un text citit și un text abandonat.

Ghidul de mai jos explică, pe scurt și cu exemple, cum alegi culori, fonturi și spațiere astfel încât textul să fie lizibil pentru cât mai mulți oameni.

Contrast și lizibilitate: care e diferența

Contrastul este diferența de luminozitate dintre text și fundalul lui. Se măsoară cu un raport numeric.
Lizibilitatea este mai largă: cât de ușor se citește un text, ținând cont de contrast, dar și de fontul ales, mărime, spațiere, lungimea rândului, structura paragrafelor.

Poți avea contrast bun și lizibilitate slabă (de exemplu, text negru pe alb, dar cu un font foarte subțire și rânduri de 200 de caractere). Și invers: lizibilitate bună, dar contrast insuficient. Ai nevoie de ambele.

Raportul de contrast: cifrele care contează

Standardul WCAG măsoară contrastul ca un raport între 1:1 (aceeași culoare, nu se vede nimic) și 21:1 (negru pe alb). Valorile minime, la nivelul de conformitate AA, sunt:

4,5:1 pentru text normal;
3:1 pentru text mare. Textul mare este, în mod uzual, de cel puțin 18 puncte (aproximativ 24 de pixeli) sau de cel puțin 14 puncte îngroșat (aproximativ 18,5 pixeli);
3:1 pentru componentele interfeței și elementele grafice necesare înțelegerii: marginea unui câmp de formular, o pictogramă care transmite o informație, starea unui comutator.

La nivelul AAA, pragurile cresc la 7:1 pentru textul normal și 4,5:1 pentru textul mare. Pentru explicația nivelurilor și a principiilor, citește WCAG 2.2 explicat simplu.

Ce nu intră sub aceste reguli

Criteriul de contrast minim are câteva excepții: texte pur decorative, texte care fac parte dintr-o componentă dezactivată, texte din imagini care sunt doar decor și logo-uri. Dar nu te baza pe excepții: dacă un text contează pentru cititor, face-l lizibil.

Cum măsori contrastul

Află culorile exacte din CSS (valori hexazecimale precum #767676 pe #FFFFFF).
Introdu-le într-un instrument de verificare a contrastului. Există calculatoare online, extensii de browser și funcții în uneltele pentru dezvoltatori.
Compară rezultatul cu pragurile de mai sus.

Un exemplu des citat este gri mediu #767676 pe alb, care ajunge la limita de 4,5:1. Orice gri puțin mai deschis nu mai trece pentru text normal. De aceea textul „discret" de tip gri deschis este cea mai frecventă problemă de contrast pe site-uri.

Situații în care contrastul se complică

Text peste imagine. Contrastul variază în funcție de zona pozei. Soluții: strat semitransparent întunecat sub text, casetă solidă în spatele textului, plasarea textului pe o zonă uniformă.
Stări ale elementelor. Verifică și contrastul în starea de hover (mouse deasupra), focus și dezactivat, nu doar în starea normală.
Text pe gradient. Verifică în cea mai nefavorabilă zonă.
Mod întunecat. Dacă oferi temă întunecată, verifică contrastul și acolo; alb pur pe negru pur poate obosi, iar griurile intermediare își schimbă comportamentul.
Linkuri în text. Dacă linkurile se deosebesc de text doar prin culoare, între culoarea linkului și cea a textului din jur trebuie să existe un contrast suficient sau un indiciu suplimentar (subliniere). Subliniatul este cea mai sigură soluție.

Culoarea nu e singurul semnal

Mulți oameni au o formă de daltonism, deci nu te baza pe distincția roșu–verde. Orice informație transmisă prin culoare ar trebui să aibă și un al doilea semnal:

un câmp cu eroare: nu doar contur roșu, ci și o pictogramă și un mesaj text („Adresa de email nu este completă");
un grafic cu linii: nu doar culori, ci și forme sau etichete direct pe linii;
starea „în stoc" / „epuizat": cuvinte clare, nu doar puncte verzi sau roșii.

Dimensiunea fontului

Nu există o dimensiune unică corectă, dar câteva repere ajută:

Pentru textul principal, cu mult utilizate sunt valori în jur de 16 pixeli (1rem) sau mai mari. Sub acest nivel, mulți utilizatori încep să mărească pagina.
Definește fonturile în unități relative (rem, em, procente), nu în pixeli fixi, ca să respecte setările browserului. Cine și-a setat în browser un text mai mare ar trebui să vadă efectul.
Verifică ca textul să poată fi mărit la 200% fără pierdere de conținut sau funcționalitate. Cerința este descrisă în WCAG ca „redimensionarea textului".
Pentru ecrane mici, verifică și faptul că pagina se reorganizează fără derulare orizontală (reflow), chiar la o lățime echivalentă cu 320 de pixeli CSS.

Alegerea fontului

Folosește fonturi clare, cu litere distincte. Atenție la perechi ușor de confundat: I (i mare), l (L mic) și 1; O și 0; rn și m.
Evită fonturile foarte subțiri sau foarte decorative pentru paragrafele lungi. Pot fi folosite punctual la titluri mari.
Limitează numărul de fonturi: unul pentru titluri și unul pentru textul curent sunt, de obicei, suficiente.
Verifică dacă fontul acceptă diacriticele românești (ă, â, î, ș, ț). Un font care înlocuiește literele cu un alt caracter dă o impresie slabă și dăunează lizibilității.
Textul justificat (aliniat și la dreapta) poate crea goluri inegale între cuvinte, care îngreunează lectura, în special pentru persoanele cu dislexie. Alinierea la stânga este, de regulă, mai sigură.
Evită textul scris integral cu majuscule pe porțiuni lungi; reduce recunoașterea formei cuvintelor.

Spațierea textului

WCAG are un criteriu (1.4.12, nivel AA) care cere ca pagina să nu se strice dacă utilizatorul își setează propriile valori de spațiere. Valorile de referință sunt:

înălțimea liniei de cel puțin 1,5 ori dimensiunea fontului;
spațiul dintre paragrafe de cel puțin 2 ori dimensiunea fontului;
spațierea dintre litere de cel puțin 0,12 ori dimensiunea fontului;
spațierea dintre cuvinte de cel puțin 0,16 ori dimensiunea fontului.

Cerința nu înseamnă că trebuie să folosești obligatoriu aceste valori în designul de bază, ci că designul trebuie să rămână funcțional dacă utilizatorul le aplică. Pentru a testa, poți folosi o extensie de browser care aplică aceste valori și apoi verifici că textul nu se taie și nu se suprapune. În practică, aceste valori sunt și un bun punct de pornire pentru un text aerisit.

Lungimea rândului

Un rând foarte lung obosește ochiul, unul foarte scurt rupe ritmul. Un reper des folosit în tipografia web este un rând de aproximativ 50–75 de caractere pentru textul de lectură. Poți controla asta limitând lățimea containerului de text (de exemplu cu o valoare în unități ch).

Structura

Paragrafe scurte, de câteva propoziții.
Titluri și subtitluri descriptive.
Liste pentru enumerări.
Spațiu alb generos între secțiuni.
Evită blocurile mari de text italic sau îngroșat.

Dislexia și sprijinul pentru citire

Dislexia este o dificultate de învățare care afectează citirea și poate apărea în grade diferite; nu există o soluție tipografică universală, iar cercetările despre fonturile „pentru dislexie" nu au rezultate unitare. Ce se știe din practică este că unele persoane preferă anumite setări: fonturi cu litere bine diferențiate, spațiere mai mare, rânduri mai scurte, fundal ușor colorat în loc de alb pur, text aliniat la stânga.

De aceea, în loc să impui o singură soluție, are sens să oferi controale vizitatorului: buton pentru mărirea fontului, comutare între font standard și un font alternativ pentru dislexie, contrast ridicat, spațiere sporită. Alege ce funcționează pentru el. Această abordare respectă preferințele individuale și nu face ipoteze despre cine ești.

Un exemplu înainte și după

Înainte: un text gri deschis (#AAAAAA) pe fundal alb, mărime 13 px, înălțimea liniei 1,2, justificat, rânduri de aproape 120 de caractere, linkuri colorate în albastru deschis fără subliniere.

După:

text #333333 pe alb (contrast foarte bun);
mărime 17–18 px;
înălțimea liniei 1,5–1,6;
aliniere la stânga;
lățime maximă a textului de aproximativ 70 de caractere;
linkuri subliniate, într-un albastru mai închis, cu contrast de cel puțin 4,5:1;
paragrafe de 3–4 propoziții;
titluri clare.

Fără să schimbi un cuvânt din conținut, pagina devine mult mai ușor de parcurs.

Listă de verificare rapidă

Textul normal are contrast de cel puțin 4,5:1, iar cel mare de cel puțin 3:1.
Câmpurile, butoanele și pictogramele importante au cel puțin 3:1 față de fundal.
Starea de focus, hover și eroare se vede clar.
Nicio informație nu este transmisă doar prin culoare.
Fonturile sunt în unități relative; pagina funcționează la 200%.
Înălțimea liniei este confortabilă (în jur de 1,5).
Textul este aliniat la stânga, iar lățimea rândului este limitată.
Diacriticele se afișează corect.
Vizitatorul poate ajusta măcar mărimea textului și contrastul.
Ai testat paginile pe un telefon, în lumină puternică.

Pentru testarea completă cu tastatura și cititor de ecran vezi ghidul de testare.

Greșeli frecvente

Gri deschis pe alb pentru texte secundare, subtitluri sau etichete. Arată elegant pe un monitor bun, dar este greu de citit în condiții reale.
Text prea mic pe mobil, în special la notele de subsol, la prețuri și la butoane.
Contrast verificat doar pentru starea normală, nu și pentru hover, focus și dezactivat.
Text peste imagini fără strat de protecție.
Justificarea textului fără motiv.
Fonturi subțiri la dimensiuni mici.
Eliminarea conturului de focus din motive estetice.
Folosirea culorii ca singur indicator (roșu pentru erori, verde pentru succes).
Presupunerea că tema întunecată rezolvă totul. Poate crea alte probleme de contrast.

Întrebări frecvente

Ce contrast minim trebuie să am pentru text?

Pentru nivelul AA din WCAG, raportul minim este 4,5:1 pentru textul normal și 3:1 pentru textul mare. La nivelul AAA, pragurile sunt 7:1 și 4,5:1.

Textul din logo trebuie să respecte aceste valori?

Logo-urile și textele pur decorative sunt exceptate de la cerința de contrast minim. Totuși, dacă logo-ul transmite informații importante, merită să fie lizibil.

Există un font care rezolvă problema dislexiei?

Nu există un font care să ajute pe toată lumea. Unele persoane preferă fonturi special proiectate, altele altceva. Cea mai sigură cale este să oferi opțiuni de personalizare și să folosești o tipografie clară, cu spațiere confortabilă.

Cum verific contrastul pentru text pe imagini?

Verifică în zona cea mai nefavorabilă a imaginii. Dacă variația este mare, adaugă un strat de culoare semitransparent sau o casetă în spatele textului și măsoară contrastul față de culoarea rezultată.

Cum te ajută Leono Accessibility

Leono Accessibility oferă vizitatorilor site-ului controale pentru contrast ridicat, font mărit și font pentru dislexie, astfel încât fiecare să își poată adapta citirea. Detalii găsești pe pagina contrast și lizibilitate. Pentru bazele despre imagini, vezi și ghidul despre text alternativ.

Concluzie

Lizibilitatea nu este o chestiune de gust, ci un set de alegeri măsurabile: contrast de cel puțin 4,5:1 pentru textul normal și 3:1 pentru cel mare, fonturi relative, spațiere generoasă, rânduri de lungime rezonabilă și informații care nu depind doar de culoare. Începe cu textele cele mai importante, verifică-le cu un instrument de contrast, apoi extinde. Dacă oferi și controale prin care vizitatorul își ajustează singur citirea, ai făcut un pas mare spre un site pe care mai mulți oameni îl pot citi fără efort.

#contrast#lizibilitate#fonturi#dislexie