Por Qué las Tarjetas de "Sonando Ahora" Salen Grises

Una tarjeta de "sonando ahora" son dos decisiones de color y algo de maquetación. Las dos decisiones suelen tomarlas una sola línea de código, y las dos están mal de una forma que se puede medir en cosa de un segundo cada una.

La primera línea saca el fondo de la media de la portada. La segunda escribe el texto en blanco. Esto es lo que hace cada una en realidad.

La media de una imagen es un color que la imagen no contiene

Toma seis bandas iguales de tonos totalmente saturados — rojo, amarillo, verde, cian, azul, magenta — y promedia cada píxel. La respuesta es rgb(128, 128, 128). Saturación 0,0. Gris exacto, a partir de una imagen que no tiene gris en ninguna parte.

Y no es la rareza de una única imagen amañada. Medimos tres:

En las tres el color medio estaba ausente de la portada. Medio rojo sobre medio azul promedia a morado; en la imagen no hay morado. Verde sobre casi negro promedia a un verde más oscuro y más apagado que el verde que hay.

Y el patrón detrás es lo que importa: cuanto más colorida la portada, más gris su media, porque los tonos opuestos se cancelan. Una portada rotunda recibe una tarjeta apagada. Una monocroma recibe una fiel. Es justo al revés de lo que quiere cualquiera, y es la razón de que tantas de estas tarjetas parezcan el mismo rectángulo desvaído dieras lo que dieras de comer.

Qué elegir en su lugar

El arreglo es elegir un color que sí esté en la imagen. Cuantiza la portada en cubos — dieciséis niveles por canal sobran —, cuenta los píxeles de cada uno y toma uno poblado, con peso hacia la saturación para que el blanco del papel y el negro de la sombra no ganen por pura superficie.

En la portada de seis tonos eso devuelve un rojo que la imagen contiene de verdad. En una portada real devuelve el color que habrías señalado. La diferencia es una pasada sobre una miniatura de 96 × 96, que no cuesta nada.

El texto blanco falla en casi dos tercios de los colores

Ahora la segunda línea. Sea cual sea el color que salió del primer paso, el texto entra en blanco.

Muestreamos 636.056 colores del cubo sRGB y calculamos la razón de contraste WCAG de cada uno contra blanco y contra negro. 4,5:1 es el umbral para texto normal:

Una tarjeta que siempre escribe en blanco queda por debajo del umbral de legibilidad en el 63,6 % de los colores en los que puede caer. No ilegible de forma dramática — es legible en tu propia pantalla, a tamaño completo, cuando ya sabes lo que dice. Deja de serlo en el móvil de otra persona, a plena luz, a tamaño de miniatura, que es el único sitio donde de verdad se va a ver.

Esta nunca hace falta perderla

Aquí está la parte que vale la pena saber, y es más fuerte que una heurística.

Recorrimos los 16.777.216 colores sRGB — el espacio entero, no una muestra — y tomamos, para cada color, el mejor entre su contraste contra blanco y contra negro. El peor caso de todo el cubo es 4,58:1, en rgb(207, 13, 204).

4,58 está por encima de 4,5. No existe un color de fondo en el que fallen el umbral a la vez el blanco y el negro. Elegir entre ellos color por color no es una regla que suele funcionar; es legible por construcción, en todas partes, y cuesta una comparación:

function pickText(bg) {
    return contrast(bg, WHITE) >= contrast(bg, BLACK) ? WHITE : BLACK;
}

La cifra medida tampoco es un artefacto del recorrido. Coincide exactamente con la forma cerrada. El contraste contra blanco baja según se aclara el fondo y el contraste contra negro sube, así que el peor caso está donde se cruzan las dos curvas — en la luminancia relativa √(1,05 × 0,05) − 0,05 = 0,1791, lo que da 1,05 / 0,2291 = 4,5826. El recorrido exhaustivo y el álgebra coinciden en cuatro decimales.

La tercera cosita

Ya que estamos: los títulos de canción son largos, y casi todos los generadores los dejan salirse del borde de la tarjeta o encogen la fuente hasta que la línea del artista parece otro diseño. Un canvas sabe medir texto — ctx.measureText(s).width —, así que el comportamiento honesto es medir, recortar con puntos suspensivos al ancho disponible y dejar el cuerpo en paz. Son tres líneas y no lo hace nadie.

Qué hacer cuando hagas una

• Saca el color de la tarjeta de la portada, no de una media de ella. La media suele ser un color que la portada no contiene, y cuanto más colorida sea más gris se vuelve.
• Elige el color del texto por contraste, no por costumbre. No puede fallar: el peor caso de todo el espacio de color es 4,58:1.
• Mira el número, no tu ojo. Ya sabes lo que dice el título, lo que te convierte en el peor juez posible de si se lee.
• Mide los títulos largos y recórtalos, en vez de dejarlos salirse del borde o encoger la tipografía.

Pruébalo

Nuestro generador de tarjeta sonando ahora hace todo lo anterior y te enseña la segunda tarjeta junto a la tuya — color medio, texto blanco, como se hace siempre — para que la diferencia se vea en vez de afirmarse. Informa de la razón de contraste que consiguió y de la que habría dado el texto blanco. Todo ocurre en tu navegador; la portada nunca se sube.

Si la portada todavía no es cuadrada, el redimensionador de imágenes la deja lista primero, y el verificador de zona segura enseña qué tapará la interfaz de la historia cuando publiques la tarjeta.

Preguntas frecuentes