En proyectos reales, la accesibilidad rara vez se rompe por falta de conocimiento. Se rompe por decisiones de diseño aparentemente pequeñas: contrastes suaves, focos invisibles, animaciones excesivas o interacciones pensadas solo para ratón.

La pregunta no suele ser “¿bonito o usable?”, sino dónde está la línea y cómo no cruzarla sin darte cuenta. Veamos los puntos donde más a menudo se pierde el equilibrio.

---

Contraste: identidad visual vs legibilidad

Los colores suaves y las paletas de marca funcionan bien en presentaciones, pero en interfaces reales pueden convertirse en un problema.

- Texto gris claro sobre fondo claro
- Estados disabled indistinguibles
- Enlaces que solo se diferencian por color

Consejo práctico: ajusta contraste por rol, no por color global. El texto principal no debería compartir contraste con etiquetas secundarias o metadatos.

.text-primary {
  color: rgb(15 23 42);
}

.text-muted {
  color: rgb(100 116 139);
}

Una UI puede seguir siendo elegante sin forzar al usuario a “adivinar” el contenido.

---

Interacciones invisibles

El minimalismo mal entendido suele eliminar justo lo que más ayuda al usuario: pistas visuales.

Errores comunes:

- Botones que parecen texto
- Enlaces sin subrayado ni hover
- Iconos clicables sin feedback

Si algo es interactivo, debe parecerlo antes de interactuar.

a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

No es ruido visual, es orientación.

---

El foco que “estropea” el diseño

Quitar el foco visible es una de las decisiones más habituales… y más dañinas.

CSS incorrecto:

*:focus {
  outline: none;
}

El foco no es solo para accesibilidad: es contexto, orientación y confianza.

CSS recomendado:

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

El foco puede formar parte del sistema visual, igual que los estados hover o active.

---

Animaciones: cuando lo fluido se vuelve molesto

Transiciones suaves mejoran la percepción de calidad… hasta que dejan de hacerlo.

Problemas habituales:

- Animaciones largas para acciones frecuentes
- Efectos en elementos funcionales
- Falta de respeto a prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

La animación debe acompañar, no protagonizar.

---

Tamaños táctiles y “pixel perfect”

Un diseño puede verse perfecto y aun así ser incómodo de usar.

- Targets demasiado pequeños
- Iconos sin padding
- Clicks precisos en móviles

Regla rápida: 44x44px no es exagerado, es usable.

.button {
  min-height: 44px;
  min-width: 44px;
}

El usuario no falla: falla el diseño.

---

Checklist rápido

Antes de dar una UI por “terminada”, revisa:

- ¿El texto principal se lee sin forzar la vista?
- ¿Los elementos interactivos se reconocen sin hover?
- ¿El foco es visible y coherente con el diseño?
- ¿La UI sigue funcionando sin animaciones?
- ¿Los targets son cómodos en móvil?

Si dudas en alguno, probablemente la línea ya se ha cruzado.

---

Conclusión

Una UI usable no es menos atractiva; es más honesta. Cuando diseño y accesibilidad trabajan juntos, el resultado es una interfaz más clara, más robusta y más fácil de mantener.

El buen diseño no es el que se nota, es el que no estorba.