Lección 2 de 12 · Lectura y práctica
Teoría del Color para UI
El Color como Herramienta Funcional En diseño UI, el color no es solo decoración — es una herramienta funcional que comunica significado, guía la atención y genera emociones. Una paleta bien definida es la base de cualquier.
Del concepto a la práctica
Taller de esta lección
En una interfaz, el color debe comunicar función y estado sin convertirse en el único canal de información. La decisión correcta combina contraste, texto y estructura para que una persona pueda interpretar un mensaje incluso en escala de grises.
Ejemplo resuelto
Para una reserva confirmada se usa una superficie verde muy clara, un borde verde oscuro y el texto «Reserva guardada». Para un error se usa superficie rojiza, el mensaje «Selecciona una fecha» y el campo con borde destacado. La etiqueta «Error» permanece aunque se quite el color. La combinación se revisa con el criterio de contraste proporcionado en el curso.
Pruébalo
Define cuatro roles: acción, superficie, texto y error.
Escribe el mensaje que acompaña cada estado.
Comprueba la lectura en color y en escala de grises.
Sustituye el color de error por un borde y un texto explícitos.
Error frecuente: usar rojo como decoración y como error. Corrige reservando cada color semántico para una función estable.
Ejercicio: diseña tres estados de un campo de fecha: vacío, inválido y válido.
Comprueba tu resultado
cada estado se distingue por texto, borde o icono además del color, y el texto principal sigue siendo legible.
Comprueba numéricamente el contraste: WCAG 2.1 AA pide al menos 4,5:1 para texto normal y 3:1 para texto grande (18 puntos o 14 puntos en negrita). Usa una herramienta de contraste sobre los colores finales; la prueba en gris sirve de apoyo y no sustituye esa medición.
Mapa de prácticaEl tamaño, el espacio y el contraste ayudan a distinguir lo principal de lo secundario. Una jerarquía clara guía la lectura desde el título hasta la información y la acción. Comprueba que el orden visual coincida con la tarea de la persona.
Ver la infografía en tamaño completo ↗El Color como Herramienta Funcional
En diseño UI, el color no es solo decoración — es una herramienta funcional que comunica significado, guía la atención y genera emociones. Una paleta bien definida es la base de cualquier sistema de diseño profesional.
Construyendo una paleta de colores para UI
- Color primario: el color principal de tu marca, usado en botones, links y elementos de acción
- Color secundario (opcional): un color complementario para acentos y elementos secundarios
- Neutros: una escala de grises de 50 a 950 — los usarás para texto, fondos, bordes y separadores
- Semánticos: verde (éxito), rojo (error), amarillo (advertencia), azul (información) — universales en UI
- Genera cada color en una escala de 50 a 900: 50 es casi blanco (fondos), 500 es el color base, 900 es casi negro
Reglas de uso del color en interfaces
- 60-30-10: 60% color neutro (fondos), 30% secundario (cards, headers), 10% primario (CTAs, acciones)
- Contraste WCAG: texto normal necesita ratio 4.5:1, texto grande 3:1 contra su fondo — usa webaim.org/resources/contrastchecker
- No uses color como único indicador: un campo de error necesita borde rojo Y un mensaje de texto Y un ícono
- Mantén consistencia semántica: si el rojo significa error en un lugar, no lo uses como color de acento en otro
- Modo oscuro: no inviertas colores, redefine la paleta — los colores primarios necesitan ser más luminosos en fondo oscuro
Herramientas para elegir colores
- Realtime Colors (realtimecolors.com): visualiza tu paleta aplicada a un layout real en tiempo real
- Coolors.co: generador de paletas con opciones de ajuste fino y exportación a variables CSS
- Color Hunt: colecciones de paletas curadas por diseñadores para inspiración
- Radix Colors: paletas profesionales con escala completa (50-900) listas para usar en UI
- El plugin Figma 'Contrast' te muestra ratios de contraste directamente en tus diseños
Consejo: Si no sabes qué color primario elegir, usa azul (#3B82F6). Es el color más seguro en UI porque transmite confianza, es legible y funciona bien en modo claro y oscuro.
Sigue con Diseño UI y Sistemas de Diseño
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.