Daltonismul și designul web: ce trebuie să știi

Mai frecvent decât își dau seama majoritatea designerilor

Deficiența de vedere a culorilor — numită în mod obișnuit daltonism — afectează aproximativ 8% dintre bărbați și 0,5% dintre femei. Asta înseamnă aproximativ 1 din 12 bărbați și 1 din 200 de femei, făcând-o mai răspândită decât majoritatea celorlalte dizabilități pe care le abordează standardele de accesibilitate web.

Totuși, este ignorată în mod curent în design. Echipele testează cu cititoare de ecran și navigare cu tastatura, rulează o scanare WCAG automată și consideră munca de accesibilitate încheiată — fără să verifice vreodată dacă paleta lor de culori este lizibilă pentru utilizatorii daltonici.

Înțelegerea daltonismului și a ceea ce face de fapt interfețelor web pe care le proiectezi este primul pas către remedierea lui.

Tipurile și ce fac ele

Deficiența de vedere a culorilor se prezintă în mai multe forme, iar acestea nu produc toate aceeași experiență.

Deficiențe roșu-verde (cele mai frecvente)

Protanopia — absența completă a fotoreceptorilor conici roșii. Roșul apare închis sau negru. Distincțiile roșu-verde se pierd.

Protanomalia — sensibilitate redusă la roșu. Roșul, portocaliul și galbenul se deplasează spre verde, iar experiența generală este mai ștearsă, ca și cum canalul roșu ar fi fost diminuat.

Deuteranopia — absența completă a receptorilor conici verzi. Cea mai frecventă formă de daltonism. Verdele și roșul sunt confundate; lumea arată ca și cum ar fi filtrată printr-o lentilă galben-maronie.

Deuteranomalia — sensibilitate redusă la verde. Similară cu deuteranopia, dar mai ușoară. Cel mai răspândit tip în general, afectând aproximativ 5% dintre bărbați.

Deficiențe albastru-galben (mai rare)

Tritanopia — absența receptorilor conici albaștri. Albastrul apare verde, iar galbenul apare palid sau invizibil. Rară.

Tritanomalia — sensibilitate redusă la albastru. Albastrul-verde și roșul-violet sunt confundate.

Monocromatism (foarte rar)

Achromatopsia — absența tuturor receptorilor conici de culoare. Se percepe doar luminozitatea; lumea apare în nuanțe de gri. Adesea însoțită de sensibilitate la lumină și acuitate vizuală redusă.

Cum distruge daltonismul tiparele web frecvente

Cunoașterea tipurilor în abstract este mai puțin utilă decât cunoașterea deciziilor de design specifice care cauzează probleme. Acestea sunt cele mai frecvente.

Stări de eroare indicate doar prin roșu

Transformarea în roșu a marginii unui câmp de formular pentru a arăta o eroare de validare este unul dintre cele mai răspândite tipare din designul web. Pentru utilizatorii cu deficiență roșu-verde, roșul pe alb sau roșul pe gri poate fi aproape invizibil sau imposibil de distins de o stare normală, nefocalizată.

Acest lucru este acoperit direct de WCAG 2.2 1.4.1 Utilizarea culorii (Nivel A): culoarea nu trebuie să fie singurul mijloc de transmitere a informațiilor, de indicare a unei acțiuni, de solicitare a unui răspuns sau de diferențiere a unui element vizual.

Remedierea este simplă: asociază culoarea cu un al doilea indicator vizual — o pictogramă, o etichetă text, o modificare a grosimii marginii sau orice alt semnal non-color.

<!-- Bazându-se doar pe culoare: eșuează la 1.4.1 -->
<input type="email" class="field--error">

<!-- Culoare plus pictogramă plus text: trece -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Introdu o adresă de e-mail validă.
  </p>
</div>

Contrast insuficient

Contrastul scăzut este o problemă separată de daltonism, dar acestea se intersectează. Multe palete de culori care par lizibile pentru vederea tipică a culorilor devin și mai greu de citit sub deficiența de vedere a culorilor, deoarece diferența percepută dintre prim-plan și fundal se micșorează și mai mult.

