Accesibilidad
Errores comunes que violan la identidad Fluxr. Cualquier componente que viole estas reglas debe corregirse antes del deploy.
Razones calculadas en el build. Si un par documentado baja de AA, el build falla.
| Par | Papel | Mínimo | Uso | |
|---|---|---|---|---|
| Aa | texto | 18.92:1 | 4.5:1 | Texto principal sobre el fondo del sitio |
| Aa | texto | 7.72:1 | 4.5:1 | Subtítulos y descripciones |
| Aa | texto | 15.33:1 | 4.5:1 | Lime como texto de énfasis en tema oscuro |
| Aa | texto | 14.26:1 | 4.5:1 | Texto dentro del botón lime |
| Aa | texto | 8.35:1 | 4.5:1 | Texto sobre el relleno lime del tema claro |
| Aa | texto | 4.58:1 | 4.5:1 | Lime como LETRA sobre blanco |
| Aa | ui | 3.06:1 | 3:1 | Borde, icono y anillo de foco sobre blanco |
Anillo lime obligatorio en todo elemento accionable. Foco invisible es fallo, no estilo.
Visual
Comenzar Ahora
outline: none
Ver Demo
Con prefers-reduced-motion la interfaz entrega el estado FINAL, no una versión más lenta.
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}Mínimo 44×44px en cualquier control tocable. En móvil el dedo no acierta 32px.
32px44px56px
Un h1 por página, jerarquía sin saltos, landmarks reales, alt en toda imagen con contenido.
cursor:default en clicable
Todo elemento interactivo debe tener cursor:pointer. Sin excepción.
Focus states invisibles
Obligatorio para a11y. Usar box-shadow con rgba(var(--brand-primary-rgb),0.3).
Contraste insuficiente
Mínimo 4.5:1 WCAG AA. Probar con herramientas de contraste.
Scroll horizontal mobile
Toda pantalla debe probarse en 375px. overflow-x:hidden en el body.
Contenido bajo nav fija
Verificar padding-top suficiente cuando el navbar es sticky/fixed.
Visual
☐ Sin emojis como íconos (usar SVG)
☐ Íconos de un set consistente (Lucide/Heroicons)
☐ cursor-pointer en todo elemento clicable
☐ Estados hover con transiciones de 150–300ms
☐ Contraste mínimo 4.5:1
☐ Lime #C3F400 como primario; sin acento morado
☐ Tema claro: el lime de relleno es #8DBE22, nunca #C3F400
☐ Background correcto (#0a0a0a / #0B0F19)
Técnico / A11y
☐ Estados de foco visibles (teclado)
☐ prefers-reduced-motion respetado
☐ Responsivo: 375px, 768px, 1024px, 1440px
☐ Sin scroll horizontal en mobile
☐ Sin contenido bajo la navbar fija
☐ Console.log removido (producción)
☐ Rutas en inglés, contenido vía i18n