Casi toda tarjeta de "sonando ahora" saca su fondo de la media de la portada. Es una línea de código y está mal de una forma que se puede medir en cosa de un segundo.
Promedia seis bandas iguales de tonos totalmente saturados y obtienes rgb(128, 128, 128) — saturación 0,0, gris exacto. Promedia medio rojo sobre medio azul y obtienes morado, que no aparece en ninguna parte de la imagen. Probamos tres portadas y en todas el color medio no estaba presente en la portada:
| Portada | Media | Saturación | ¿Está en la portada? |
|---|---|---|---|
| Seis tonos saturados | 128, 128, 128 | 0,0 % | No |
| Medio rojo, medio azul | 128, 0, 128 | 100 % | No |
| Verde sobre casi negro | 27, 103, 52 | 58,5 % | No |
El patrón es el problema: cuanto más colorida la portada, más gris su media, porque los tonos opuestos se cancelan. Una portada rotunda recibe una tarjeta apagada y una monocroma recibe una fiel, que es justo al revés. Esta herramienta cuantiza la portada y elige un cubo poblado y saturado: un color que sí está en la imagen. Puedes cambiarlo a la media de arriba y ver cómo la tarjeta se vuelve gris.
La segunda costumbre es texto blanco sobre el color que saliera del primer paso. Muestreamos 636.056 colores del cubo sRGB y calculamos la razón de contraste WCAG contra blanco y contra negro:
| Texto | Supera 4,5:1 | Supera 3,0:1 |
|---|---|---|
| Siempre blanco | 36,4 % | 56,9 % |
| Siempre negro | 65,3 % | — |
O sea que 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 — bastante legible en tu propia pantalla, a tamaño completo, cuando ya sabes lo que dice.
Esta es la parte que vale la pena saber. Recorrimos los 16.777.216 colores sRGB — no una muestra — y tomamos, para cada uno, el mejor entre su contraste contra blanco y contra negro. El peor caso de todo el espacio de color es 4,58:1.
Eso está por encima del umbral de 4,5:1, en todas partes. No existe un color de fondo en el que fallen a la vez el blanco y el negro. La cifra tampoco es un artefacto del recorrido; coincide exactamente con la forma cerrada. Las dos curvas se cruzan en la luminancia √(1,05 × 0,05) − 0,05 = 0,1791, lo que da 1,05 / 0,2291 = 4,5826.
Así que elegir el color del texto por contraste no es una heurística que suele funcionar. Es legible por construcción, y cuesta una comparación. La tarjeta informa de la razón que consiguió, para que la veas en vez de fiarte.
El recorrido, la forma cerrada y las mediciones de la media están escritos en Por qué las tarjetas de "sonando ahora" salen grises, y por qué el texto cuesta leerlo.
La tarjeta lleva tu portada, tu texto, una barra de progreso y los dos tiempos que escribes. No lleva el logo, la marca denominativa ni los colores de marca de ningún servicio, y no es una captura de nada — es una imagen que hiciste, a partir de una imagen que tenías. Los títulos largos se miden y se recortan con puntos suspensivos en vez de salirse del borde, que es la tercera cosita que casi todos los generadores hacen mal.
No. El archivo lo lee tu navegador, se dibuja en un canvas de la página y se te devuelve como descarga. Nunca llega a un servidor, y por eso sigue funcionando con la pestaña sin conexión una vez cargada la página.
Porque es un color de la portada, no la media de la portada. Suelen ser distintos, y en una portada colorida muy distintos — la media tira hacia el gris según se cancelan los tonos opuestos. Cambia el color de la tarjeta a "media de la portada" para ver la diferencia, o elige el color tú.
Es la razón WCAG entre el texto y el fondo que tiene detrás. 4,5:1 es el umbral para texto normal; por debajo, el texto es medible-mente difícil de leer para mucha gente y en muchas iluminaciones. Elegir entre blanco y negro por color nunca baja de 4,58:1, algo que verificamos sobre todo el espacio de color sRGB.
No es una captura ni la imita — sin logos, sin marcas denominativas, sin colores de marca. Hace una tarjeta de reproductor sencilla con tu portada y lo que escribas, y eso es tuyo para publicarlo donde quieras.
1080 × 1920 para una historia a pantalla completa, 1080 × 1350 para una publicación del feed, 1080 × 1080 si el feed recorta a cuadrado. Los tres quedan por encima de lo que muestra cualquier plataforma grande, así que sobreviven a su reducción con detalle de sobra.
Porque no cabe, y la tarjeta lo mide en vez de dejar que se salga del borde. Los títulos se recortan con puntos suspensivos al ancho disponible; si necesitas el título entero, acórtalo o elige una exportación más alta, donde la tarjeta es más ancha.
No — se dibuja a partir de los dos tiempos que escribes, así que es exactamente igual de exacta que ellos. Si el tiempo transcurrido supera la duración, la barra se llena del todo.
Sí. El dibujo lo hace el mismo canvas que usa el escritorio. Las portadas muy grandes las limita la memoria del navegador, no la herramienta; si la descarga sale en blanco, redimensiona la portada antes.