Accesibilitate web
Contrastul insuficient și textul prea mic nu sunt detalii estetice minore — sunt bariere reale pentru o proporție semnificativă din vizitatorii oricărui site. Articolul explică, practic, ce verifici concret și cum repari, fără jargon tehnic.
Vali Neagu
Fondator & Design Lead · FirmaWeb
26 iulie 2026 · 12 min citire
Am scris anterior despre principiile generale WCAG pentru firme — cele patru piloni (perceptibil, operabil, ușor de înțeles, robust) care definesc, la nivel larg, ce înseamnă accesibilitate web. Acest articol nu repetă acele principii, ci intră direct în categoria de utilizatori cu cel mai mare impact practic pe site-urile de firmă: cei cu deficiențe de vedere, temporare sau permanente.
Deficiențele de vedere nu se limitează la orbire completă — categoria include vedere slabă, daltonism, și sensibilitate crescută la contrast redus în condiții de lumină puternică, o situație în care se află, la un moment dat, aproape orice utilizator de telefon în exterior. Regulile de mai jos sunt aplicabile direct, cu cifre concrete, nu principii abstracte.
Cine e afectat
Acuitate vizuală redusă, care nu se corectează complet cu ochelari — cea mai frecventă categorie, inclusiv la utilizatori vârstnici. Are nevoie de text suficient de mare și contrast puternic, fără să depindă de zoom activat manual.
Afectează în principal distincția roșu-verde. Orice informație codificată exclusiv prin culoare (eroare roșie, succes verde, fără text sau simbol adițional) devine invizibilă sau confuză pentru acești utilizatori.
Nu e o dizabilitate permanentă, dar afectează practic pe orice utilizator la un moment dat — lumină puternică de soare pe ecranul telefonului reduce drastic contrastul perceput al unui text deja la limita minimă.
Nu percep deloc conținutul vizual — depind integral de structura semantică a paginii (titluri, etichete, text alternativ) și de navigarea cu tastatura pentru a interacționa cu site-ul.
Mărime și lizibilitate
Navigare cu tastatura
Un focus state e conturul (sau altă marcare vizuală clară) care apare în jurul elementului activ curent când navighezi cu tasta Tab, în locul mouse-ului. Pentru un utilizator cu vedere slabă care navighează cu tastatura, sau folosește zoom mare care face imposibilă urmărirea cursorului obișnuit, focus state-ul e singurul reper vizual disponibil pentru a știi unde se află pe pagină în orice moment.
Cea mai frecventă greșeală: eliminarea completă a conturului implicit al browserului (`outline: none` în CSS) din motive estetice, fără un stil de înlocuire. Rezultatul e o pagină în care navigarea cu tastatura devine, practic, imposibil de urmărit vizual — utilizatorul apasă Tab, dar nu vede niciodată unde a ajuns. Soluția corectă nu e păstrarea conturului implicit urât, ci înlocuirea lui cu un stil personalizat, vizibil, cu contrast suficient față de fundal.
Daltonismul afectează o proporție semnificativă a populației masculine (mult mai rar la femei) și, în forma cea mai frecventă, reduce capacitatea de a distinge clar între roșu și verde — exact cele două culori folosite convențional pentru eroare și succes în interfețe web. Un formular care marchează un câmp greșit doar prin conturul roșu, fără text explicit de eroare, e invizibil ca semnal pentru acești utilizatori — văd o schimbare vagă de nuanță, nu un mesaj clar de „ceva nu e corect aici”.
Soluția practică e simplă și nu costă nimic vizual: dublează întotdeauna culoarea cu un al doilea semnal — text explicit („Adresa de email nu e validă”), o iconiță distinctă (nu doar o schimbare de culoare a aceleiași iconițe) sau un tipar vizual diferit (contur punctat vs. plin). Regula se aplică la fel de bine pentru grafice, statusuri de comandă sau orice altă informație codificată vizual prin culoare.
Poți verifica rapid, gratuit, cum arată o pagină pentru un utilizator daltonist folosind simulatoare de daltonism disponibile ca extensii de browser sau direct în unele instrumente de design (Figma include un mod de simulare a deficiențelor de culoare). Câteva minute de verificare pe paginile cheie ale site-ului (formular de contact, pagina de prețuri, orice element cu status colorat) prind rapid problemele reale.
Testare rapidă
Primul test: rulează un verificator gratuit de contrast (Chrome DevTools include unul direct în inspectorul de culoare) pe titlurile și textul principal al paginilor cheie — homepage, servicii, contact. Al doilea test: mărește zoom-ul browserului la 200% și verifică dacă tot conținutul rămâne vizibil și funcțional, fără text tăiat sau elemente suprapuse. Al treilea test: navighează site-ul exclusiv cu tasta Tab și verifică dacă poți identifica, în orice moment, exact unde te afli.
Aceste trei teste prind majoritatea problemelor practice descrise mai sus, fără să fie nevoie de un audit complex sau de un specialist dedicat — orice persoană din firmă le poate rula în câteva minute, pe orice pagină nouă înainte de publicare.
Dacă site-ul actual are deja multe pagini și un audit complet pare descurajant ca prim pas, prioritizează paginile cu cel mai mare trafic și cel mai mare impact asupra deciziei unui vizitator: homepage-ul, pagina de servicii sau prețuri, și formularul de contact. Aceste trei tipuri de pagini concentrează, de regulă, marea majoritate a interacțiunilor reale — o corecție aplicată aici are un efect disproporționat de mare comparativ cu timpul investit, față de pagini rar vizitate din site.
Formularul de contact merită o atenție specială, pentru că e frecvent punctul exact unde un vizitator cu deficiențe de vedere abandonează — etichete neclare, mesaje de eroare codificate doar prin culoare și câmpuri mici, dificil de citit, transformă un pas simplu într-o barieră reală, chiar în momentul în care vizitatorul era pregătit să convertească.
Același risc e și mai mare pentru formularele de donație de pe site-urile pentru ONG-uri — un donator cu deficiențe de vedere care abandonează un formular neclar înseamnă o donație pierdută, nu doar o vizită fără conversie.
Citește în continuare
Vezi și pagina principală FirmaWeb sau toate articolele din blog.
Principiile generale de accesibilitate web, complementare ghidului de mai sus pe deficiențe de vedere.
Alegerea fonturilor influențează direct lizibilitatea pentru utilizatori cu vedere slabă, nu doar personalitatea vizuală a brandului.
Întrebări frecvente
Articolul general despre WCAG explică cele patru principii de bază ale accesibilității web (perceptibil, operabil, ușor de înțeles, robust), aplicabile la orice tip de dizabilitate. Acest articol se concentrează exclusiv pe deficiențele de vedere — contrast, dimensiune de text și focus states — cu reguli și cifre concrete de aplicat, nu principii generale.
4.5:1 între culoarea textului și fundal, conform standardului WCAG AA — pragul recomandat ca minim pentru orice site de firmă. Pentru text mare (peste 24px) sau bold peste 19px, pragul minim acceptat scade la 3:1.
Pentru că daltonismul afectează în principal distincția roșu-verde, cele mai frecvente culori folosite pentru eroare/succes. Un câmp marcat doar cu margine roșie, fără text de eroare explicit sau o iconiță, e imposibil de distins pentru acești utilizatori.
Focus state e indicatorul vizual (de regulă un contur) care arată ce element e activ curent când navighezi cu tastatura, nu cu mouse-ul. Fără un focus vizibil și suficient de contrastant, un utilizator cu vedere slabă care navighează cu tastatura sau folosește zoom nu poate urmări unde se află pe pagină.
Nu, e una dintre cele mai frecvente și mai dăunătoare greșeli de accesibilitate. Dacă un contur implicit nu se încadrează estetic, soluția corectă e să-l înlocuiești cu un stil de focus personalizat, vizibil, nu să-l elimini complet.
Trei teste simple, fără instrumente specializate: rulează un scanner gratuit de contrast pe paginile principale, mărește zoom-ul browserului la 200% și verifică dacă layout-ul rămâne funcțional, și navighează exclusiv cu tasta Tab, verificând dacă vezi clar unde te afli tot timpul.
Nu, dacă sunt integrate din start. Multe branduri percepute ca „premium” folosesc deja contrast puternic și tipografie clară ca semnătură vizuală — accesibilitatea și un design vizual atractiv nu sunt obiective concurente, sunt complementare.