Preferències de l'usuari en CSS: colors forçats, contrast i mode fosc

Cada vegada més persones ajusten el seu sistema operatiu per veure-hi millor: un tema de contrast a Windows, el mode fosc al mòbil, «augmentar el contrast» a macOS, una mida de lletra més gran al navegador. El navegador trasllada aquestes preferències al web, i el CSS les pot respectar o trepitjar. En el curs de color i contrast vas veure aquests modes des del disseny; aquesta lliçó et dona el codi perquè la interfície s'adapti sense perdre informació, amb una atenció especial al mode de colors forçats, el que trenca més webs. El moviment reduït té lliçó pròpia, la següent.

Les preferències que el sistema exposa al web

Les preferències es consulten amb media features (característiques de mitjà) dins de @media, igual que l'amplada de la pantalla:

S'hi suma una preferència que no és una media query: la mida de lletra per defecte del navegador, que només es respecta si fas servir rem i em, com vam veure en la primera lliçó.

El mode de colors forçats a fons

Quan una persona activa un tema de contrast a Windows (per exemple, fons negre amb text groc, o el tema «Desert» de fons clar), el navegador substitueix els colors de la pàgina per una paleta reduïda que ella ha triat. El fan servir persones amb baixa visió, amb fotofòbia, amb migranya o amb dificultats de lectura. El que passa amb el teu CSS:

• Els colors de text, fons, vores i contorns se substitueixen pels del sistema. Els teus colors de marca desapareixen; és el que la persona ha demanat.
• box-shadow i text-shadow s'eliminen.
• Els degradats de fons desapareixen; les imatges amb url() es mantenen, i el navegador pinta un fons opac darrere del text perquè continuï sent llegible.
• Els controls natius (button, input, select) es redibuixen amb els colors del sistema i continuen sent reconeixibles.

Els problemes apareixen quan la interfície transmet forma, estat o informació només amb colors de fons o ombres: un botó que és «un rectangle blau» sense vora es converteix en text solt; una casella de selecció personalitzada feta amb un div acolorit perd la marca; una barra de progrés o un indicador d'estat verd o vermell desapareixen; el focus fet amb box-shadow s'esvaeix.

.boton {
  background: #0b5394;
  color: #ffffff;
  border: 2px solid transparent;   /* apareix amb colors forçats */
}
.boton:focus-visible {
  outline: 3px solid transparent;  /* ídem per al focus */
  box-shadow: 0 0 0 3px #ffbf47;   /* el que es veu en mode normal */
}
.icono { fill: currentColor; }     /* la icona hereta el color del text */

@media (forced-colors: active) {
  .tarjeta-seleccionada { border: 3px solid Highlight; }
  .estado-activo { border-left: 4px solid CanvasText; } /* marca que no depèn del fons */
  .muestra-color { forced-color-adjust: none; } /* aquí el color és el contingut */
}

Dins de forced-colors: active no facis servir colors concrets, que el sistema tornaria a substituir, sinó colors del sistema: paraules clau de CSS que prenen el valor del tema actiu. Les més útils són Canvas i CanvasText (fons i text), LinkText (enllaços), ButtonFace, ButtonText i ButtonBorder (botons), Highlight i HighlightText (selecció i elements actius) i GrayText (deshabilitat). Així, un estat «seleccionat» es pot marcar amb una vora Highlight gruixuda en lloc d'amb un fons de color.

Les icones SVG amb colors fixos a l'atribut fill poden quedar invisibles sobre el fons del sistema (una icona negra sobre fons negre). Amb fill: currentColor hereten el color del text i s'adapten soles. Les imatges de mapa de bits no es toquen: un logotip amb text fosc sobre transparència pot desaparèixer sobre un tema fosc, igual que en el mode fosc que veuràs més avall.

prefers-contrast: més contrast quan es demana

prefers-contrast: more s'activa quan la persona demana més contrast sense arribar a forçar els colors. No serveix per complir 1.4.3 Contrast (mínim): la versió per defecte ja l'ha de complir. És una millora per a qui en necessita encara més:

@media (prefers-contrast: more) {
  :root { --texto-secundario: #1a1a1a; --borde: #000000; }
  .campo { border-width: 2px; }
  .cabecera { background: #ffffff; backdrop-filter: none; } /* fora transparències */
  .placeholder-sutil::placeholder { color: #333333; }
}

Bons candidats per reforçar: textos grisos secundaris, vores fines de camps i targetes, fons semitransparents o amb desenfocament, text sobre fotografies i separadors tènues.

Mode fosc sense trencar l'accessibilitat

Un tema fosc ben fet comença per organitzar els colors en variables (els tokens de disseny) i redefinir-les, no per reescriure cada regla:

:root {
  color-scheme: light dark;  /* els controls natius i les barres de desplaçament s'adapten */
  --fondo: #ffffff;  --texto: #1a1a1a;  --enlace: #0b5394;  --foco: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #121212; --texto: #e8e8e8; --enlace: #8ab4f8; --foco: #ffffff; }
}
body { background: var(--fondo); color: var(--texto); }
a { color: var(--enlace); }

Si el tema fosc s'aplica automàticament segons la preferència del sistema, per a aquesta persona és la pàgina: ha de complir 1.4.3, 1.4.11 Contrast no textual i 1.4.1 Ús del color igual que el tema clar. Mesura el contrast en els dos temes, inclosos l'indicador de focus, les vores dels camps i els missatges d'error, i revisa aquests errors típics:

• Logotips i imatges PNG amb parts fosques sobre transparència que desapareixen sobre fons fosc. Solució: una versió clara amb <picture> i <source media="(prefers-color-scheme: dark)">, o un fons propi a la imatge.
• Ombres com a única separació entre targetes: sobre fons fosc no es veuen; fes servir vores o canvis de lluminositat.
• Colors de marca molt saturats que sobre negre vibren o no contrasten; necessiten una variant més clara.
• Gràfics i mapes amb colors pensats per a fons blanc.

Si ofereixes un selector de tema propi, respecta per defecte la preferència del sistema, desa l'elecció a localStorage, aplica-la abans de pintar la pàgina (per evitar el flaix del tema contrari) i fes el selector accessible: un grup de botons d'opció «Clar, Fosc, Segons el sistema» o un botó amb aria-pressed. La funció light-dark(), més recent, permet escriure els dos valors en una sola declaració; comprova-la en els navegadors que hagis d'admetre abans de dependre'n.

Com comprovar-ho

• A Chrome i Edge, obre les eines de desenvolupament, menú «More tools», panell «Rendering»: permet emular prefers-color-scheme, prefers-contrast, forced-colors i prefers-reduced-motion sense canviar el sistema.
• L'emulació no substitueix la prova real: a Windows, activa un tema de contrast (Configuració, Accessibilitat, Temes de contrast) i recorre el web amb el teclat.
• Cerca al CSS box-shadow fets servir com a focus o vora, background que transmet estat i fill amb colors fixos als SVG.
• Mesura el contrast del tema fosc amb el mateix rigor que el del clar.

Resum

• forced-colors, prefers-contrast i prefers-color-scheme exposen preferències del sistema; la mida de lletra es respecta amb rem.
• En colors forçats desapareixen les ombres i els degradats: fes servir vores i contorns transparents, fill: currentColor i colors del sistema com Highlight o CanvasText.
• Reserva forced-color-adjust: none per a quan el color és el contingut.
• prefers-contrast: more és un reforç, no la manera de complir 1.4.3.
• El tema fosc ha de complir el mateix contrast; organitza'l amb variables i color-scheme, i prova'l amb emulació i amb un tema de contrast real.