Color en interfaces: significado, contraste y sistema
El color comunica estados y acciones, pero nunca debe ser la única señal. Qué piden WCAG 1.4.1, 1.4.3 y 1.4.11, el riesgo del rojo y verde y la paleta.
¿Por qué el color no puede ir solo?
Porque no todas las personas ven los colores igual. Según el National Eye Institute de Estados Unidos, alrededor de 1 de cada 12 hombres tiene deficiencia de visión del color, con un riesgo mucho menor en las mujeres (NEI: Color blindness). Además, la pantalla puede verse mal bajo el sol, con bajo brillo o en un monitor de mala calidad. Si el error solo se muestra en rojo, esas personas no lo ven.
El criterio 1.4.1 de WCAG lo resume así: el color no se puede usar como único medio visual para transmitir información, indicar una acción, pedir una respuesta o distinguir un elemento. Sus ejemplos son directos: campos obligatorios marcados solo en rojo, o ventas de una persona en rojo y las de otra en azul. Un caso que sí cumple es un campo obligatorio con texto rojo y un icono (W3C: Understanding SC 1.4.1).
La solución es casi siempre la redundancia: texto, icono, forma o patrón junto al color. El color sigue siendo útil, pero ya no sostiene el mensaje por sí solo.
¿Cuánto contraste necesita?
WCAG tiene dos criterios principales:
| Criterio | Qué aplica | Umbral |
|---|---|---|
| 1.4.3 Contraste mínimo (AA) | Texto e imágenes de texto | 4,5:1; el texto grande, de 18 pt o 14 pt en negrita, necesita 3:1 |
| 1.4.11 Contraste no textual (AA) | Componentes de interfaz y gráficos necesarios para entender el contenido | 3:1 contra los colores adyacentes |
Dos detalles importantes. Primero, el umbral de 1.4.11 aplica a bordes, iconos y estados de un control, no a componentes inactivos como un botón deshabilitado. Segundo, los indicadores de foco también deben alcanzar 3:1 contra los colores adyacentes (W3C: Understanding SC 1.4.11; W3C: Understanding SC 1.4.3).
Para medir, la fórmula del W3C es (L1 + 0,05) / (L2 + 0,05), donde L1 y L2 son las luminancias relativas del color más claro y del más oscuro. Las herramientas de contraste hacen el cálculo, pero entender la lógica evita elegir colores «que se ven bien» que en realidad fallan.
¿Por qué el rojo y el verde son un riesgo?
Porque el tipo más común de deficiencia de visión del color dificulta distinguir el rojo del verde (NEI). Un patrón típico es usar verde para «válido» y rojo para «inválido» sin ninguna otra señal. Para una parte de los usuarios, esos dos estados se ven casi iguales. Si el rojo y el verde indican acciones opuestas, agrega siempre un icono (una palomita o una x) y un texto.
Una prueba rápida: pasa tu diseño a escala de grises. Si el significado se entiende igual, la estructura está bien; si no, falta una señal redundante.
¿Cómo se organiza una paleta?
Una paleta funcional separa los colores por su papel, no por su tono:
- Neutros para fondos, textos y bordes, con suficiente contraste para leer.
- Color de marca para la acción principal y la identidad.
- Colores semánticos para éxito, advertencia, error e información. Cada uno con su icono y texto.
- Colores de superficie para tarjetas, paneles y estados de selección.
Esa separación se conecta con los tokens: en lugar de usar #D92D20 en todas partes, defines color.error y lo aplicas desde el sistema. Así cambiar el tono de error no obliga a revisar cada pantalla. Para la arquitectura de esos nombres, mira arquitectura de tokens y sistema de diseño.
¿Cuándo NO conviene una paleta amplia?
- Si el producto tiene cinco colores de marca y ninguno tiene un papel claro, la interfaz se llena de tonos que compiten entre sí.
- Si cada equipo agrega su propio rojo de error, el significado se vuelve inconsistente y la paleta pierde valor.
- Si el color se usa solo para decorar, no para comunicar, la pantalla gana atractivo pero pierde claridad. Conviene reducirlo.
Ejemplo ilustrativo
Ejemplo ilustrativo: un formulario de pago marca los campos con error en rojo y los correctos en verde. Una persona con daltonismo rojo-verde no distingue cuál es cuál, y el formulario parece igual de correcto en todos los campos. El equipo agrega un icono de advertencia y un texto debajo de cada campo con error, y cambia el verde por un azul para el estado de éxito. Además verifica que el texto del error tenga 4,5:1 contra el fondo y que el borde del campo alcance 3:1. El formulario sigue usando color, pero ya no depende de él.
Para la parte matemática del contraste, revisa las matemáticas del contraste de color. Y para cómo se jerarquiza el texto junto con el color, lee tipografía para interfaces y jerarquía visual.
Errores comunes
- Marcar errores, éxitos o estados solo con color.
- Usar rojo y verde para acciones opuestas sin otra señal.
- Diseñar con colores muy claros sobre fondos blancos porque «se ven limpios».
- Revisar el contraste solo del texto y olvidar los bordes, iconos y estados de foco.
- Crear un rojo nuevo en cada componente en lugar de usar un token compartido.
- Revisar la paleta solo en una pantalla y no en modo oscuro.
Qué puedes hacer mañana
- Pasa tu pantalla más usada a escala de grises y anota qué significado se pierde.
- Revisa el contraste de tus estados de error y de éxito, incluidos los bordes y el foco.
- Escribe una tabla con cinco colores semánticos, su uso y el icono que los acompaña.