17 · Ícono, palabra y color: siempre los tres
Estados clínicos y semántica
En una agenda médica, confundir «confirmada» con «por confirmar» tiene consecuencias. Un estado nunca depende del color: se lee por su ícono, por su palabra y, además, por su color.
Cada estado tiene una forma de ícono propia (círculo con marca, reloj, triángulo, círculo con raya, octógono). Los iconos siguen siendo distintos incluso en escala de grises o con daltonismo. Prueba los filtros.
ConfirmadaLa paciente confirmó su asistencia.
Por confirmarAún no responde el recordatorio.
Requiere atenciónDos citas coinciden a las 10:00 a. m.
CanceladaLa cita se canceló. El horario quedó libre.
No se pudo guardarRevisa tu conexión e inténtalo de nuevo.
Reglas
- Tres señales
- Cada estado combina ícono, palabra y color. Si alguien ve solo una de las tres, entiende igual.
- Sin amarillo
- El amarillo de marca no codifica ningún estado. «Requiere atención» usa naranja quemado con triángulo.
- Sin rojo por defecto
- El rojo solo para lo que no se pudo hacer. Una cita cancelada es gris: es un hecho, no una falla.
- Texto siempre visible
- La palabra del estado está en pantalla, no solo como información accesible. Los íconos llevan texto equivalente.
- Brillo y contraste
- Cada color pasa 4,5:1 sobre su fondo en los dos temas. Los valores están en la tabla de abajo.
- Lenguaje
- Sin mayúsculas, sin exclamaciones y sin palabras dramáticas: «Requiere atención», no «¡ALERTA!».
Colores de estado
| Estado | Ícono | Claro | Oscuro |
|---|---|---|---|
| Confirmada | #1f7a5c | #4fc79b | |
| Por confirmar | #2563a8 | #6aa6f0 | |
| Requiere atención | #a8480a | #ff9a4d | |
| Cancelada | #5b5441 | #a3a3ad | |
| No se pudo guardar | #b3261e | #ff6b61 |
Etiquetas y chips
ConfirmadaPor confirmarRequiere atenciónCanceladaNo se pudo guardar
Las etiquetas miden al menos 24 px de alto (objetivo mínimo de WCAG 2.2) y 44 px si se pueden pulsar.
Sí
- Ícono + palabra + color, siempre
- Naranja quemado con triángulo para «Requiere atención»
- Gris para lo cancelado o inactivo
- Probar la pantalla en escala de grises antes de publicarla
No
- Un punto de color solo
- Amarillo Solar como aviso
- Rojo para una cita cancelada
- Verde y rojo como único contraste entre dos estados
- Mayúsculas o exclamaciones en el mensaje