Presentació del curs en vídeo

0:00 Et donem la benvinguda

Et donem la benvinguda a Color, contrast i tipografia, el tercer curs del nivell 2 de la certificació d'accessibilitat digital d'ADDAW. Parlarem d'una cosa que tothom veu… i gairebé ningú no mesura. És un curs per a qui dissenya, redacta, desenvolupa o gestiona continguts digitals.

0:21 Una errada que es repeteix

El contrast insuficient és un dels errors més repetits del web. L'estudi anual WebAIM Million el troba en prop de 8 de cada 10 pàgines d'inici analitzades. La bona notícia: es mesura de manera objectiva, i es corregeix amb poc esforç.

0:40 Com percebem el color

Començarem per com percebem el color. Per llegir, el que compta és la lluminositat, no el to. Un vermell i un verd poden semblar molt diferents… i tenir gairebé el mateix gris. A més, l'edat, la pantalla i la llum del sol redueixen el contrast que arriba a l'ull.

0:59 Contrast del text

Després aprendràs a mesurar el contrast del text. El criteri 1.4.3 demana 4,5 a 1 per al text normal, i 3 a 1 per al text gran. Veuràs com es calcula, quines eines cal fer servir, i per què també compten els placeholders i els enllaços en tots els seus estats.

1:20 Components i ús del color

El contrast no és només cosa del text. Les vores dels camps, les icones i l'indicador de focus necessiten 3 a 1. I cap informació no pot dependre només del color: afegeix-hi text, una icona o un subratllat. Per exemple, un camp obligatori marcat en vermell necessita també la paraula «obligatori».

1:42 Fons complexos

Després arriben els casos difícils: textos semitransparents, degradats, fotografies i vídeos de fons. Aprendràs a calcular el color que realment es veu, i a mesurar en el pitjor punt. I descobriràs un truc senzill: una capa negra del 60 % a la plantilla protegeix el text blanc sobre qualsevol foto.

2:05 Una paleta accessible

La majoria dels errors de contrast neixen a la paleta. Veuràs com conservar el color de marca ajustant-ne la lluminositat, i com crear escales tonals del 50 al 900. També com documentar una matriu de combinacions permeses. Perquè corregir uns quants colors a la paleta pot eliminar centenars d'errors alhora.

2:28 Tipografia llegible i adaptable

En tipografia començarem per l'essencial: lletres distingibles, una base de 16 píxels i un interlineat d'1,5. Després comprovarem que la persona pugui adaptar el text. L'ha de poder ampliar al 200 %, llegir sense desplaçament horitzontal a 320 píxels, i aplicar el seu propi espaiat sense que res no es talli.

2:51 Composició tipogràfica

També veurem com compondre el text a la pàgina. La jerarquia visual ha de coincidir amb l'estructura d'encapçalaments. El text es llegeix millor alineat a l'esquerra, sense justificar, i amb línies de fins a 80 caràcters. I canviaràs les fonts d'icones per imatges SVG, que no es trenquen.

3:13 Mode fosc i preferències

Moltes persones configuren el seu sistema segons les seves necessitats. Aprendràs a respectar el mode fosc, donant a cada tema el seu propi contrast. També a mantenir visibles els botons amb el contrast forçat de Windows. I a reduir el moviment i les animacions quan algú ho demana.

3:33 Per què importa

Pensa en la Carmen, de 72 anys. Demana cita al seu ajuntament des del mòbil, enmig del carrer. I un gris clar li impedeix acabar el tràmit. El contrast ajuda les persones grans, les que tenen baixa visió, i qualsevol que llegeixi al sol. A més, és obligatori al sector públic i en serveis com la banca o el comerç electrònic.

3:57 Què sabràs fer

En acabar, sabràs mesurar i corregir el contrast, dissenyar paletes i tipografies accessibles, i revisar una pàgina completa amb una llista de comprovació. T'espera un cas pràctic amb una seu electrònica municipal, resolt pas a pas. Obre el navegador, tingues a mà un comprovador de contrast… i comencem!