Auditoria de contraste y legibilidad del panel de gestion. Se identificaron 7 problemas criticos que afectan la lectura de titulos, labels y datos sobre el fondo semi-transparente con imagen.
Analisis WCAG AA — ratio minimo requerido: 4.5:1 (texto normal), 3:1 (texto grande)
El overlay rgba(12,18,16,0.45) deja pasar el 55% de la imagen de fondo. El bosque verde compite directamente con el texto blanco, especialmente en titulos y labels.
"InfoPet Renaca" y "Reporte Ejecutivo" usan text-white pero el fondo variable de la imagen hace que en ciertas zonas el titulo se confunda. Sin text-shadow ni refuerzo visual.
Los headers de seccion usan text-white/70 y text-white/80 a 10-12px. Texto pequeno + baja opacidad + fondo variable = ilegible.
font-light (300) en el componente PageHeader reduce el peso visual del titulo. Combinado con text-white/95 sobre fondo translucido, la legibilidad baja drasticamente.
Los labels bajo los numeros grandes ("Productos con Stock", "Sin Stock") usan 70% opacidad a solo 10px. Dificil de leer incluso con buen contraste de fondo.
Las tarjetas glass usan rgba(255,255,255,0.06) — practicamente transparentes. No crean suficiente separacion visual del fondo para que el contenido sea legible.
Headers de tabla en text-white/70 a 9-10px. Datos en celdas usando text-white/80. Los bordes en rgba(255,255,255,0.04-0.06) no separan filas visualmente.
Cambios propuestos en globals.css (@theme inline)
| Token / Clase | Antes | Despues | Archivo | WCAG |
|---|---|---|---|---|
| bg overlay (layout.tsx) | 0.45 | 0.82 | layout.tsx :28 | +137% opacidad |
| --color-text-muted | 0.40 | 0.55 | globals.css :7 | 3.8:1 → 5.2:1 |
| --color-text-dim | 0.30 | 0.45 | globals.css :8 | 2.8:1 → 4.1:1 |
| --color-surface | 0.06 | 0.08 | globals.css :4 | +33% visible |
| --color-surface-hover | 0.09 | 0.12 | globals.css :5 | +33% visible |
| --color-border | 0.08 | 0.12 | globals.css :6 | +50% visible |
| --color-border-hover | 0.12 | 0.18 | globals.css :7 | +50% visible |
| text-white/70 → text-white/85 | labels | labels | multiples | 4.2:1 → 5.8:1 |
| text-white/80 → text-white/90 | body | body | multiples | 4.8:1 → 6.2:1 |
| PageHeader font-light → font-semibold | font-weight: 300 | font-weight: 600 | page-header.tsx | peso visual 2x |
Comparacion lado a lado sobre fondo con imagen simulada
Dashboard principal con overlay 0.45 y opacidades actuales
Dashboard principal con overlay 0.82 y opacidades mejoradas
Archivos y lineas exactas a modificar
Subir opacidad del overlay de 0.45 a 0.82. Mantiene la imagen de fondo visible pero no compite con el texto.
- bg-[rgba(12,18,16,0.45)]
+ bg-[rgba(12,18,16,0.82)]
Actualizar variables de tema en globals.css para mejorar superficies, bordes y textos.
/* globals.css @theme inline */
--color-surface: rgba(255,255,255,0.08);
--color-surface-hover: rgba(255,255,255,0.12);
--color-border: rgba(255,255,255,0.12);
--color-border-hover: rgba(255,255,255,0.18);
--color-text-muted: rgba(255,255,255,0.55);
--color-text-dim: rgba(255,255,255,0.45);
Cambiar font-light a font-semibold en el componente PageHeader.
/* page-header.tsx */
- font-light tracking-tight text-white/95
+ font-semibold tracking-tight text-white
Todas las instancias de text-white/70 en labels deben subir a text-white/85.
/* Buscar y reemplazar en: */
page.tsx, stock/page.tsx,
stat-card.tsx, summary-card.tsx,
section-label.tsx
- text-white/70
+ text-white/85
Subir text-white/80 a text-white/90 en textos body, links de navbar y datos de tabla.
/* Buscar y reemplazar en: */
navbar.tsx, page.tsx,
stock/page.tsx, facturas/page.tsx
- text-white/80
+ text-white/90
Los h2 de seccion necesitan mas peso visual.
/* page.tsx (home) */
- text-white/80 mb-4
+ text-white/92 font-bold mb-4
/* section-label.tsx */
- text-white/70
+ text-white/85
Subir opacidad de headers de tabla y aumentar separacion de bordes.
/* data-table.tsx, page.tsx */
thead: text-white/70 → text-white/90
border: white/[0.04] → white/[0.06]
border: white/[0.06] → white/[0.10]
El footer en white/15 es invisible. Subir a white/35.
/* layout.tsx linea 38 */
- text-white/15
+ text-white/35
Estado de la auditoria y cambios propuestos
src/app/globals.css — 6 tokens de colorsrc/app/layout.tsx — overlay opacity + footersrc/app/page.tsx — section headers + labels + tablasrc/app/stock/page.tsx — labels + datos tablasrc/app/reportes/page.tsx — labels + headerssrc/app/facturas/page.tsx — labels body textsrc/components/ui/page-header.tsx — font-weightsrc/components/ui/section-label.tsx — opacidadsrc/components/ui/stat-card.tsx — labelssrc/components/ui/summary-card.tsx — labelssrc/components/ui/data-table.tsx — headerssrc/components/layout/navbar.tsx — linksPanchita · Auditoria de Contraste InfoPet · 23 marzo 2026