Com percebem el color i el contrast

Abans de mesurar ràtios convé entendre què mesurem i per què. El contrast no és una qüestió de gust: depèn de com funciona l'ull humà, de la diversitat de la visió entre persones, de l'edat i d'una cosa que gairebé mai no es té en compte en dissenyar, l'entorn en què es mira la pantalla. Aquesta lliçó explica les bases perceptives del color i la lluminositat, qui té més dificultats amb el contrast baix i què mesura exactament la fórmula de les WCAG (i què no). Amb això, els criteris de les lliçons següents deixaran de semblar nombres arbitraris.

To, saturació i lluminositat: tres coses diferents

Qualsevol color es pot descriure amb tres dimensions:

• To (hue): el que anomenem «vermell», «verd» o «blau».
• Saturació: com d'intens o d'apagat és aquest to.
• Lluminositat: com de clar o de fosc el percebem.

Per llegir, el que és decisiu és la lluminositat. El sistema visual distingeix les vores de les lletres sobretot per diferències de claredat, no de to. Per això la fórmula de contrast de les WCAG només fa servir la luminància relativa: ignora completament el to. Dos colors molt diferents de to però amb una luminància semblant tenen un contrast baix, encara que «es vegin diferents».

Compte amb el selector HSL

Moltes eines de disseny mostren els colors en HSL (to, saturació, lluminositat), i és temptador pensar que dos colors amb la mateixa «L» tindran el mateix contrast. No és així. El groc pur #FFFF00 i el blau pur #0000FF tenen en HSL la mateixa lluminositat (50 %), però sobre blanc el groc dona 1,07:1 i el blau 8,59:1. L'ull és molt més sensible al verd i al groc que al blau, i la fórmula de luminància ho reflecteix donant un pes molt diferent a cada canal (al voltant del 72 % al verd, el 21 % al vermell i el 7 % al blau).

Visió del color diversa: el daltonisme

L'anomenat daltonisme agrupa diverses alteracions de la visió del color, gairebé sempre hereditàries i molt més freqüents en homes. Les principals són:

• Deuteranomalia i deuteranopia (verd): les més comunes. Vermells, verds, marrons i taronges tendeixen a confondre's.
• Protanomalia i protanopia (vermell): confusions semblants, i a més els vermells es perceben més foscos, de vegades gairebé negres.
• Tritanomalia i tritanopia (blau): poc freqüents; es confonen blaus amb verds i grocs amb roses o grisos.
• Acromatòpsia: visió sense color, molt rara, sol anar acompanyada de baixa agudesa visual i gran sensibilitat a la llum.

El que és important per al disseny: la majoria de les persones amb daltonisme veuen bé les diferències de lluminositat. Per això funcionen els dos remeis que veuràs a la lliçó sobre 1.4.11 i 1.4.1: assegurar prou contrast de lluminositat i no confiar la informació només al to.

Baixa visió, edat i sensibilitat al contrast

L'agudesa visual (llegir lletres petites a distància) no és l'única cosa que importa. La sensibilitat al contrast, la capacitat de distingir un objecte del fons quan la diferència de claredat és petita, es redueix amb moltes condicions habituals: cataractes, glaucoma, degeneració macular associada a l'edat (DMAE), retinopatia diabètica o seqüeles d'un ictus. Una persona pot tenir una agudesa acceptable amb les ulleres i, tot i així, no distingir un text gris clar o la vora tènue d'un camp de formulari.

L'Organització Mundial de la Salut, en el seu Informe mundial sobre la visió (2019), estima que almenys 2.200 milions de persones al món tenen alguna deficiència de la visió de prop o de lluny. I encara que no hi hagi cap patologia, l'edat canvia la visió de tothom:

• El cristal·lí es torna groguenc i perd transparència: arriba menys llum a la retina i els blaus i els violetes es distingeixen pitjor entre si.
• La pupil·la es fa més petita i reacciona més a poc a poc, cosa que empitjora la visió amb poca llum.
• Augmenta la sensibilitat a l'enlluernament: els fons molt brillants i els reflexos molesten més.

Amb una població cada vegada més envellida, un contrast suficient no és una concessió a una minoria: és la condició perquè la majoria pugui llegir sense esforç una seu electrònica o una banca en línia.

Infografia · Conceptes clau

Què redueix el contrast que percebem

El mateix disseny es veu molt diferent segons la persona, l'edat, la pantalla i l'entorn

• Baixa visióCataractes, glaucoma o DMAE redueixen la sensibilitat al contrast
• DaltonismeConfon tons, però la lluminositat se sol percebre bé
• EdatEl cristal·lí es torna groguenc, entra menys llum i augmenta l'enlluernament
• Llum ambientalEl sol directe i els reflexos esborren els contrastos baixos
• PantallaBrillantor baixa, estalvi de bateria, filtres nocturns i mal angle de visió
• Fatiga i fotofòbiaEl cansament, la migranya o la sensibilitat a la llum redueixen la tolerància

