Ratios de contraste sin misterio (WCAG)
El contraste va de 1:1 (invisible) a 21:1 (negro sobre blanco). WCAG exige ≥4,5:1 en texto normal y ≥3:1 en grande e interfaces — matemática, no gusto.
Revisa cada par en ambos temas: un gris que pasa en blanco suele fallar en oscuro, y los colores de marca rara vez sirven como enlaces sin ajustar.
Errores: fiarse del ojo ('se ve bien' falla sobre 3:1), probar solo modo claro y usar transparencias sobre fotos sin el peor fondo.
Ejemplo: #5b6472 sobre #ffffff = 5,98:1 (pasa AA). El mismo gris sobre #0f172a = 6,96:1. Ambos pasan — ese es el listón.
Prueba: Chequeo contraste WCAG · HEX ⇄ RGB
Armonía de color en 4 recetas
Cuatro recetas cubren casi todo: monocromo (un tono, varias luces), análogos (vecinos), complementarios (opuestos, uno de acento), triádicos (tres equidistantes, uno manda).
Orden: primero el rol de cada color (fondo, texto, acción, acento) y luego la armonía — nunca al revés. Un solo color fuerte por pantalla.
Errores: dos primarios compitiendo, degradados entre tonos ajenos (centro embarrado) y texto neón que pasa el 'vibe' y falla la matemática.
Ejemplo: base #2563eb → acento complementario #eb8a25 solo para el CTA; fondos neutros para que el acento signifique 'clic' en todas partes.
Prueba: Generador de paletas · Generador de degradados
Sombras que se ven reales
Las sombras reales son suaves, en capas y direccionales: una ambiental prieta más una difusa grande, negro ligeramente transparente, desplazamiento abajo — nunca bordes duros negros puros.
El glassmorphism suma blur sobre fondo translúcido con borde claro de 1px; solo se lee como vidrio sobre contenido variado — en fondos planos parece un bug.
Errores: blur gigante sin desplazamiento (halo sucio), sombras sobre superficies oscuras (invisibles) y animar box-shadow por cuadro (usa transform/opacity; la sombra repinta caro).
Ejemplo: '0 1px 2px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.14)' eleva una tarjeta en ambos temas sin una sola imagen.
Prueba: Generador Box Shadow · Generador Glassmorphism