Colores y accesibilidad

TL;DR

CÉNIT usa un sistema de tokens de color. El color primario de tu club aparece en toda la app, pero el sistema usa automáticamente una versión de alto contraste para botones y controles interactivos, garantizando legibilidad en modo oscuro y claro.

Cómo funcionan los colores de marca

Cuando configurás un color primario en Ajustes, la app lo aplica a highlights, tabs activos, links y acentos. Dos cosas a tener en cuenta:

• En modo oscuro, el sistema mezcla tu color con el fondo oscuro. Los colores muy claros (pasteles, casi blancos) pueden perder contraste sobre superficies oscuras — el texto encima se vuelve difícil de leer.
• Para botones y controles interactivos, la app siempre usa una versión de alto contraste garantizado de tu color primario, independientemente de lo que hayas elegido. Esto asegura legibilidad WCAG AA (mínimo 4.5:1 de contraste) aunque tu color de marca sea claro.

Cómo elegir un color primario

No hay restricciones sobre qué elegir, pero para mejores resultados:

• Preferí colores saturados de tono medio a oscuro. Un azul profundo, un verde rico o un rojo fuerte funcionan bien en ambos modos.
• Evitá colores muy claros (pasteles, casi blancos, casi amarillos) como primario — tienden a desaparecer en modo oscuro y sobre fondos blancos en modo claro.
• Probá ambos modos después de guardar. Abrí el toggle de tema y verificá que headings, tabs activos y botones se vean bien.

Modo claro vs modo oscuro

La app viene en modo oscuro por defecto. Cuando un usuario cambia a modo claro, los tokens de color se ajustan automáticamente — los fondos se vuelven blancos, el texto se oscurece y los colores semánticos (ok/advertencia/peligro) cambian a variantes de mayor contraste.

Tus colores primario y secundario aplican en ambos modos. La misma advertencia aplica: colores claros que se ven bien en modo oscuro pueden desvanecerse en modo claro.

Ver Modo claro / oscuro para cómo alternar y Branding del club para dónde configurar tus colores.

Accesibilidad

La app cumple los requisitos de contraste WCAG AA en todos los controles:

• Todos los botones con texto blanco tienen una relación de contraste ≥ 7.9:1.
• Los indicadores de estado (disponible / lesionado / recuperándose / suspendido) tienen tanto color como etiqueta de texto — el color nunca es la única señal.
• Los anillos de foco son visibles en todos los elementos interactivos para usuarios que navegan por teclado.
• Los mensajes de error usan role="alert" para que los lectores de pantalla los anuncien de inmediato.