Cas pràctic, exercicis i llista de comprovació

És el moment d'aplicar tot el que has après. En aquesta lliçó revisaràs pas a pas el color, el contrast i la tipografia d'una pàgina, amb les eines que faries servir a la feina. Després tens exercicis d'autoavaluació amb la solució i una llista de comprovació per als teus propis projectes.

Cas pràctic: la cita prèvia de l'Ajuntament de Villanueva del Campo

L'Ajuntament de Villanueva del Campo (municipi fictici) ha estrenat disseny a la seu electrònica. Com a administració pública, el seu web és dins de l'àmbit del RD 1112/2018 (PDF, s'obre en una finestra nova) i ha de complir el nivell AA. Et demanen revisar la pàgina de cita prèvia per al padró: una capçalera amb una foto del poble i el títol «Demana la teva cita», un formulari amb nom, DNI, telèfon i un calendari de dies disponibles, un botó «Confirma la cita» i un avís de galetes.

Pas 1. Inventari de colors

Abans de mesurar res, fas inventari. El tauler «CSS Overview» de les eines de desenvolupament de Chrome (o la inspecció manual) et dona la llista de colors en ús. Hi trobes: text #1A1A1A, enllaços i botó en el turquesa corporatiu #1AA39A, text d'ajuda #999999, placeholders #A9A9A9, vores de camp #CCCCCC, vermell dels obligatoris #C62828, dies lliures del calendari en verd #4CAF50 i ocupats en gris #BDBDBD.

Pas 2. Mesurar el text (1.4.3)

Element	Ràtio	Resultat	Correcció proposada
Text blanc de 16 px al botó turquesa	3,1:1	No compleix	Text #1A1A1A sobre el turquesa (5,6:1) o fons turquesa 700 #13766E amb text blanc (5,5:1)
Enllaços turquesa sobre blanc	3,1:1	No compleix	Turquesa 700 #13766E (5,5:1), subratllats
Text d'ajuda #999999	2,8:1	No compleix	#595959 (7,0:1)
Placeholder #A9A9A9	2,3:1	No compleix	Enfosquir-lo i, encara millor, moure l'exemple a un text d'ajuda visible
Títol blanc de 40 px sobre la foto	1,3:1 al cel (#CFE3F2)	No compleix	Capa negra del 60 % a la zona del títol

El títol de la capçalera és text gran i només necessita 3:1, però a la zona del cel ni tan sols hi arriba. Com vam veure a la lliçó sobre fons complexos, la solució va a la plantilla.

Pas 3. Components i ús del color (1.4.11 i 1.4.1)

• Vores de camp #CCCCCC: 1,6:1, incompleix 1.4.11. Es canvien a #767676.
• Camps obligatoris assenyalats només amb l'etiqueta en vermell: incompleix 1.4.1. S'afegeix «(obligatori)» al final de cada etiqueta.
• Calendari: els dies lliures en verd i els ocupats en gris es distingeixen només pel color (entre ells hi ha 1,5:1). Es ratllen els ocupats, s'afegeix una icona als lliures i una llegenda amb text, i el nom accessible de cada dia diu «disponible» o «ocupat».
• Indicador de focus: el navegador mostra el contorn per defecte, que es veu, però el disseny l'havia eliminat amb outline: none als dies del calendari. Es restaura.

Pas 4. Tipografia i adaptació (1.4.4, 1.4.10 i 1.4.12)

Proves el zoom al 200 % i al 400 % en una finestra de 1280 px i apliques el bookmarklet d'espaiat de text. Troballes: el botó «Confirma la cita» té una alçada fixa i el text es talla al 200 %; al 400 % l'avís de galetes ocupa gairebé tota la pantalla i tapa el formulari; amb l'espaiat aplicat, les etiquetes del calendari se superposen. Correccions: min-height en lloc de height, un avís de galetes que no ocupi més d'una franja i es pugui tancar, i cel·les del calendari que creixin amb el contingut.

Pas 5. Mode fosc i contrast forçat

La seu ofereix mode fosc. En activar-lo comproves que els enllaços turquesa 700 (#13766E) sobre el fons #121212 baixen a 3,4:1: per al tema fosc es fa servir el turquesa 300 (#65E6DB, 12,4:1). En el mode de contrast de Windows, el botó «Confirma la cita» es queda com a text solt perquè no té vora, i la icona del calendari, una imatge de fons CSS de color fosc, no s'adapta a la paleta i desapareix sobre el fons negre del tema. S'afegeix una vora transparent al botó i la icona passa a SVG en línia.

Pas 6. Prioritzar i comunicar

Ordenes les troballes per impacte: primer les que bloquegen la tasca (botó il·legible, calendari que depèn del color, avís que tapa el formulari), després les que la dificulten (ajuda i placeholders, vores, capçalera). A l'equip li expliques que la meitat dels problemes es resolen a la paleta: canviar el turquesa dels enllaços, el gris d'ajuda i el gris de les vores corregeix totes les pàgines de la seu de cop.

Exercicis d'autoavaluació

Exercici 1

Un text de 15 px està definit com a negre amb una opacitat del 50 % sobre fons blanc. Compleix 1.4.3?

Mostra la solució

No. El color resultant és #808080, amb una ràtio de 3,9:1. Un text de 15 px és text normal i necessita 4,5:1. Caldria almenys un 54 % d'opacitat (#757575, 4,6:1) o, millor, un color sòlid com #595959 (7,0:1).

Exercici 2

Un comerç electrònic té un botó vermell corporatiu #E30613 amb text blanc de 16 px. L'equip dona per fet que «el vermell no compleix mai». Té raó?

Mostra la solució

No. El text blanc sobre #E30613 dona 4,9:1, per sobre de 4,5:1, així que compleix 1.4.3. No hi ha colors que compleixin o incompleixin pel to: es mesura la luminància de cada parella. El que no s'ha de fer és comunicar alguna cosa (un error, una oferta) només amb aquest vermell.

Exercici 3

Un informe al web mostra un gràfic circular amb cinc sectors en tons de blau i una llegenda amb quadradets de color. Quins criteris hi ha en joc i com ho arreglaries?

Mostra la solució

1.4.1 Ús del color, perquè la relació entre la llegenda i els sectors depèn només del color, i 1.4.11 Contrast no textual, perquè els sectors contigus i el fons necessiten 3:1 entre si. Solució: etiquetar cada sector directament amb el nom i el valor, separar els sectors amb una línia blanca o una trama i oferir les dades també en una taula.

Exercici 4

Les targetes de notícies tenen height: 180px; overflow: hidden. En ampliar el text al 200 % el titular es talla. Quins criteris incompleix i quina és la correcció?

Mostra la solució

Incompleix 1.4.4 Canvi de mida del text (es perd contingut en ampliar) i, molt probablement, 1.4.12 Espaiat del text. La correcció és fer servir min-height en lloc de height i treure overflow: hidden, de manera que la targeta creixi amb el contingut.

Exercici 5

Al tema fosc d'un web, els enllaços fan servir el mateix blau #1565C0 que al tema clar, ara sobre fons #121212. Compleix? Què faries?

Mostra la solució

No compleix: dona 3,3:1 sobre #121212, per sota de 4,5:1. El tema fosc necessita la seva pròpia variant del color d'accent, més clara, per exemple #90CAF9 (10,7:1), i mantenir el subratllat.

Exercici 6

Un responsable de continguts pregunta si el RD 1112/2018 obliga a no justificar el text i a limitar les línies a 80 caràcters. Què li respons?

Mostra la solució

No hi obliga: aquests requisits són del criteri 1.4.8 Presentació visual, de nivell AAA, i el RD 1112/2018, a través de l'EN 301 549 (PDF, s'obre en una finestra nova), exigeix el nivell AA. Tot i així, són recomanacions excel·lents per a textos llargs i el seu cost és mínim, així que convé adoptar-les a la guia d'estil.

Llista de comprovació

• Text normal amb almenys 4,5:1 i text gran amb almenys 3:1, en tots els seus estats.
• Placeholders i textos d'ajuda mesurats com qualsevol altre text.
• Transparències mesurades amb el color resultant, no amb el color declarat.
• Text sobre fotos, degradats i vídeos mesurat al pitjor punt i protegit a la plantilla.
• Vores de camps, icones informatives i indicador de focus amb almenys 3:1.
• Cap informació no depèn només del color: hi ha text, icona, forma o subratllat.
• Enllaços del contingut subratllats.
• Paleta amb matriu de combinacions permeses per a cada fons i cada tema.
• Jerarquia visual que coincideix amb els encapçalaments de l'HTML.
• Text de lectura alineat a l'esquerra, sense justificar, de 45-80 caràcters per línia.
• Zoom al 200 % sense pèrdua de contingut i sense bloqueig del zoom al mòbil.
• Sense desplaçament horitzontal a 320 px CSS (zoom al 400 %).
• Espaiat de text aplicat sense talls ni superposicions.
• Mode fosc amb la seva pròpia mesura de contrast i variants d'accent.
• Botons i icones visibles en el mode de contrast forçat de Windows.

Per continuar aprenent

• Understanding 1.4.3 Contrast (Minimum), W3C.
• Understanding 1.4.11 Non-text Contrast, W3C.
• Understanding 1.4.10 Reflow, W3C.
• Understanding 1.4.12 Text Spacing, W3C.
• forced-colors, documentació de MDN.