WCAG 1.4.3 impune un raport de contrast minim de 4,5:1 pentru textul normal și 3:1 pentru textul mare. Testarea contrastului cu un instrument precum selectorul de culori din DevTools al browserului sau un verificator dedicat este obligatorie — nu te baza pe inspecția vizuală.

Vizualizarea datelor care codifică doar prin culoare

O diagramă circulară cu șase segmente diferențiate doar prin culoare. O hartă cu un gradient de la roșu la verde. O diagramă liniară în care patru seturi de date sunt distinse doar prin nuanță.

Pentru utilizatorii cu deuteranopie, roșul și verdele devin imposibil de distins. Semnificația diagramei se prăbușește complet. Pentru mai multe informații, vezi ghidul nostru despre vizualizarea accesibilă a datelor.

Linkuri care se bazează doar pe culoare pentru a ieși în evidență față de textul de bază

În mod implicit, browserele subliniază linkurile. Mulți designeri elimină această subliniere și se bazează doar pe culoare pentru a distinge linkurile de textul din jur. Utilizatorii cu deficiență de vedere a culorilor — și în special cei care folosesc teme cu contrast scăzut — pot să nu reușească deloc să identifice linkurile.

WCAG 1.4.1 se aplică și aici. Dacă culoarea linkului este singurul indicator vizual (fără subliniere, fără îngroșare, fără alt element de diferențiere), linkul nu este accesibil pentru utilizatorii daltonici.

Cea mai simplă remediere: restabilește sublinierea. Alternativ, asigură-te că culoarea linkului are un contrast suficient atât față de culoarea textului de bază, cât și față de fundal.

Designul cu daltonismul în minte

Folosește codificarea redundantă

Adaugă un al doilea canal vizual alături de culoare. În diagrame: adaugă modele, texturi sau etichete de date. În indicatoarele de stare: adaugă pictograme. În stările formularelor: adaugă text. Scopul este ca cineva care elimină complet culoarea din design să poată încă înțelege totul.

Testează cu instrumente de simulare

Chrome DevTools are o simulare încorporată a daltonismului. Deschide DevTools > panoul Rendering > „Emulate vision deficiencies.” Poți simula protanopia, deuteranopia, tritanopia și achromatopsia.

Figma și alte instrumente de design au pluginuri similare. Rularea unei simulări durează câteva secunde și deseori scoate la iveală probleme care nu erau vizibile în previzualizarea standard.

Verifică-ți paleta în ansamblu

Nu testa doar perechi individuale de elemente. Privește paleta completă împreună: culorile primare, secundare, de eroare, de succes, de avertizare și informaționale. Sub simularea deuteranopiei, roșul de eroare și verdele de succes arată similar? Dacă da, ai o problemă indiferent dacă rapoartele tale de contrast trec tehnic sau nu.

Evită combinațiile problematice

Deosebit de nesigure pentru deficiența de vedere a culorilor:

• Roșu și verde
• Verde și maro
• Albastru și violet
• Verde și gri
• Verde și negru

Când aceste perechi trebuie să apară în același context, diferențiază-le prin luminozitate sau model, mai degrabă decât prin nuanță.

Ce acoperă și ce nu acoperă WCAG

WCAG acoperă contrastul de culoare (1.4.3, 1.4.11) și interdicția de a folosi culoarea ca unic mijloc de transmitere a informațiilor (1.4.1). Nu specifică ce culori poți sau nu poți folosi și nici nu impune ca întreaga ta paletă să fie perceptibilă sub fiecare tip de deficiență de vedere a culorilor.

Ceea ce impune este ca niciun sens să nu se piardă atunci când culoarea este eliminată. Acesta este testul practic. Elimină culoarea din designul tău. Rămâne fiecare informație accesibilă prin alte mijloace?

Dacă răspunsul este da, ai îndeplinit cerința. Dacă stările de eroare dispar, dacă datele din diagrame devin ambigue, dacă linkurile devin invizibile — ai de lucru.

Auditurile noastre de accesibilitate includ accesibilitatea culorilor ca parte standard a evaluării. Dacă vrei să știi unde se situează designul tău actual, rulează o scanare automată gratuită pentru a depista problemele automatizabile ca punct de plecare.