Los colores que sobreviven al feed de YouTube

Dos problemas distintos en una sola pregunta

«Qué colores funcionan en una miniatura» son en realidad dos preguntas con respuestas distintas, y mezclarlas es la razón de que los consejos que encuentras sean tan vagos.

La primera es la separación de la interfaz: tu encuadre tiene un borde, y ese borde queda pegado al fondo de YouTube. Esta se puede calcular, y de ella habla casi toda la guía.

La segunda es la separación de tus vecinos: dentro del encuadre no compites con la interfaz sino con las otras miniaturas de la fila. Esa no tiene respuesta universal, porque depende por completo de cómo sean esas miniaturas.

La interfaz es exactamente uno de dos colores

La página de YouTube es casi negra en modo oscuro y blanca en modo claro. El valor oscuro es #0F0F0F, lo bastante cerca del negro para que pensarlo como negro sea el error: es un gris oscuro, y una miniatura realmente negra es más oscura que la página en la que está.

No puedes saber cuál de los dos usa un espectador. El mismo archivo tiene que aguantar en ambos, lo que significa que el contraste útil de un color no es su mejor caso sino el peor.

Esos dos valores son lo que reproduce la maqueta de la herramienta de vista previa, y la razón de que tenga un interruptor claro/oscuro: es el mismo archivo contra los dos fondos en los que va a acabar.

Cuáles son los números

Relaciones de contraste, calculadas de la forma estándar, para una serie de colores que plausiblemente pondrías en el borde de una miniatura. La última columna es la que importa, porque es el caso que no puedes descartar: Son relaciones de contraste en el sentido en que las definen las WCAG, así que los números significan aquí lo mismo que en cualquier otro sitio de la web.

Miden la separación entre dos colores planos, no la legibilidad del texto — eso tiene sus propios números, en la guía sobre el tamaño del texto. Lee la tabla como: cuánto se ve el límite donde mi miniatura acaba y empieza la página.

El resultado es lo contrario del consejo habitual

Recorre la última columna y el patrón no es el que predice «usa colores brillantes». Las opciones más luminosas son las peores, porque brillante casi siempre significa mucha luminosidad, y mucha luminosidad es invisible contra el blanco.

Un borde blanco marca 1,0:1 en modo claro: literalmente ningún límite. Amarillo, cian y gris claro están apenas mejor, entre 1,3 y 1,5. Todos ellos se ven magníficos en una captura en modo oscuro, que es exactamente cómo se eligen.

Los colores que sobreviven a los dos fondos son los saturados de luminosidad media: rojo, azul, magenta, naranja, e incluso un gris medio cualquiera. Ninguno gana ninguna de las dos columnas, y ese es el punto: son los únicos que nunca pierden mal.

Dónde vale esta regla y dónde no

Es una regla sobre la banda exterior del encuadre, no sobre todo el diseño. El centro de una miniatura nunca toca la interfaz, así que un centro blanco no es un problema: un borde blanco sí.

Es una restricción más pequeña de lo que parece, y muy concreta: son los últimos puntos porcentuales del encuadre los que deciden si tu miniatura se lee como un objeto sobre la página o se disuelve en ella. Un borde que se desangra no solo queda descuidado: hace la miniatura más pequeña, porque la parte disuelta en el fondo deja de contar como tuya.

Dentro del encuadre la competición cambia

Una vez que el borde aguanta, el color deja de ser un problema medible y pasa a ser comparativo. No hay un color mejor para el interior de una miniatura, porque lo único que importa es qué tiene al lado.

Una miniatura roja saturada destaca en una fila de grises apagados y desaparece en una fila de rojos saturados — y la fila no la eliges tú. En la mayoría de nichos la convención converge, lo que significa que el color que se lee como más profesional es también el que está usando todo el mundo.

Por eso la pregunta útil nunca es «qué color es mejor» sino «qué color falta aquí». Mirar tu diseño en el feed en el que va a aparecer lo responde en unos segundos, y ninguna cantidad de teoría lo hace.

El tono cede antes que la luminosidad

Otra razón para pensar en claro y oscuro en lugar de en nombres de colores: al tamaño al que una miniatura se ve de verdad, el contraste de tono es lo primero que se derrumba.

Rojo sobre azul es vivo a tamaño completo y barro a tamaño de ficha, porque unos pocos píxeles de cada uno se promedian y lo que sobrevive es su luminosidad parecida. Claro contra oscuro sobrevive al mismo trato, porque promediar claro y oscuro sigue dejando una diferencia.

La comprobación es mirar el diseño en escala de grises. Si se cae sin color, se estaba apoyando en el color, y la escala a la que se mostrará se lleva el color primero.

El borde blanco, y cuándo es una muleta

Un borde fino blanco o brillante alrededor de toda la miniatura es el arreglo estándar para el borde que se desangra, y funciona — en modo oscuro. En modo claro es el caso invisible de la tabla, así que un borde elegido para un tema puede ser ningún borde en el otro.

La versión que sobrevive a los dos es un borde de luminosidad media, o un borde a dos tonos, o simplemente una composición cuya banda exterior lleva contenido de medio tono en lugar de un extremo. La última es la que nunca parece un remiendo.

También conviene preguntarse si el borde resuelve un problema o lo tapa. Un diseño sin un sujeto claro no se vuelve más claro con un marco: se vuelve un diseño poco claro con etiqueta.

Una comprobación de tres minutos

Nada de esto necesita una teoría del color. Necesita tres miradas al mismo archivo, en el orden que encuentra los problemas más rápido.

1. Mira el borde en los dos fondosPon la miniatura sobre blanco y sobre #0F0F0F. Si el límite desaparece en alguno, ese es el color a cambiar — y el cambio es solo de la banda exterior.
2. Míralo en escala de grisesSi el diseño deja de funcionar, lo llevaba el tono, que es lo primero que se lleva el tamaño de visualización.
3. Míralo junto a sus vecinosEn el feed en el que va a aparecer, al tamaño al que va a aparecer. Es el único paso que puede decirte si el color que sobrevive a la interfaz también destaca en la fila.

Qué llevarse de aquí

La versión corta: colores saturados de luminosidad media en los bordes, porque son los únicos que aguantan contra las dos interfaces. Los extremos de claro y oscuro dentro del encuadre, donde no cuestan nada. Contraste de luminosidad en lugar de tono, porque el tono no sobrevive al tamaño. Y la elección real hecha contra la fila en la que vas a aparecer, no contra una teoría.

Esa última parte es el único paso que ningún artículo puede hacer por ti, este incluido, porque depende de un conjunto de miniaturas que cambia cada semana.

Las preguntas que hace todo el mundo