Daltonisme i disseny web: què cal saber

Més comú del que la majoria de dissenyadors es pensen

La deficiència de visió del color —comunament anomenada daltonisme— afecta aproximadament el 8% dels homes i el 0,5% de les dones. Això són al voltant d’1 de cada 12 homes i 1 de cada 200 dones, cosa que la fa més prevalent que la majoria de les altres discapacitats que aborden els estàndards d’accessibilitat web.

Tot i així, sovint es passa per alt en el disseny. Els equips fan proves amb lectors de pantalla i navegació per teclat, executen una anàlisi WCAG automatitzada i consideren que la feina d’accessibilitat està acabada, sense comprovar mai si la seva paleta de colors és llegible per als usuaris daltònics.

Entendre el daltonisme, i què fa realment a les interfícies web que dissenyes, és el primer pas per corregir-lo.

Els tipus i què fan

La deficiència de visió del color es presenta en diverses formes, i no totes produeixen la mateixa experiència.

Deficiències vermell-verd (les més comunes)

Protanopia — absència completa de fotoreceptors de con vermells. El vermell apareix fosc o negre. Es perden les distincions vermell-verd.

Protanomalia — sensibilitat reduïda al vermell. El vermell, el taronja i el groc es desplacen cap al verd, i l’experiència general és més apagada, com si el canal vermell s’hagués baixat.

Deuteranopia — absència completa de receptors de con verds. La forma més comuna de daltonisme. El verd i el vermell es confonen; el món sembla filtrat a través d’una lent groga-marró.

Deuteranomalia — sensibilitat reduïda al verd. Similar a la deuteranopia però més lleu. El tipus més prevalent en general, que afecta aproximadament el 5% dels homes.

Deficiències blau-groc (més rares)

Tritanopia — absència de receptors de con blaus. El blau apareix verd, i el groc apareix pàl·lid o invisible. Rar.

Tritanomalia — sensibilitat reduïda al blau. El blau-verd i el vermell-porpra es confonen.

Monocromàcia (molt rara)

Achromatopsia — absència de tots els receptors de con de color. Només es percep la lluminositat; el món apareix en tons de gris. Sovint va acompanyada de sensibilitat a la llum i agudesa visual reduïda.

Com el daltonisme trenca els patrons web habituals

Conèixer els tipus en abstracte és menys útil que saber quines decisions de disseny concretes causen problemes. Aquestes són les més habituals.

Estats d’error indicats només amb vermell

Posar vermell el marc d’un camp de formulari per mostrar un error de validació és un dels patrons més estesos del disseny web. Per als usuaris amb deficiència vermell-verd, el vermell sobre blanc o el vermell sobre gris pot ser gairebé invisible, o indistingible d’un estat normal sense focus.

Això està cobert directament per WCAG 2.2 1.4.1 Ús del color (Nivell A): el color no ha de ser l’únic mitjà per transmetre informació, indicar una acció, sol·licitar una resposta o distingir un element visual.

La solució és senzilla: combina el color amb un segon indicador visual —una icona, una etiqueta de text, un canvi en el gruix del marc o qualsevol altre senyal que no sigui de color.

<!-- Confiar només en el color: no compleix 1.4.1 -->
<input type="email" class="field--error">

<!-- Color més icona més text: compleix -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Introdueix una adreça de correu electrònic vàlida.
  </p>
</div>

Contrast insuficient

El contrast baix és un problema separat del daltonisme, però es creuen. Moltes paletes de colors que semblen llegibles per a la visió del color típica es tornen encara més difícils de llegir amb la deficiència de visió del color, perquè la diferència percebuda entre el primer pla i el fons es redueix encara més.

WCAG 1.4.3 requereix una relació de contrast mínima de 4,5:1 per al text normal i 3:1 per al text gran. Provar el contrast amb una eina com el selector de color de les DevTools del navegador o un comprovador dedicat no és negociable: no confiïs en la inspecció visual.

Visualització de dades que codifica només amb color

Un gràfic de sectors amb sis segments diferenciats només pel color. Un mapa amb un degradat de vermell a verd. Un gràfic de línies on quatre conjunts de dades es distingeixen només per la tonalitat.

Per als usuaris amb deuteranopia, el vermell i el verd es tornen indistingibles. El significat del gràfic s’esfondra completament. Per saber-ne més, consulta la nostra guia sobre visualització de dades accessible.

Enllaços que depenen només del color per destacar del text del cos

Per defecte, els navegadors subratllen els enllaços. Molts dissenyadors eliminen aquest subratllat i es basen només en el color per distingir els enllaços del text que els envolta. Els usuaris amb deficiència de visió del color —i especialment els que utilitzen temes de contrast baix— poden no identificar els enllaços en absolut.

WCAG 1.4.1 també s’aplica aquí. Si el color de l’enllaç és l’únic indicador visual (sense subratllat, sense negreta, sense cap altre diferenciador), l’enllaç no és accessible per als usuaris daltònics.

La solució més senzilla: restaura el subratllat. Alternativament, assegura’t que el color de l’enllaç tingui prou contrast tant amb el color del text del cos com amb el fons.

Dissenyar tenint en compte el daltonisme

Utilitza codificació redundant

Afegeix un segon canal visual juntament amb el color. En gràfics: afegeix patrons, textures o etiquetes de dades. En indicadors d’estat: afegeix icones. En estats de formulari: afegeix text. L’objectiu és que algú que elimini el color completament del disseny encara pugui entendre-ho tot.

Prova amb eines de simulació

Chrome DevTools té una simulació de daltonisme integrada. Obre DevTools > panell Rendering > “Emulate vision deficiencies”. Pots simular protanopia, deuteranopia, tritanopia i achromatopsia.

Figma i altres eines de disseny tenen connectors similars. Executar una simulació triga uns segons i sovint revela problemes que no eren visibles a la vista prèvia estàndard.

Comprova la paleta com a conjunt

No provis només parells d’elements individuals. Mira la paleta completa junta: colors primaris, secundaris, d’error, d’èxit, d’advertència i informatius. Sota una simulació de deuteranopia, el vermell d’error i el verd d’èxit s’assemblen? Si és així, tens un problema independentment de si les teves relacions de contrast tècnicament compleixen.

Evita combinacions problemàtiques

Especialment poc fiables per a la deficiència de visió del color:

Vermell i verd
Verd i marró
Blau i porpra
Verd i gris
Verd i negre

Quan aquests parells hagin d’aparèixer en el mateix context, diferencia’ls mitjançant la lluminositat o el patró en comptes de la tonalitat.

Què cobreix i què no cobreix WCAG

WCAG cobreix el contrast de color (1.4.3, 1.4.11) i la prohibició d’utilitzar el color com a únic mitjà per transmetre informació (1.4.1). No especifica quins colors pots o no pots utilitzar, ni requereix que tota la teva paleta sigui perceptible sota cada tipus de deficiència de visió del color.

El que requereix és que no es perdi cap significat quan s’elimina el color. Aquesta és la prova pràctica. Elimina el color del teu disseny. Cada peça d’informació continua sent accessible per altres mitjans?

Si la resposta és sí, has complert el requisit. Si els estats d’error desapareixen, si les dades del gràfic es tornen ambigües, si els enllaços es tornen invisibles, tens feina a fer.

Les nostres auditories d’accessibilitat inclouen l’accessibilitat de color com a part estàndard de la revisió. Si vols saber on es troba el teu disseny actual, executa una anàlisi automatitzada gratuïta per detectar els problemes automatitzables com a punt de partida.