Dissenyar una paleta de color accessible

La majoria de les errades de contrast d'un web no són decisions aïllades d'un dissenyador despistat: vénen d'una paleta de color que mai no es va dissenyar pensant en el contrast. Si el gris dels textos secundaris no arriba a 4,5:1, fallarà en centenars de pàgines alhora; si la paleta ja garanteix combinacions vàlides, l'equip l'encertarà gairebé sense pensar-hi. Aquesta lliçó explica com construir o revisar una paleta accessible partint dels colors de marca, com documentar quines combinacions es poden fer servir i com tractar els colors d'estat (error, èxit, avís).

Partir de la marca sense trair-la

El primer conflicte sol ser el color corporatiu. Imagina una entitat el color de marca de la qual és un turquesa #1AA39A. Aquestes en són les xifres:

• Sobre blanc dona 3,1:1: no serveix per al text normal, però sí per al text gran (24 px o més, o 18,66 px en negreta), vores de components, icones i il·lustracions.
• Text blanc sobre aquest turquesa: també 3,1:1, així que un botó amb text blanc de 16 px no compleix 1.4.3.
• Text gairebé negre #1A1A1A sobre el turquesa: 5,6:1. El mateix botó amb text fosc sí que compleix.

No cal canviar la marca. Hi ha tres estratègies, combinables:

1. Fer servir el color de marca on el seu contrast és suficient: superfícies grans, il·lustracions, vores, icones i text gran.
2. Invertir la combinació: text fosc sobre el color de marca en lloc de text blanc.
3. Crear tons derivats més foscos (per al text i els enllaços) i més clars (per als fons), del mateix to. La identitat es manté perquè el to és el mateix; el que canvia és la lluminositat, que, com vam veure a la lliçó sobre la percepció, és el que determina el contrast.

Escales tonals

Els sistemes de disseny organitzen cada color en una escala de tons numerats, normalment del 50 (el més clar) al 900 (el més fosc). Aquesta seria l'escala del turquesa del nostre exemple, amb el seu contrast davant d'un fons blanc i davant d'un fons fosc #121212:

To	Color	Sobre blanc	Sobre #121212
50	#E9FBFA	1,1:1	17,5:1
100	#CAF6F3	1,2:1	16,1:1
300	#65E6DB	1,5:1	12,4:1
Marca	#1AA39A	3,1:1	6,0:1
700	#13766E	5,5:1	3,4:1
800	#0E5852	8,3:1	2,3:1
900	#0A3D39	12,1:1	1,6:1

La taula ja respon moltes preguntes. Per als enllaços i el text sobre blanc serveixen el 700, el 800 i el 900. Per als fons suaus darrere de text fosc, el 50 i el 100. En un tema fosc, l'escala es fa servir a l'inrevés: el 300 o el mateix color de marca per als enllaços i els accents, i mai el 800 o el 900.

Alguns sistemes de disseny públics, com el del Govern dels Estats Units (USWDS), numeren els tons segons la luminància, de manera que la diferència entre dos números indica directament si la parella compleix 3:1, 4,5:1 o 7:1. És una idea útil per a qualsevol paleta: si la numeració reflecteix la lluminositat, l'equip pot raonar sobre el contrast sense calculadora.

Infografia · Procés

Com construir una paleta de color accessible

Sis passos per passar dels colors de marca a combinacions que compleixen 1.4.3 i 1.4.11

1. 1Pas 1: Inventariar els colorsRecull tots els colors de marca, d'interfície i d'estats que es fan servir avui
2. 2Pas 2: Crear escales tonalsGenera per a cada color una escala de clar a fosc, numerada del 50 al 900
3. 3Pas 3: Mesurar les combinacionsCalcula la ràtio de cada parella text/fons i marca les que arriben a 4,5:1 i 3:1
4. 4Pas 4: Assignar funcionsDecideix quins tons són text, fons, vora, focus i estat, amb la seva ràtio
5. 5Pas 5: Afegir el tema foscRepeteix la matriu amb fons foscos i variants clares dels accents
6. 6Pas 6: Documentar i vigilarPublica les parelles permeses i prohibides i revisa cada color nou

Llegeix la infografia com a text

Procés de sis passos en seqüència. Primer, inventariar els colors: recollir tots els de marca, d'interfície i d'estats que es fan servir avui. Segon, crear escales tonals: generar per a cada color una escala del més clar al més fosc, numerada del 50 al 900. Tercer, mesurar les combinacions: calcular la ràtio de cada parella de text i fons i marcar les que assoleixen 4,5:1 i 3:1. Quart, assignar funcions: decidir quins tons són text, fons, vora, focus i estat, amb la seva ràtio. Cinquè, afegir el tema fosc: repetir la matriu amb fons foscos i variants clares dels accents. Sisè, documentar i vigilar: publicar les parelles permeses i prohibides i revisar cada color nou abans de fer-lo servir.

La matriu de combinacions

