La paleta de color HMI tranquila: por qué gana el gris

Entra en una sala de control montada a finales de los años noventa y la pantalla suele parecer un árbol de Navidad: bombas rojas, motores verdes, depósitos azules, tuberías amarillas, botones con degradado, sombras y recipientes 3D fotorrealistas. Alguien en la fase de diseño preguntó “¿de qué color pongo la bomba?” y la respuesta fue una preferencia personal en vez de una regla del sistema.

El resultado es una pantalla llena de color donde el color ya no significa nada. Cuando todo es colorido, el ojo del operador no distingue qué objeto rojo está en alarma y cuál es solo rojo decorativo. Este es el fenómeno que hay detrás de la fatiga de alarmas crónica, los eventos que pasan desapercibidos y la larga conversación de ISA-101 que terminó con: empieza en gris y gánate cada color.

1. La regla de color de dos ejes

La filosofía de color de ISA-101 se condensa en dos reglas:

1. El color codifica el estado, no la identidad. Una bomba es una bomba por su forma, no por ser azul. Dos bombas de la misma línea deben dibujarse idénticas: solo cambia su estado.
2. El color saturado se reserva para condiciones anómalas y cambios de estado por el operador. El rojo, el naranja, el amarillo y el azul a plena saturación son presupuesto gastado. Si te lo gastas en decoración, no te queda nada para las alarmas.

2. La paleta canónica

Superficies (la mayor parte de la pantalla)

Prioridades de alarma

Estado del equipo

Eso es todo. Doce colores en total, la mitad grises. Toda pantalla ISA-101 moderna vive dentro de esta paleta. Cuando veas una pantalla que la incumple, normalmente puedes rastrear la infracción hasta las primeras decisiones del proyecto, y normalmente puedes predecir que los operadores han aprendido a ignorar al menos uno de los colores “importantes” porque se ha usado de forma decorativa en algún otro sitio.

3. Por qué funciona el gris

El gris funciona porque no compite con los colores de alarma. La retina tiene un presupuesto de atención limitado: lo que se percibe es lo que es diferente de su entorno. Un indicador P1 rojo sobre un mar de gris salta al instante. El mismo indicador en una pantalla de colores chillones es solo un elemento colorido más, estadísticamente indistinguible de una etiqueta roja decorativa.

Las HMI tranquilas no son bonitas. Parecen cuadros de instrumentos, y esa es precisamente la idea.

Esto vale también para los gráficos: fuera biseles 3D, degradados, sombras y reflejos brillantes. El 2D plano gana todos los estudios de usabilidad porque el reconocimiento de patrones del operador no tiene que hacer trabajo extra para extraer la información abstracta de la decoración fotorrealista.

4. Daltonismo y contraste

Alrededor del 8 % de los hombres y el 0,5 % de las mujeres tienen alguna forma de deficiencia de visión del color rojo-verde. Diseñar alarmas que dependan únicamente del rojo frente al verde para comunicar la prioridad deja fuera a una parte considerable de tu plantilla de operadores.

La solución no es cambiar los colores —los ingenieros esperan que el rojo signifique crítico— sino añadir codificación redundante:

• Forma: las alarmas P1 llevan un badge triangular, las P2 un hexágono, las P3 un cuadrado y las P4 un círculo. Aun quitando los colores, la prioridad se lee.
• Posición / patrón: los badges de alarma aparecen en una esquina fija del símbolo, con la prioridad codificada por el texto del badge (P1, P2, …) además del color.
• Contraste: WCAG AA recomienda 4,5:1 para el texto de cuerpo sobre el fondo. Combina cada color de alarma con texto blanco y ratios de contraste comprobados.

5. Antipatrones

Color decorativo

“Pon la caldera naranja porque está caliente.” No. La caldera es gris; su indicador de temperatura usa un color de estado cuando se sale de rango. Colorear el propio equipo entrena a los operadores para ignorar la señal de color que de verdad importa.

Botones con degradado y efecto cristal

Los degradados malgastan información de color en muchos tonos, ninguno de los cuales significa nada. Además envejecen mal: lo que parecía “moderno” en 2008 se ve anticuado en 2024. Los rellenos planos no pasan de moda.

Parpadeo permanente

La animación es un recurso valioso. Un elemento parpadeante debería significar “alarma nueva, requiere reconocimiento”. Una vez reconocida, la alarma pasa a fijo (sigue en rojo) pero el parpadeo se detiene. El parpadeo permanente degenera en ruido de fondo en cuestión de horas.

Color para datos normales

“Muestra el caudal en azul y la temperatura en rojo.” Esto choca con el significado de las alarmas. Usa gris neutro para las lecturas numéricas normales y cambia a un color de estado solo cuando el valor se sale del rango de operación normal.

Recipientes 3D y fotorrealismo

Un depósito renderizado en perspectiva con brillos cromados impresiona en una demo comercial y ralentiza el barrido visual del operador entre un 20 y un 30 % según los estudios. Usa 2D plano: el cerebro reconoce patrones más rápido con formas simples.

6. Todo junto: un ejemplo de “antes y después”

Imagina una pantalla con tres bombas. La versión “antes” usa las formas por defecto de la librería de WinCC ME:

• Bombas dibujadas en azul saturado con símbolos de curva de bomba en blanco.
• Tags flotando en texto rojo porque el rojo “resalta”.
• Fondo con un degradado tenue de blanco a azul claro.
• Una bomba en alarma: su contorno ahora parpadea en rojo, encima del cuerpo azul.

Lo que ve el operador: una pantalla colorida donde un elemento parpadea. ¿Cuál? El ojo tiene que rastrear entre azul / rojo / blanco / degradado antes de aterrizar en la bomba en alarma.

La versión “después”, usando la paleta tranquila:

• Bombas dibujadas con relleno gris claro y contorno gris más oscuro (en marcha) o verde fijo según el estado.
• Tags en gris oscuro monoespaciado (P-101, P-102, P-103).
• Fondo plano #C8C8C8.
• La bomba en alarma muestra un pequeño badge P1 rojo en la esquina. El cuerpo de la bomba sigue diciendo “en marcha”, porque lo está.

Ahora la bomba en alarma salta a la vista. El ojo no tiene que rastrear. Para eso sirve la HMI tranquila.

7. Usar la paleta en el Symbol Builder

Los doce colores de arriba son las muestras integradas del Symbol Builder: dibujas el cuerpo del equipo en gris neutro y aplicas un color de estado o de alarma solo donde lo pida la máquina de estados. Los símbolos publicados en la biblioteca de la comunidad se comprueban automáticamente en paleta y grosor de trazo antes de obtener el sello ISA-101 compliant, así que lo que encuentras en Explorar ya cumple la regla. Aun así puedes aclarar u oscurecer el gris o ajustar los tonos de alarma al estilo corporativo de un cliente (con criterio: que sigan siendo distinguibles) y decidir si los tags van quemados o superpuestos como objetos de texto aparte.

8. Para seguir leyendo

• ISA-101.01-2015 — “Human Machine Interfaces for Process Automation Systems”
• Bill Hollifield et al. — The High Performance HMI Handbook
• Directrices de contraste WCAG 2.1 (W3C)
• The ASM Consortium — “Effective Operator Display Design”