Fons complexos: transparències, degradats, imatges i vídeo

Mesurar el contrast d'un text negre sobre un fons blanc és immediat. El que és difícil arriba amb el disseny real: textos semitransparents, degradats, fotografies de capçalera, vídeos de fons o efectes de vidre esmerilat. A la lliçó sobre el contrast de text vam veure la regla general: es mesura contra el fons real, a la zona de pitjor contrast. Aquesta lliçó ensenya a aplicar aquesta regla en els casos complicats, a calcular el color resultant d'una transparència i, sobretot, a dissenyar de manera que el contrast no depengui de la sort.

Transparències: calcula el color que realment es veu

Molts sistemes de disseny defineixen el text secundari com a «negre al 60 %» o els textos sobre botons com a «blanc al 80 %». La fórmula de contrast no treballa amb transparències: necessita el color resultant després de compondre'l amb el fons. Per a cada canal (vermell, verd i blau) el càlcul és:

resultat = opacitat × color_del_text + (1 − opacitat) × color_del_fons

Amb aquest color ja pots calcular la ràtio. Algunes equivalències útils amb text negre sobre fons blanc:

Text	Color resultant	Ràtio sobre blanc	Ús possible
Negre al 87 %	#212121	16,1:1	Text principal
Negre al 60 %	#666666	5,7:1	Text secundari
Negre al 54 %	#757575	4,6:1	Límit per al text normal
Negre al 50 %	#808080	3,9:1	Només text gran o components
Negre al 38 %	#9E9E9E	2,7:1	Només elements deshabilitats o decoratius

Dos paranys habituals. El primer: la transparència es calcula contra el fons concret. «Negre al 54 %» compleix sobre blanc, però sobre una targeta gris clar baixa de 4,5:1. El segon: la propietat CSS opacity en un contenidor afecta tot el que té a dins, inclòs el text, encara que el text tingui un color sòlid.

/* Incorrecte: el text blanc al 70 % sobre blau #0056B3 queda en #B2CCE8: 4,3:1 */
.boton { background: #0056B3; color: rgba(255, 255, 255, 0.7); }

/* Incorrecte: opacity redueix també el contrast del text de la targeta */
.tarjeta-destacada { opacity: 0.8; }

/* Correcte: text blanc sòlid, 7,0:1 */
.boton { background: #0056B3; color: #FFFFFF; }

Degradats

En un degradat, el fons canvia al llarg del text. Cal mesurar el pitjor punt de tota la zona que ocupa el text, no la mitjana. Un títol blanc sobre un degradat de blau fosc #0D47A1 (8,6:1) a blau clar #64B5F6 (2,2:1) compleix al començament de la frase i falla al final.

A més, el text es mou: al mòbil es pot partir en tres línies i caure sobre la zona clara, o el degradat es pot estirar amb l'amplada de la pantalla. Com resoldre-ho:

• Limitar el recorregut del degradat perquè tots els seus tons compleixin amb el color del text.
• Col·locar el text sobre una caixa de color sòlid o una franja fosca.
• Comprovar el resultat en diverses amplades de pantalla, no només en la d'escriptori.

Text sobre fotografies

És el cas més freqüent en capçaleres, portades de notícies, carrusels i targetes de producte, i un dels que més fallen, perquè les eines automàtiques no l'avaluen. La solució més robusta és pensar en el pitjor cas: que just darrere del text hi hagi una zona blanca de la imatge (un cel, una paret, un reflex).

La regla de la capa fosca

Si col·loques una capa negra semitransparent entre la foto i un text blanc, el pitjor cas és un píxel blanc de la foto. Amb una capa al 55 % aquest píxel es converteix en #737373 i el text blanc obté 4,7:1; amb una capa al 60 %, #666666 i 5,7:1. És a dir: una capa negra d'almenys el 55 % (millor el 60 %, per marge) garanteix 4,5:1 per al text blanc sobre qualsevol fotografia. Amb una capa al 50 % només arribes a 3,9:1, suficient únicament per al text gran.

La capa pot ser un degradat que només enfosqueix la part inferior de la imatge, on hi ha el text; el que és important és que en tota la zona del text assoleixi aquesta opacitat.

Altres solucions

• Caixa sòlida o semitransparent darrere del text: la mateixa regla del pitjor cas s'aplica a la seva opacitat.
• Text fora de la imatge: a sota o al costat. És l'opció més senzilla i la més llegible.
• Contorn o ombra marcada a les lletres: una vora que envolta cada lletra pot comptar com a part del seu fons, però és difícil de controlar i de demostrar en una auditoria; fes-la servir com a reforç, no com a única solució.

Imatges responsive i direcció d'art

Una mateixa capçalera es retalla de manera diferent a l'escriptori, a la tauleta i al mòbil. La zona que queda darrere del text canvia, i amb ella el contrast. Mesura en les tres amplades, i als carrusels mesura cada diapositiva. Si el contingut el pengen tercers (anuncis immobiliaris, fitxes de producte, notícies), la protecció ha de ser a la plantilla, no a la bona voluntat de qui penja la foto.

Vídeos de fons, vidre esmerilat i fons que canvien

• Vídeo de fons: el contrast s'ha de complir en tots els fotogrames, així que aplica la regla de la capa fosca. A més, si el vídeo es mou més de 5 segons de manera automàtica, necessita un control per posar-lo en pausa (2.2.2 Posar en pausa, aturar, amagar), cosa que tractem al curs de multimèdia.
• Efecte de vidre esmerilat (backdrop-filter: blur() i fons translúcids): el desenfocament no augmenta el contrast. El que hi ha darrere canvia en desplaçar la pàgina, de manera que un menú llegible sobre un paràgraf blanc deixa de ser-ho sobre una foto. Fes servir un fons amb prou opacitat i respecta la preferència de transparència reduïda que veuràs a la lliçó sobre el mode fosc i les preferències.

Components i focus sobre fons complexos

El criteri 1.4.11 Contrast no textual també s'aplica sobre imatges: les fletxes i els punts d'un carrusel, les icones sobre una foto o l'indicador de focus d'una targeta han de tenir 3:1 contra el que tenen al costat. Com que el fons varia, la tècnica més fiable és el doble contorn: una línia clara i una altra de fosca juntes, de manera que sempre una de les dues contrasti.

/* Indicador de focus que funciona sobre qualsevol fons */
.tarjeta-imagen a:focus-visible {
  outline: 3px solid #FFFFFF;
  box-shadow: 0 0 0 6px #1A1A1A;
}

/* Controls del carrusel amb fons propi en lloc d'icones soltes sobre la foto */
.carrusel-boton { background: rgba(0, 0, 0, 0.6); color: #FFFFFF; border: 2px solid #FFFFFF; }

El document oficial de comprensió del criteri, Understanding 1.4.3 Contrast (Minimum), explica també com tractar els contorns de les lletres i els fons d'imatge.

Resum

• Les transparències es mesuren amb el color resultant: opacitat × text + (1 − opacitat) × fons. Negre al 54 % és el límit sobre blanc; opacity en un contenidor també afecta el text.
• En degradats i imatges mesura el pitjor punt, en totes les amplades de pantalla i a cada diapositiva d'un carrusel.
• Una capa negra d'almenys el 55 % (millor el 60 %) garanteix 4,5:1 al text blanc sobre qualsevol foto; posa-la a la plantilla.
• Els vídeos de fons i els efectes translúcids han de complir en tot moment; el desenfocament no afegeix contrast.
• Les icones, els controls i els indicadors de focus sobre imatges necessiten 3:1: un doble contorn clar i fosc funciona sobre qualsevol fons.