Roles de color en Material: usarlos sin perder la marca

Un rol de color es un nombre para una función en la interfaz. Responde dónde entra el color, no qué color es. La guía de Material Design define 26 roles estándar en seis grupos (en inglés): primary, secondary, tertiary, error, surface y outline. La guía compara los roles con áreas numeradas de un dibujo por números (en inglés), como forma de describir el vínculo entre un elemento y el color que le corresponde.

Qué decide un rol de color

Los roles describen una posición en el diseño. Surface es el rol para fondos y áreas grandes de bajo énfasis (en inglés). Un rol que empieza por “on” marca texto e iconos sobre el color padre correspondiente (en inglés). Un rol de contenedor rellena elementos como botones y no sirve para texto ni iconos (en inglés). Un rol variant es una alternativa de menor énfasis a su par sin variant (en inglés).

Por qué la guía separa rol de valor

El rol sigue igual cuando cambia el valor. La guía afirma que las asignaciones de rol de color siguen iguales en los esquemas dinámicos (en inglés) mientras cambian los colores de debajo. Los roles también se implementan mediante design tokens (en inglés), así el nombre lleva la decisión y el número queda en otro sitio. Una renovación de marca edita los colores de origen, y cada pantalla que lee el rol recibe el valor nuevo.

Los roles principales y dónde aparecen

Los roles de acento llevan énfasis, y la guía los reparte según la atención que pide un elemento. Primary cubre las acciones y los elementos más prominentes (en inglés), como un botón flotante. Secondary cubre elementos que no necesitan atención inmediata (en inglés), como el estado seleccionado de un icono de navegación. Tertiary cubre elementos pequeños que piden énfasis sin urgencia (en inglés), como una insignia.

Error marca un estado como una contraseña incorrecta (en inglés), y la guía lo mantiene estático incluso en un esquema dinámico. Surface y sus roles de contenedor ocupan las regiones neutras de la pantalla (en inglés), con cinco niveles de contenedor para la jerarquía. Outline se ocupa de límites importantes, como el borde de un campo (en inglés), y outline variant queda para marcas decorativas, como divisores (en inglés).

Contraste dentro del esquema, y dónde falla un par

La guía construye el esquema sobre pares de color accesibles con contraste mínimo de 3:1 (en inglés). Combinar colores fuera del orden previsto puede romper el contraste (en inglés) que exige la accesibilidad visual, sobre todo cuando un ajuste de contraste mueve los valores.

Ese piso de 3:1 no es el único número en juego. Nielsen Norman Group informa que la WCAG pide al menos 4,5:1 para texto de cuerpo y 3:1 para texto grande (en inglés). Un par puede superar el piso de la guía y fallar igual en texto de cuerpo pequeño.

El contraste lleva significado, no solo legibilidad. NN/g señala que un tratamiento de bajo contraste puede indicar que una opción no está disponible (en inglés), porque atenuar es la forma habitual de mostrar un control desactivado.

Color de marca sobre el esquema

Un esquema estático mantiene sus colores sin importar la entrada del usuario ni el contenido de la app, y la guía ofrece un esquema base con asignaciones predeterminadas (en inglés). Un esquema de marca personalizado es elegido a mano por el equipo para coincidir con el color de marca (en inglés).

La guía no esconde el coste. Los esquemas basados en marca los crea y los mantiene el equipo por completo (en inglés), algo que la guía llama una inversión mayor de tiempo y esfuerzo. El Material Theme Builder convierte un valor hexadecimal de marca en un esquema de color completo (en inglés), y los nombres de los roles se mantienen.

El color de marca entra en los roles, no pasa por encima de ellos. Un acento de marca asignado a primary sigue teniendo que funcionar con texto e iconos sobre su relleno correspondiente (en inglés).

Esquema dinámico y a partir de contenido

El color dinámico construye un esquema accesible a partir de un color de origen (en inglés). El origen puede ser el fondo de pantalla del usuario o el contenido de la app (en inglés). La guía recomienda diseñar primero sobre el esquema base, para que los roles correctos estén asignados a los componentes correctos (en inglés) antes de que los colores empiecen a moverse. Lo que no se obtiene son los mismos colores de interfaz en todos los dispositivos (en inglés).

El error común: usar un acento como fondo de texto

Un rol de acento es un relleno, y su rol par es el texto que va encima. Usar primary como fondo de texto de cuerpo pone un relleno donde debería ir un contenedor. La guía reserva los roles “on” para texto e iconos sobre su color padre (en inglés).

NN/g informa que el color por sí solo no basta para separar estados (en inglés), así que una prueba de contraste sobre el par real vale más que una suposición desde la muestra. El mismo artículo propone pasar el diseño a escala de grises para ver si todavía se lee. NN/g también advierte que los colores de brillo parecido son difíciles de distinguir para quien tiene daltonismo (en inglés).

Lo que la guía no cierra

La guía deriva un esquema de un color de origen y define los pares que funcionan. No fija el contraste final de una marca. Tampoco da un número fijo para texto de marca sobre relleno de marca, y esa decisión queda en el equipo de producto.

Una paleta de marca necesita su propia prueba (en inglés) en lugar de confiar en el archivo de tema. NN/g sugiere limitar la paleta a pocos colores (en inglés), porque un conjunto amplio debilita la jerarquía y el acento pierde su función.

Los roles de aquí continúan Material Design y los design tokens. El lado de contraste de un esquema se conecta con modo oscuro y contraste.