Llegeix la infografia com a text

Sis targetes resumeixen els factors que redueixen el contrast que arriba a l'ull. Baixa visió: les cataractes, el glaucoma o la degeneració macular redueixen la sensibilitat al contrast. Daltonisme: confon tons, però la lluminositat se sol percebre bé. Edat: el cristal·lí es torna groguenc, entra menys llum i augmenta l'enlluernament. Llum ambiental: el sol directe i els reflexos esborren els contrastos baixos. Pantalla: la brillantor baixa, l'estalvi de bateria, els filtres nocturns i un mal angle de visió empitjoren la lectura. Fatiga i fotofòbia: el cansament, la migranya o la sensibilitat a la llum redueixen la tolerància al contrast baix i a l'enlluernament. La conclusió és que els llindars de les WCAG inclouen un marge que no convé apurar.

L'entorn i la pantalla també compten

El dissenyador sol treballar amb un monitor de qualitat, ben calibrat, en una oficina sense reflexos. La persona usuària, no. Aquests factors redueixen el contrast efectiu que arriba a l'ull:

• Llum ambiental: el sol directe sobre un mòbil al carrer o una finestra reflectida al portàtil «renten» els colors. Un contrast de 3:1 a l'estudi es pot quedar en gairebé res a la parada de l'autobús.
• Brillantor de la pantalla: el mode d'estalvi de bateria i la brillantor automàtica la redueixen.
• Filtres del sistema: la llum nocturna o els modes de to càlid desplacen els colors cap al groc.
• Qualitat i angle de visió: en pantalles econòmiques els grisos clars es confonen amb el blanc quan es miren de costat.

Per això els llindars de les WCAG inclouen un marge: 4,5:1 està pensat per compensar la pèrdua de sensibilitat al contrast equivalent a una agudesa d'al voltant de 20/40, la que s'associa habitualment a persones d'uns 80 anys, segons explica el mateix document de comprensió del criteri 1.4.3. Dissenyar just al límit deixa sense marge qui llegeix en condicions pitjors.

Què mesura la fórmula de les WCAG i què no

La fórmula que veuràs a la lliçó següent calcula la diferència de luminància entre dos colors especificats. És objectiva i reproduïble, i per això la fan servir la normativa i les eines d'auditoria. Però té límits:

• No té en compte el gruix de la lletra més enllà de la distinció entre text normal i text gran. Una font molt fina amb 4,5:1 es llegeix pitjor que una de gruix mitjà amb la mateixa ràtio.
• No distingeix la polaritat: dona la mateixa ràtio al text fosc sobre clar que al text clar sobre fosc, encara que l'experiència de lectura no sigui idèntica.
• És menys precisa amb colors foscos i alguns tons mitjans. Tendeix a sobreestimar el contrast entre colors foscos (dos tons foscos poden assolir la ràtio i llegir-se malament) i, amb alguns tons mitjans saturats, com certs taronges o blaus, hi ha debat sobre si reflecteix bé la percepció. Tot i així, en casos clars l'encerta: sobre un taronja #FF8C00, el text negre dona 9:1 i el blanc només 2,3:1.
• Mesura els colors declarats, no els píxels que pinta la pantalla després del suavitzat de les lletres (antialiasing).

Per superar aquestes limitacions s'han proposat altres mètodes, com l'algorisme APCA (Accessible Perceptual Contrast Algorithm), que s'ha estudiat en el marc dels treballs de les futures WCAG 3, encara en esborrany. Cap d'aquests mètodes no és exigible avui: l'EN 301 549 (PDF, s'obre en una finestra nova) i el RD 1112/2018 (PDF, s'obre en una finestra nova) remeten a WCAG 2.x, i la seva fórmula és la que compta en una auditoria o una reclamació. Si t'interessa l'evolució, la veuràs al nivell 7.

Si vols veure la definició exacta de luminància relativa, és al glossari de les WCAG 2.2 (W3C).

Resum

• El contrast que exigeixen les WCAG és diferència de lluminositat; el to no compta. Dos colors diferents amb una luminància semblant tenen poc contrast.
• La lluminositat HSL de les eines de disseny no prediu el contrast: l'ull dona molt més pes al verd que al blau.
• El daltonisme confon tons, però la majoria de les persones que el tenen distingeixen bé la lluminositat; la baixa visió i l'edat redueixen la sensibilitat al contrast.
• La llum ambiental, la brillantor, els filtres i les pantalles redueixen el contrast real: els llindars inclouen un marge que no convé apurar.
• La fórmula de WCAG 2.x té límits coneguts, però és l'única exigible avui; APCA i altres mètodes són, de moment, complementaris.