Colores Complementarios en Diseño Web y UI/UX
El color en diseño web no es solo estética — es accesibilidad, usabilidad y conversión. Aprende a usar los colores complementarios para crear interfaces hermosas que cumplan WCAG y guíen al usuario hacia la acción deseada.
Paletas de Sistemas de Diseño
SaaS / Tech — Azul + Naranja
Azul Oscuro
#1E3A5F
Azul Primary
#2563EB
Azul Claro
#DBEAFE
Naranja CTA
#EA580C
Naranja Hover
#F97316
Azul para elementos de confianza (nav, encabezados), naranja para acciones (botones primarios, badges).
Fintech / E-commerce — Verde + Rojo (semántico)
Verde Oscuro
#065F46
Verde Primary
#10B981
Verde Claro
#D1FAE5
Rojo Error
#DC2626
Rojo Suave
#FEF2F2
Verde para estados positivos (éxito, confirmación), rojo para errores y advertencias.
Accesibilidad de Color — Guía WCAG
Las Web Content Accessibility Guidelines (WCAG) establecen estándares de contraste que afectan a más de 1.300 millones de personas con discapacidades visuales en el mundo.
Niveles de Conformidad
| Tipo de texto | WCAG AA (mínimo) | WCAG AAA (óptimo) |
|---|---|---|
| Texto normal (<18pt) | 4.5:1 | 7:1 |
| Texto grande (≥18pt o 14pt bold) | 3:1 | 4.5:1 |
| UI Components, iconos | 3:1 | - |
| Texto decorativo, logos | Sin requisito | - |
Colores Complementarios y Accesibilidad
Los pares complementarios tienen contraste alto por definición, pero no siempre suficiente para texto. Reglas prácticas:
- Azul oscuro (#003399) sobre blanco: ratio ~9:1 ✅ WCAG AAA
- Naranja puro (#FF6600) sobre blanco: ratio ~2.7:1 ❌ Falla AA para texto
- Naranja oscuro (#CC4400) sobre blanco: ratio ~4.6:1 ✅ WCAG AA
- Verde puro (#00FF00) sobre blanco: ratio ~1.4:1 ❌ Falla gravemente
- Verde oscuro (#006600) sobre blanco: ratio ~7:1 ✅ WCAG AAA
Usa nuestra herramienta de verificación de contraste para comprobar cualquier combinación.
Daltonismo y Diseño Inclusivo
El 8% de los hombres tiene deuteranomalía (daltonismo rojo-verde). Nunca uses color como único indicador de información. Siempre añade íconos, patrones o texto para apoyar la información de color.
Sistema de Colores para UI — Escala Tonal
Un sistema de color profesional para UI incluye una escala tonal de 9-10 tonos por cada color de marca (del 50 al 900 como en Tailwind CSS). Esto permite:
- Fondos sutiles (50, 100) sin comprometer el contraste de texto
- Bordes y divisores (200, 300) con suficiente visibilidad
- Texto secundario (500, 600) que cumple AA con fondos claros
- Texto primario (700, 800, 900) que cumple AAA en cualquier fondo claro