Placeholder, leyenda y texto secundario: la trampa del gris

Un ticket de soporte que aparece en el historial de casi todos los productos: un usuario rellena un formulario, lo envía, recibe un error y no consigue averiguar qué campo estaba mal, porque el texto de ayuda bajo el campo, el placeholder dentro de él y la nota auxiliar junto a él son todos de un gris claro y de moda que sencillamente no puede leer. En el monitor calibrado del diseñador, en un estudio con poca luz, el gris se veía elegante. En el portátil del usuario, en una habitación luminosa, había desaparecido. La información estuvo ahí todo el tiempo; el contraste no.

La trampa del gris es lo que ocurre cuando los diseñadores indican «menos importante» aclarando el texto, porque el mecanismo que crea la resta de énfasis es el mismo mecanismo que destruye la legibilidad. Aclara el gris lo suficiente y la resta de énfasis se convierte, sin avisar, en exclusión. La solución es un suelo: el texto secundario aún tiene que superar 4,5:1 (tamaño normal) sobre su fondo. El clásico #999 sobre blanco mide solo ≈2,8:1 y falla; #767676 es el gris más claro que pasa con ≈4,5:1: el famoso «gris accesible». Los suelos en sí se tratan en nuestra guía de contraste; este artículo trata sobre el texto que se cuela por ellos con más frecuencia.

¿Por qué el gris claro es una trampa tan común?

Porque funciona, justo hasta que deja de hacerlo. La jerarquía pide alguna forma de decir «esto importa menos», y aclarar el texto es la palanca más fácil del tablero: un cambio de valor y la leyenda retrocede. El problema es que el retroceso y la ilegibilidad son el mismo proceso físico visto desde dos distancias. Aclarar un poco se lee como más silencioso; aclarar un poco más se lee como más tenue; pasado un punto se lee como ausente, y no hay ninguna alarma visual en la frontera, así que el deslizador la cruza de largo.

El planteamiento que te mantiene del lado correcto: la jerarquía debe susurrar, no desaparecer. Un susurro es más silencioso que el habla y sigue siendo plenamente inteligible. El texto gris que ha cruzado el suelo no está susurrando: ha salido de la habitación.

¿Qué texto cae en ella?

Las víctimas cotidianas, todas ellas texto real que transporta información real:

• Placeholders: el texto de ejemplo dentro de un campo vacío.
• Leyendas y texto de ayuda: la nota bajo un campo, la etiqueta bajo una imagen.
• Marcas de tiempo y metadatos: «hace 2 horas», la firma del autor, los tamaños de archivo.
• Pistas de estado vacío: «Aún no hay resultados. Prueba otra búsqueda.»

Cada uno de ellos es contenido que un usuario necesita leer. Hacerlos ilegibles no los vuelve poco importantes; los convierte en una barrera.

Placeholder frente a deshabilitado: el par más confundido de WCAG

Esta distinción manda más diseños de apariencia accesible por debajo del suelo que ninguna otra, así que dilo sin rodeos:

• El texto deshabilitado está exento del mínimo de contraste. WCAG excluye explícitamente los componentes de interfaz inactivos o deshabilitados: un botón atenuado se lee como «no puedes usar esto ahora mismo», y su bajo contraste forma parte de ese mensaje.
• El texto placeholder no está exento. Un placeholder se sitúa en un campo activo, y es texto real que transmite información real: un ejemplo de formato, una indicación, a veces la única etiqueta que el campo tiene. Tiene que superar el suelo estándar de 4,5:1 como cualquier otro texto de cuerpo.

Los diseñadores recurren al mismo gris tenue para ambos porque parecen iguales: texto de bajo énfasis en un formulario. Pero uno es un control deshabilitado y el otro es contenido activo. El documento Understanding Contrast (Minimum) detalla la exención y sus límites; la versión corta es que «parece inactivo» no es lo mismo que «está inactivo».

¿Cuáles son los números reales?

Toma una línea de metadatos —«Actualizado hace 3 días por Sam»— sobre un fondo blanco #ffffff, y recórrela hacia abajo por la escalera de grises para encontrar la frontera:

La frontera es nítida y está más adelante de lo que la intuición sugiere: un gris medio como #808080 aún falla, y #999 —que parece un color «secundario» razonable— no se acerca ni de lejos a pasar. Cualquier cosa que quieras por debajo de #767676 sobre blanco tiene que ganarse su resta de énfasis de otra manera.

Esta es exactamente la lógica que codifica el rol de leyenda de Scale Composer. En lugar de elegir un gris de aspecto agradable y cruzar los dedos, selecciona el paso más sutil que aún pasa: la resta de énfasis empujada justo hasta el suelo y detenida ahí, nunca a través de él. La leyenda es tan silenciosa como las reglas permiten y no más.

Abre una paleta e inspecciona la elección puntuada del rol de leyenda — la derivación coloca la leyenda en el paso que pasa más tenue, con su ratio WCAG y su valor APCA mostrados para que puedas verla situada justo por encima de la línea y no por debajo.

¿Cómo restar énfasis sin volverte ilegible?

La luminosidad es una herramienta para la jerarquía, no la única, y no la mejor una vez pasado el suelo. El resto del instrumental no cuesta nada en legibilidad:

• Tamaño: una leyenda más pequeña se lee como secundaria a pleno contraste.
• Peso: regular frente al semibold del cuerpo; más ligero, no más tenue.
• Espaciado: una línea de metadatos separada por espacio en blanco retrocede por sí sola.
• Posición: debajo o al lado del contenido principal, donde el ojo la archiva como apoyo.

Combina dos de ellas y obtienes una jerarquía clara mientras el texto se mantiene en un contraste cómodo. El gris es un adorno por encima, gastado solo hasta el suelo, no el plato entero.

Una línea para el modo oscuro, porque la trampa se invierte en vez de desaparecer: sobre una superficie oscura, el texto secundario se vuelve demasiado oscuro en lugar de demasiado claro. Un gris como #767676 que pasa sobre blanco da solo ≈4,1:1 sobre un fondo #121212 y falla; en oscuro, el texto secundario hay que subirlo más claro, en torno a #888 o por encima, para superar el mismo suelo.

¿Cómo auditar tus propios grises?

Ponlos en fila. Carga tu paleta y recorre una línea de metadatos hacia abajo por la escalera de grises — observa cómo el ratio de contraste cae por debajo de 4,5:1 y encuentra el paso exacto donde «elegantemente sutil» se convierte en «no puedo leerlo». Localiza esa frontera una vez en tus propios colores y toda futura decisión de «aclarémoslo un poco» tendrá un tope duro que no podrá cruzar sin avisar.