Contraste medido, no a ojo: WCAG en un tema oscuro
La primera versión del tema oscuro de Utilitarios se veía elegante en la pantalla donde se diseñó. En otras pantallas, y con más brillo ambiente, era una masa negra plana: las tarjetas no se distinguían del fondo y los bordes de los campos desaparecían. Al medirlo, las tarjetas tenían un contraste de 1,09 a 1 contra el fondo. Prácticamente el mismo color.
Por qué a ojo no funciona
La percepción del contraste depende del monitor, de su brillo, de la luz de la habitación y de cuánto tiempo lleva uno mirando la misma paleta. Quien diseña se acostumbra a sus colores y deja de ver los problemas. Las pautas de accesibilidad WCAG definen el contraste con una fórmula basada en la luminancia relativa de cada color, y esa fórmula da el mismo resultado en cualquier pantalla.
- 4,5 a 1 para texto normal.
- 3 a 1 para texto grande y para componentes de interfaz: bordes de campos, íconos que transmiten información, indicadores de foco.
Un script en vez de una revisión
La solución fue un pequeño script en la raíz del proyecto que calcula el contraste de 32 pares de colores, en tema claro y oscuro: texto sobre fondo, texto secundario sobre tarjeta, acento sobre fondo, borde de campo sobre tarjeta, y así. Cada par tiene su umbral según su uso. Si alguno no cumple, el script lo indica con su valor.
La regla del proyecto es correrlo antes de tocar cualquier color. Un cambio que parece inofensivo, como aclarar un gris para que "se vea más suave", puede dejar un texto secundario por debajo del mínimo.
Tres reglas que salieron de medir
En oscuro, la elevación es más clara
En un tema claro, una tarjeta se separa del fondo con sombra. En uno oscuro, el instinto lleva a hacer las tarjetas más oscuras que el fondo, y el resultado es un hueco. Lo que funciona es lo contrario: cuanto más elevada la capa, más clara. El fondo es el tono más oscuro y cada nivel encima sube un poco la luminosidad.
Sobre negro, bordes y no sombras
Una sombra oscura sobre un fondo casi negro no se ve. En el tema oscuro, la separación entre capas la hacen bordes reales, con un token de borde de tarjeta que cambia de valor según el tema.
Líneas decorativas y bordes de control son cosas distintas
Un separador entre secciones puede ser sutil, porque no transmite información esencial. El borde de un campo de texto sí: indica dónde se escribe. Por eso hay dos tokens. Uno para líneas decorativas, libre de umbral, y otro para bordes de control, que cumple 3 a 1 contra su fondo en ambos temas.
El acento también se mide
El color de acento, un verde azulado, no puede ser el mismo en ambos temas. El tono oscuro que funciona sobre blanco desaparece sobre negro, y el tono vivo que brilla en oscuro no se lee sobre blanco. Cada tema tiene su propia versión, elegida para cumplir el contraste de texto sobre su fondo.
Lo que se gana
Un tema que se lee bien en cualquier pantalla, sin discusiones de gusto sobre si algo "se ve bien". La discusión de diseño pasa a ser sobre qué color elegir dentro de los que cumplen, que es una conversación mucho más productiva. Y el script convierte la accesibilidad en una verificación que cualquiera puede correr, no en una revisión que depende de la vista de alguien.