Texto en botones de color: cómo elegir el on-color

Un equipo lanza un rediseño de marca, y el nuevo botón primario —un azul más amable y claro que el anterior— sale con la etiqueta blanca que llevaban todos los botones anteriores. La auditoría de accesibilidad llega semanas después: la etiqueta no pasa el contraste. Nadie cambió el texto; el relleno se movió debajo de él. La combinación que pasó durante años dejó de pasar el día en que la marca se aclaró.

El texto de un botón de color se comprueba contra el relleno sobre el que se asienta, no contra la página — y los rellenos de luminosidad media son la trampa: hay una banda de colores de marca donde ni el blanco puro ni un texto casi negro superan el umbral de 4,5:1 para etiquetas a tamaño de cuerpo. Los sistemas resuelven esto con un on-color derivado — un rol de texto que se calcula por relleno con un umbral de contraste estricto, que recurre a un ancla casi blanca o casi negra cuando ningún paso de la rampa pasa. Cómo funciona esa banda, y cómo diseñar para salir de ella, es esta pieza de nuestra guía de escalas de color.

¿Qué par de contraste se mide en realidad?

La etiqueta contra el relleno — nada más. Un botón azul sobre una página blanca implica tres colores, y el par que decide si la etiqueta es legible es etiqueta-sobre-azul. Los umbrales vienen del mínimo de contraste de WCAG: 4,5:1 para texto a tamaños normales, que se relaja a 3:1 para texto «grande» — 24px en adelante, o 18,66px en adelante si es negrita. La mayoría de las etiquetas de botón no son ni una cosa ni otra, así que 4,5:1 es el umbral operativo.

Haz los cálculos con el azul que se usa en todo este hub, #2563eb (oklch(0.546 0.215 262.9)): el texto blanco sobre él mide ≈5,2:1 — pasa con margen. Pero un texto casi negro (de clase #111) sobre el mismo relleno mide ≈3,6:1 — no pasa. Este relleno tiene exactamente una dirección viable, y resulta ser la que prefiere la convención. No todas las marcas tienen tanta suerte.

¿Dónde está la zona de peligro?

Aclara la marca y observa cómo se invierte el resultado. Un azul más claro de la clase #4A8CF7 —en torno a L 0,65 en OKLCH— da al texto blanco ≈3,3:1 (no pasa para texto a tamaño de cuerpo) mientras que el texto oscuro ahora supera cómodamente ≈5,7:1. En algún punto entre esos dos azules las dos opciones intercambian su papel, y en la banda de cruce —rellenos en torno a L ≈0,58–0,62— ni el blanco puro ni el casi negro alcanzan 4,5:1. Esa banda es la zona de peligro, y no es exótica: los tonos medios amables y saturados son exactamente donde a muchas marcas contemporáneas les gusta vivir.

La forma intuitiva de retenerlo: el texto blanco necesita un escenario oscuro y el texto oscuro necesita uno claro, y un relleno de luminosidad media no es ninguno de los dos. Se sitúa en el centro del balancín, donde nadie consigue suficiente palanca.

¿Qué es un on-color y cómo se deriva?

La respuesta de sistema es convertir la etiqueta en un rol derivado en lugar de una elección por botón. Entre los ~17 roles semánticos que Scale Composer deriva por superficie está onFill: el color de texto para el contenido que se asienta sobre un relleno de color, elegido con un umbral WCAG estricto — y cuando ningún paso de la rampa pasa contra el relleno, el rol recurre a un ancla de sistema, el casi blanco o casi negro que gana por contraste puro. La derivación reemplaza la conjetura: cada relleno —incluidos los rellenos funcionales como error y éxito— recibe un color de etiqueta que fue comprobado en el momento de la generación, y un futuro cambio de marca vuelve a derivar la respuesta en lugar de invalidarla en silencio.

Abre la derivación del on-color en Scale Composer — el relleno de marca con su rol onFill derivado, el ratio de contraste que supera, y el valor APCA al lado.

¿Por qué persiste el «usa blanco y ya»?

Dos razones honestas. Estéticamente, el blanco sobre color se lee más limpio para muchos ojos — el texto oscuro sobre un relleno de color tiene un aire utilitario que algunas marcas rechazan. Y la excepción del texto grande enturbia el agua: una etiqueta de 19px en negrita solo necesita 3:1, así que una combinación que no pasa la auditoría para un botón sí pasa para su hermano mayor, y los equipos generalizan a partir del botón que probaron. La excepción es real —los trazos más grandes y gruesos genuinamente necesitan menos contraste para leerse— pero solo rescata a los botones que realmente cumplen el umbral de tamaño, que la mayoría no cumple.

¿Cuáles son las vías de escape cuando la marca cae en la zona media?

Tres, en orden aproximado de la frecuencia con que los sistemas recurren a ellas:

• Oscurece el relleno un paso. La elección silenciosa que hicieron muchos sistemas: los botones usan el 600 en lugar del 500, precisamente para que el texto blanco supere el umbral. El tono de la marca sobrevive; el relleno baja un paso por su propia rampa — el mismo movimiento que deriva los estados hover y pulsado.
• Adopta el texto oscuro. Material 3 tomó este camino en todas sus paletas tonales — combinaciones de oscuro sobre tonal como opción por defecto. Se lee contemporáneo una vez que se desvanece la extrañeza inicial, y abre la mitad clara de la rampa para los rellenos.
• Califícala como grande. Pon la etiqueta en negrita y dimensiónala a 18,66px o más, y se aplica el 3:1. Legítimo, pero frágil — vincula una decisión de color a una decisión de tipografía, y la próxima persona que reduzca la etiqueta rompe el contrato de forma invisible.

Un párrafo sobre el instrumento más nuevo: APCA, el modelo de contraste en torno al cual se construye la próxima generación de WCAG, gradúa la zona media con más finura que el ratio, distinguiendo combinaciones que la regla de 4,5:1 mete en el mismo saco. Scale Composer muestra el valor Lc junto a cada ratio sin emitir veredictos sobre él, porque los umbrales de APCA dependen del uso. Como segunda opinión en la zona de peligro, es exactamente donde ayuda ese grano más fino.

Encuentra el límite de tu propia marca

Que tu marca se sitúe con seguridad a un lado del cruce o dentro de él es una medición, no una conjetura. Carga un relleno de luminosidad media y observa cómo la derivación del on-color trabaja el caso límite — ajusta la luminosidad del relleno paso a paso y ve dónde la etiqueta derivada pasa de blanco a oscuro, y dónde el ancla de sistema tiene que intervenir porque la propia rampa no tiene nada que pase. Ese punto de inversión, hallado una vez, vale por una página de directrices: te dice exactamente cuánto margen tiene tu color de marca antes de que sus botones empiecen a discutir con sus propias etiquetas.