Un rebranding que todavía no se ha anunciado. Once colores nuevos y la pregunta de siempre antes de soltarlo: qué combinaciones de texto y fondo cumplen el 4,5:1 de la WCAG y cuáles no. A mano salen unas cuarenta parejas. Y los comprobadores de contraste que todo el mundo usa piden exactamente lo que no puedes pegar: los hex de una marca bajo embargo.
Así que un rato en el IDE del navegador: una rejilla con todos los pares, verde si pasa, rojo si no. La primera versión estuvo lista en media hora, con una fórmula que suena de lo más sensata: el brillo de un color es la media de sus canales, (R+G+B)/3, y se comparan.
Verde y azul, la misma nota
La tabla se veía bien hasta que me fijé en dos celdas. #00FF00 sobre blanco y #0000FF sobre blanco tenían el mismo veredicto. Normal: los dos dan 85 de media. Pero basta mirarlos un segundo para saber que el verde sobre blanco no hay quien lo lea y el azul se lee perfectamente.
El fallo no estaba en el código, estaba en la fórmula. Dos cosas que la media se salta:
- Los canales no pesan igual. El ojo saca casi todo el brillo del verde (0,7152), bastante menos del rojo (0,2126) y casi nada del azul (0,0722).
- El sRGB no es lineal. Hay que deshacer la gamma de cada canal antes de ponderar, o el 128 del medio te miente.
Con la luminancia relativa de verdad, el amarillo puro sobre blanco —que mi versión ingenua daba por bueno— se queda en 1,07:1. Prácticamente invisible. Y el azul sobre blanco pasa de sobra.
Lo que le pedí a la IA no fue la fórmula
La fórmula está en la especificación y la copia cualquiera. Lo que de verdad ahorró la tarde fue pedirle otra cosa: dame los pares que separan la versión ingenua de la correcta. Salió una tabla de casos con el amarillo sobre blanco, el azul sobre blanco, un gris medio donde las dos coinciden y el cian, que es el otro que engaña. Eso es lo que convierte un arreglo en una prueba: casos que pillan al código mintiendo.
Y me marcó algo en lo que no había caído. Uno de los fondos del sistema lleva opacidad, así que el contraste hay que calcularlo sobre el color compuesto, no sobre el declarado. Ese badge, que la rejilla daba por aprobado, era el tercero que fallaba.
Pegar once hex sin anunciar y los nombres de los componentes en una caja de texto ajena es, básicamente, enseñar el rebranding entero.
Esa es la parte que no se suele contar: muchas veces la fuga no es el código, es el prompt. Aquí el modelo corría dentro de la propia pestaña, sobre la GPU del equipo. Sin cuenta, sin cuota y sin subir nada. La rejilla acabó marcando tres parejas en rojo, y una era la del botón principal.
Si tienes una utilidad así atravesada, ábrela en Elffuss Code: la IA corre dentro del navegador, así que tu paleta, tu código y tus prompts no suben a ningún sitio.
Abrir Code →