Mesurar amb rigor: contrast, píxels CSS, zoom, espaiat i mida de l'objectiu

Diversos criteris de Perceptible i Operable tenen llindars numèrics: 4,5:1 i 3:1 de contrast, 200 % d'ampliació, 320 píxels CSS d'amplada, 0,12 em d'espaiat entre lletres, 24 píxels CSS d'objectiu, 20 segons d'avís, tres flaixos per segon. Una troballa amb un número només val si una altra persona pot repetir la mesura i obtenir el mateix resultat. A les lliçons 4, 5 i 6 vas veure què exigeix cada criteri; aquí veuràs com mesurar cada llindar sense errors i com deixar-ho documentat.

Contrast: què es calcula i què es mesura

La ràtio de contrast es calcula a partir de la luminància relativa dels dos colors: cada canal sRGB es linealitza (es desfà la correcció gamma) i es combinen amb els pesos 0,2126 (vermell), 0,7152 (verd) i 0,0722 (blau). La ràtio és (L1 + 0,05) / (L2 + 0,05), on L1 és la luminància del color més clar. Va d'1:1 (el mateix color) a 21:1 (negre sobre blanc). N'hi ha prou d'entendre'n tres conseqüències:

• No s'arrodoneix. La documentació del W3C ho deixa clar: el llindar és un mínim i un valor de 4,49:1 no arriba a 4,5:1. El gris #767676 sobre blanc dona 4,54:1 i compleix; #777777, pràcticament igual a la vista, dona 4,48:1 i no compleix.
• El verd pesa molt més que el blau. Dos colors d'aspecte semblant poden tenir contrastos molt diferents; no ho estimis a ull.
• La transparència canvia el color. Un text #333333 amb opacity: 0.6 sobre blanc es pinta com un gris proper a #858585, que dona uns 3,7:1. Mesura el color resultant, no el declarat.

On posar el comptagotes

El suavitzat de vores (antialiasing) barreja els píxels del contorn de cada lletra amb el fons; si poses el comptagotes en una vora, obtindràs un color intermedi i un contrast pitjor que el real. El criteri s'avalua amb el color del text, no amb aquests píxels de transició. Hi ha dues maneres fiables d'obtenir-lo:

1. Llegir el color calculat a les eines de desenvolupament (pestanya d'estils calculats) i compondre a mà l'opacitat o els fons semitransparents, si n'hi ha.
2. Ampliar la captura i agafar el color al centre d'un traç gruixut de la lletra.

Per al fons, mesura el color just darrere del text. Si el fons és un degradat o una fotografia, el valor que compta és el del punt més desfavorable que queda darrere de les lletres. Repeteix la mesura en cada estat rellevant: hover, focus, visitat, error, placeholder i mode fosc si el lloc l'ofereix.

Mida del text: punts i píxels

El llindar de text gran es defineix en punts: 18 pt equivalen a 24 px CSS i 14 pt a uns 18,66 px CSS (1 pt = 1,333 px). Comprova la mida calculada, també a la vista mòbil: un titular de 24 px a l'escriptori pot quedar-se en 20 px al mòbil i passar a necessitar 4,5:1. Per a la negreta, la referència habitual són gruixos de 700 o més.

Píxels CSS, zoom i finestres de prova

Els 320 px de l'1.4.10 i els 24 px del 2.5.8 són píxels CSS. En un portàtil amb pantalla d'alta densitat, un píxel CSS pot ocupar dos o tres píxels físics; per això mesurar amb un regle sobre la pantalla no serveix. Comprova sempre l'amplada real de la finestra en píxels CSS des de la consola del navegador:

// A la consola de les eines de desenvolupament
window.innerWidth        // amplada del viewport en píxels CSS
window.devicePixelRatio  // píxels físics per píxel CSS (inclou el zoom)

Amb el zoom del navegador al 400 % en una finestra de 1280 px d'amplada, window.innerWidth ha de retornar 320. Si retorna una altra xifra (perquè la finestra fa 1366 px o la barra lateral ocupa espai), ajusta la finestra o fes servir l'emulació de dispositiu a 320 px. Per al contingut de desplaçament horitzontal, la referència és una altura de 256 px CSS.

Per a l'1.4.4 fes servir el zoom del navegador al 200 %: és una tècnica suficient reconeguda i és el que fa la majoria de persones. Anota el navegador, la versió, l'amplada de la finestra i el zoom: un menú que se superposa al 200 % en 1280 px es pot veure bé en 1920 px.

Espaiat del text: què compta com a pèrdua

La prova de l'1.4.12 consisteix a aplicar els quatre valors alhora (interlineat 1,5, paràgrafs 2 em, lletres 0,12 em, paraules 0,16 em) amb un full d'usuari o un bookmarklet (un marcador que executa un petit script sobre la pàgina) que els forci amb !important a tots els elements. Després recorre la pàgina buscant quatre símptomes: text tallat per un contenidor d'altura fixa, text que se superposa amb un altre i deixa de llegir-se, controls el rètol dels quals desapareix i contingut que queda tapat. Que la pàgina quedi menys bonica o que un paràgraf ocupi més línies no és una fallada: el criteri no exigeix que el web apliqui aquests valors, sinó que no es trenqui quan l'usuari els aplica.

Mida de l'objectiu: la caixa i el cercle

Per al 2.5.8, mesura l'àrea que respon al punter: a l'inspector, la caixa de l'element amb el seu farciment (padding) i la seva vora, però sense el marge. Una icona de 16 px dins d'un botó de 24 × 24 px compleix; una icona de 24 px dibuixada dins d'un enllaç de 18 px d'alt no compleix per mida.

Si l'objectiu fa menys de 24 × 24 px, aplica la prova d'espaiat: dibuixa mentalment un cercle de 24 px de diàmetre centrat a la caixa de l'objectiu. No compleix si aquest cercle talla un altre objectiu o el cercle d'un altre objectiu petit. A la pràctica:

• Dos objectius petits veïns: els seus centres han d'estar a 24 px o més.
• Un objectiu petit al costat d'un de mida suficient: del centre del petit a la vora del gran hi ha d'haver almenys 12 px.

Temps i flaixos

Els criteris de temps també es mesuren. Per al 2.2.1, cronometra la sessió sense interactuar, anota quan apareix l'avís, quants segons dona per ampliar-la i si l'ampliació es pot repetir. Per al 2.2.2, cronometra quant dura l'animació o el desplaçament: si s'atura sola abans de cinc segons, el criteri no exigeix cap mecanisme de pausa.

Per al 2.3.1, el llindar de tres flaixos per segon depèn també de l'àrea i de la luminància: la definició de flaix general considera una àrea de l'ordre del 25 % d'un camp visual de 10 graus, que el W3C aproxima a un rectangle de 341 × 256 px a una resolució de 1024 × 768. Davant d'un contingut sospitós, analitza'l fotograma a fotograma o amb PEAT i anota'n el mètode.

Com documentar una mesura

Cada troballa amb llindar s'hauria de poder reproduir llegint només la seva fitxa. Com a mínim:

Resum

• El contrast no s'arrodoneix: 4,48:1 no compleix 4,5:1; mesura el color renderitzat del traç, mai la vora suavitzada.
• Comprova la mida calculada del text (18 pt = 24 px; 14 pt = 18,66 px) per decidir el llindar, també a la vista mòbil.
• Verifica a la consola que treballes a 320 px CSS per a l'1.4.10; fes servir el 200 % per a l'1.4.4 i anota la configuració.
• Al 2.5.8 mesura la caixa amb farciment i vora; si fa menys de 24 px, aplica el cercle de 24 px: centres a 24 px entre objectius petits.
• Cronometra els límits de temps i documenta el mètode d'anàlisi de flaixos.