El efecto aberración cromática en un sitio web

La aberración cromática es ese borde rojo de un lado, cian del otro, que ribetea los contornos de una imagen tomada con un objetivo imperfecto. La biblioteca del estudio la aplica al texto, sobre todo a un título: las letras parecen salir de una pantalla, de una cámara, de un vídeo un poco forzado. También se la llama franja de color, y es el nombre que le da el estudio.

Cuidados líquidos, gestos lentos.Sin

Cuidados líquidos, gestos lentos.Franja cromática

En la demostración, el mismo título está colocado dos veces sobre la imagen de portada. A la derecha, cada letra está ribeteada con un hilo rojo a la izquierda y un hilo cian a la derecha, separados dos píxeles.

De dónde viene el efecto

El vidrio no desvía todos los colores de la misma manera. En la mayoría de los vidrios ópticos, las longitudes de onda cortas, el azul, se refractan con más fuerza que las largas, el rojo (Nikon). Una lente no lleva, pues, todos los colores de un punto al mismo lugar.

Nikon distingue dos formas. La aberración axial hace que los colores se corran delante y detrás del punto de enfoque. La aberración lateral hace variar el tamaño de la imagen según el color: es la que produce franjas de color, solo hacia los bordes de la imagen, y por parejas de colores complementarios, rojo con cian, azul con amarillo. Los fabricantes la combaten combinando lentes de vidrios distintos, y con vidrio de baja dispersión; el fotógrafo la reduce además cerrando el diafragma.

Lo que la óptica corrige, la imagen digital lo imitó después. Los motores de videojuegos ofrecen la aberración cromática como efecto añadido tras el renderizado: la de Unity separa los colores a lo largo de los bordes de la imagen, para reproducir lo que hace un objetivo real, y su franja por defecto es roja y azul (Unity). El defecto del objetivo se ha convertido en la señal de una imagen filmada, de una pantalla, de una señal un poco saturada. En la web, sirve para lo mismo, con más discreción.

Cuándo usarla

Ninguna de las veinticuatro maquetaciones listas del estudio la aplica por defecto. Conviene a los oficios cuyo taller es la pantalla:

• un estudio 3D, un estudio de motion design, un desarrollador de videojuegos;
• un sello, un colectivo de música electrónica, una sala de conciertos;
• un evento nocturno, un festival de cine;
• una agencia creativa que quiere un título que llame la atención.

Va sobre un título grande, el de la primera pantalla por ejemplo, y sobre unas pocas palabras. Nunca sobre un párrafo.

Mejor no ponerla:

• sobre el texto corriente: un contorno desdoblado se lee más despacio, y cansa la vista a lo largo;
• en tamaños pequeños: el desplazamiento es fijo en píxeles, y dos píxeles sobre una letra de 14 la desdoblan claramente;
• para un oficio basado en la confianza: una consulta de salud, un abogado, un contable. Un título que parece correrse pasa allí por un defecto de impresión;
• con un tipo de letra muy fino: un trazo de uno o dos píxeles de grosor desaparece entre sus dos franjas. Un tipo de letra grueso, de formas simples, las lleva mucho mejor.

La dosis justa

En la biblioteca, la franja desplaza una sombra roja 2 píxeles a la izquierda, al 55 % de opacidad, y una sombra cian a la derecha, al 45 %, sin ningún desenfoque. Es discreta sobre un título de cartel, y es a propósito: el efecto debe notarse en la segunda lectura. Más ancha, se sale de la óptica para entrar en un «glitch» declarado, la imagen digital que se desgarra.

Como el desplazamiento está en píxeles, no crece con el texto: sobre un título de 80 píxeles, los mismos dos píxeles se ven menos que sobre un título de 30.

A diferencia del duotono y del resplandor, la franja no lee la paleta del sitio: sus dos colores son fijos, los de la óptica.

La biblioteca solo aplica un tratamiento a la vez. Las texturas pueden sumarse encima, dos como mucho: las líneas de trama, que recuerdan las líneas de un monitor, prolongan bien la idea de pantalla.

Lo que cuesta

Casi nada. La biblioteca aplica la franja al texto y no a los medios, y su hoja de estilos dice por qué: sobre un vídeo, habría que apilar tres copias de la imagen, una por color, con un coste desproporcionado para el efecto. Sobre un título, bastan dos sombras.

Estas sombras no tienen desenfoque, y es lo que las hace ligeras: todo lo que exige un desenfoque, una sombra difuminada por ejemplo, tarda más en pintarse que una forma nítida (web.dev). El título no se mueve, y la franja tampoco: ningún temblor ni desplazamiento animado, nada que recalcular en cada imagen.

Accesibilidad

• Contraste. La letra conserva su color; solo cambian sus bordes. Mide el contraste del título sobre la imagen en el lugar menos favorable: al menos 3 a 1 para un título grande, a partir de unos 24 píxeles (18,5 en negrita), y 4,5 a 1 para el texto corriente (W3C, WCAG 2.2). El W3C cuenta un contorno estrecho alrededor de una letra como parte de la letra: la franja también debe, pues, destacar del fondo.
• Movimiento reducido. La franja está quieta. Cuando el visitante pide a su aparato menos animación (prefers-reduced-motion), la biblioteca no tiene nada que quitar.
• Sin destellos. El «glitch» se juega a menudo a sacudidas: colores que saltan, letras que tiemblan. Aquí nada se mueve. Una página no debe destellar más de tres veces por segundo, so pena de provocar crisis en las personas fotosensibles (W3C, criterio 2.3.1).

Cómo está hecha

Dos sombras de texto, text-shadow, sin desenfoque. Cada una se describe con un desplazamiento horizontal, un desplazamiento vertical, un desenfoque opcional y un color; un desplazamiento horizontal negativo envía la sombra a la izquierda (MDN). La biblioteca regula la separación con una variable, --frange, fijada en 2:

.m-frange {
  text-shadow:
    calc(var(--frange, 2) * -1px) 0 0 rgba(255, 60, 60, .55),
    calc(var(--frange, 2) *  1px) 0 0 rgba(0, 220, 255, .45);
}

Las sombras se dibujan bajo la letra. Donde la cubren, la letra gana, y de cada sombra solo queda un hilo en un borde: toda la ilusión está ahí.

En el estudio

La franja de color es uno de los tres tratamientos de la biblioteca, apartados de las diez texturas: se coloca sobre un texto elegido, en vez de cubrir la página. No tiene etapa propia en el recorrido, y ninguna de las veinticuatro maquetaciones listas la aplica por defecto.