Mode fosc, alt contrast i preferències de l'usuari

Cada vegada més persones configuren el sistema operatiu segons les seves necessitats: tema fosc per reduir la fatiga o l'enlluernament, alt contrast de Windows per veure-hi amb molt poca visió, text més gran, menys animacions, colors invertits. Un disseny accessible no imposa una única aparença: respecta aquestes preferències i s'assegura que, quan el sistema canvia els colors, la pàgina continua sent usable. Aquesta lliçó explica quines preferències hi ha, com detectar-les amb CSS i quins errors cal evitar.

Per què importen les preferències del sistema

Les preferències de l'usuari són, en molts casos, tecnologia de suport: una persona amb fotofòbia, migranya crònica o cataractes pot dependre del mode fosc; una persona amb baixa visió severa, del mode d'alt contrast; algú amb un trastorn vestibular, de la reducció de moviment. Les WCAG no exigeixen oferir un mode fosc, però si el web l'ofereix (i encara més si l'aplica automàticament segons la preferència del sistema), s'ha d'avaluar i ha de complir els mateixos criteris de contrast que el clar, i diversos criteris (1.4.3, 1.4.11, 2.3.3) es veuen afectats directament per com es tracta cada mode.

Mode fosc

El mode fosc es detecta amb la media query prefers-color-scheme. Bones pràctiques:

• Respecta la preferència del sistema per defecte i, si ofereixes un selector manual al web, recorda l'elecció.
• Torna a mesurar el contrast. Invertir els colors no garanteix 4,5:1. El text blanc pur sobre negre pur (21:1) enlluerna i produeix l'efecte «halo» en persones amb astigmatisme; és preferible un gris molt clar (#E0E0E0 o similar) sobre un gris molt fosc (#121212), que manté ràtios molt altes sense l'enlluernament.
• Els colors d'accent canvien. Un blau d'enllaç que compleix sobre blanc (#0056B3, 7,0:1) sobre #121212 només dona 2,7:1. Necessitaràs una variant més clara del mateix color per al tema fosc; per això, com vas veure a la lliçó sobre paletes, la matriu de combinacions es repeteix per a cada tema.
• Imatges i logotips: prepara'n versions per a fons fosc o fes servir SVG amb currentColor. Un logotip negre sobre fons fosc desapareix.
• Ombres i vores: en fosc, les ombres deixen de veure's; fes servir vores o canvis de to per delimitar els components (recorda 1.4.11).

:root {
  --fondo: #FFFFFF; --texto: #1A1A1A; --enlace: #0056B3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121212; --texto: #E0E0E0; --enlace: #8AB4F8; /* 8,9:1 sobre #121212 */
  }
}
body { background: var(--fondo); color: var(--texto); }
a { color: var(--enlace); text-decoration: underline; }

Alt contrast de Windows (mode de contrast forçat)

El «Contrast alt» de Windows (a Windows 11, «Temes de contrast») substitueix tots els colors de la pàgina per una paleta del sistema: fons, text, enllaços, botons, text seleccionat. El navegador l'aplica a tot, ignorant gairebé tot el CSS de color. Per a qui el fa servir és imprescindible, i trenca molts dissenys:

• Els fons de color desapareixen, inclosos els dels botons: un botó que només era un rectangle de color passa a ser text solt. Solució: donar als botons una vora (encara que sigui transparent en el tema normal; en contrast forçat es pinta amb el color del sistema).
• Les imatges de fons CSS no s'adapten: els degradats s'eliminen i una icona posada com a background-image conserva els colors originals, de manera que una icona fosca pot quedar invisible sobre el fons negre del tema. Fes servir <img> amb la seva alternativa o SVG en línia amb currentColor.
• Els indicadors d'estat basats en el color de fons (pestanya activa, fila seleccionada) s'igualen. Afegeix-hi un indicador addicional (vora, subratllat, icona).
• L'outline del focus es respecta: no l'eliminis mai amb outline: none sense alternativa.

La media query forced-colors: active permet ajustos específics, i les paraules clau de color del sistema (CanvasText, LinkText, ButtonText, Highlight) permeten fer servir la paleta de l'usuari sense trencar-la. La propietat forced-color-adjust: none desactiva la substitució en un element, però només s'ha de fer servir en casos molt justificats (un selector de color, per exemple), perquè anul·la l'ajuda que la persona ha demanat.

/* El botó conserva la forma en contrast forçat gràcies a la vora */
.boton { background: #0056B3; color: #fff; border: 2px solid transparent; }

@media (forced-colors: active) {
  .pestana-activa { border-bottom: 3px solid CanvasText; }
  .icono-svg { fill: currentColor; }
}

Altres preferències

• prefers-reduced-motion: la persona ha demanat menys animacions. Desactiva o redueix transicions, parallax, reproducció automàtica de carrusels i animacions decoratives. Es relaciona amb 2.3.3 Animació a partir d'interaccions (AAA) i amb 2.2.2 Posar en pausa, aturar, amagar (A).
• prefers-contrast: more: la persona vol més contrast (a macOS, «Augmentar el contrast»). Pots engruixir les vores i enfosquir els textos secundaris.
• prefers-reduced-transparency: evita fons translúcids que redueixen la llegibilitat.
• Mida de lletra del sistema: si fas servir unitats rem, la pàgina respecta automàticament la mida de lletra configurada al navegador o al sistema.
• Fulls d'estil de l'usuari i extensions (lectors per a la dislèxia, modes de lectura, inversió de colors): funcionen si el teu HTML és semàntic i el teu CSS no força colors amb !important per tot arreu.

Resum

• Les preferències del sistema (mode fosc, alt contrast, moviment reduït) són tecnologia de suport per a moltes persones; detecta-les amb media queries.
• En mode fosc torna a mesurar el contrast: evita el blanc pur sobre negre pur i prepara variants dels colors d'accent i del logotip.
• En contrast forçat desapareixen els fons de color i les imatges CSS no s'adapten a la paleta: fes servir vores als botons, SVG en línia i colors del sistema; no facis servir forced-color-adjust: none excepte en casos justificats.
• prefers-reduced-motion, prefers-contrast i les unitats rem completen el respecte a les preferències.
• Un giny d'accessibilitat no substitueix el respecte de les preferències del sistema ni un codi accessible.