El lliurable més útil d'una paleta accessible és una matriu que digui quin text pot anar sobre quin fons i per a quin ús. Un extracte:

Text o element	Fons	Ràtio	Ús permès
#1A1A1A	Blanc	17,4:1	Qualsevol text
Turquesa 700 #13766E	Blanc	5,5:1	Enllaços i text normal
Turquesa 700 #13766E	Turquesa 50 #E9FBFA	5,1:1	Text normal en avisos i targetes
#1A1A1A	Marca #1AA39A	5,6:1	Text de botons primaris
Blanc	Marca #1AA39A	3,1:1	Només text gran
Marca #1AA39A	Blanc	3,1:1	Vores, icones, focus i text gran
Marca #1AA39A	Turquesa 50 #E9FBFA	2,9:1	Prohibit (no arriba a 3:1)

Fixa't en l'última fila: el color de marca, que compleix 3:1 sobre blanc, deixa de complir-lo sobre el seu propi to 50. Les combinacions es validen parella per parella, mai color per color.

Colors semàntics i estats

Els colors d'error, èxit, avís i informació necessiten, com a mínim, dues variants cadascun: una de fosca per al text i les icones sobre fons clar i una altra de molt clara per al fons dels missatges.

• Error: vermell #C62828 (5,6:1 sobre blanc) per al text i les icones; un rosa molt clar #FDECEA de fons, sobre el qual el mateix vermell dona 4,9:1.
• Èxit: verd #2E7D32 (5,1:1 sobre blanc). Sobre el fons verd clar #E8F5E9 baixa a 4,6:1: compleix, però sense marge.
• Avís: l'ambre és el color més difícil. Un ambre #F2C14E com a text sobre blanc no compleix; com a fons, amb text #1A1A1A, dona 10,4:1. Si necessites text ambre, enfosqueix-lo cap al marró: #8A5A00 dona 5,9:1 sobre blanc.
• Informació: un blau #1565C0 dona 5,7:1 sobre blanc.

Recorda el que vam veure a la lliçó sobre 1.4.1: un bon contrast no n'hi ha prou si l'estat es comunica només pel color. Cada missatge porta la seva icona i el seu text («Error», «Desat correctament»).

Estats dels components

Cada color interactiu necessita la seva família d'estats: normal, hover (en passar-hi el ratolí), focus, actiu, visitat i deshabilitat. Tots, excepte el deshabilitat, han de mantenir el contrast. Una pràctica habitual i segura és enfosquir un to en hover (del 700 al 800, per exemple) en lloc d'aclarir-lo. El color de l'indicador de focus necessita 3:1 contra el que l'envolta, com vam veure a la lliçó sobre 1.4.11; el disseny detallat del focus el treballaràs al curs de disseny d'interfícies.

Documentar i mantenir la paleta

Una paleta accessible es degrada si no es documenta. Bones pràctiques:

• Anomenar els colors per la seva funció (text principal, text secundari, enllaç, vora de camp, fons d'error), no per l'aparença. Així ningú no fa servir «el gris clar» per a un text perquè «queda bé».
• Anotar la ràtio al costat de cada combinació permesa a la guia d'estil i a la biblioteca de Figma.
• Repetir la matriu per al tema fosc, amb les seves pròpies variants d'accent (ho veuràs a la lliçó sobre el mode fosc).
• Revisar cada color nou abans d'incorporar-lo: una campanya d'estiu amb un groc nou és la manera més ràpida de trencar una paleta.

/* Incorrecte: noms per aparença, sense informació d'ús */
:root { --gris-claro: #999999; --turquesa: #1AA39A; }

/* Correcte: noms per funció, amb la ràtio documentada */
:root {
  --color-texto: #1A1A1A;            /* 17,4:1 sobre blanc */
  --color-texto-secundario: #595959; /* 7,0:1 sobre blanc, 6,4:1 sobre #F5F5F5 */
  --color-enlace: #13766E;           /* 5,5:1 sobre blanc */
  --color-boton-fondo: #1AA39A;
  --color-boton-texto: #1A1A1A;      /* 5,6:1 sobre el fons del botó */
  --color-borde-campo: #767676;      /* 4,5:1 sobre blanc; mínim exigit, 3:1 */
}

Portar aquests valors a tokens de disseny compartits entre Figma i el codi és tasca dels sistemes de disseny, que es tracten al nivell 7.

Resum

• Les errades de contrast solen venir de la paleta: corregir-la corregeix moltes pàgines alhora.
• El color de marca es conserva fent-lo servir on el seu contrast és suficient, invertint la combinació (text fosc sobre la marca) o creant tons derivats del mateix to.
• Organitza cada color en una escala tonal i construeix una matriu de combinacions permeses, amb una columna per cada fons que facis servir.
• Els colors semàntics necessiten una variant per al text i una altra per al fons; l'ambre és el més difícil i gairebé mai no serveix com a text.
• Anomena els colors per funció, documenta les ràtios, repeteix la matriu per al tema fosc i revisa cada color nou.