Sistema de diseño de alto contraste para la plataforma de monitorización de flotas eléctricas. Tokens, componentes y reglas de accesibilidad WCAG 2.2 AA.
Versión 1.0.0
Accesibilidad WCAG 2.2 AA
Tipografía Roboto / STIX Two / Source Code Pro
Plataforma Web Dashboard B2B
01 Tokens de Color
Paleta semántica. Nunca usar valores hexadecimales directamente en código — referenciar siempre mediante token.
--color-primary
#BBF351
Acción principal · Neon Verde
--color-secondary
#00BCFF
Datos · Métricas · Neon Cian
--color-success
#16A34A
Estado OK · Vehículo activo
--color-warning
#D97706
Alerta leve · Batería baja
--color-danger
#DC2626
Error crítico · Avería
--color-text
#111827
Texto base · Alto contraste
--color-text-muted
#6B7280
Labels · Metadatos
--color-surface
#FFFFFF
Fondo tarjeta · Input
02 Escala Tipográfica
Escala modular 14/16/18/24/32/40. Tres familias con rol semántico estricto.
Display H1
STIX Two Text · 2.5rem · 700 Pantallas de KPI, títulos de sección
84 Vehículos Activos
Heading H2
Roboto · 2rem · 700 Títulos de panel, secciones
Estado de la Flota
Heading H3
Roboto · 1.5rem · 600 Subsecciones, grupos de datos
Ruta Barcelona — Madrid
Body MD
Roboto · 1rem · 400 Texto de párrafo, descripción
El vehículo VLT-2847 ha completado el ciclo de carga al 98%. Autonomía estimada: 412 km según condiciones actuales de tráfico.
Label Caps
Source Code Pro · 0.875rem · 600 Etiquetas, tokens, metadatos
ESTADO — CARGANDO · MATRÍCULA 4829 BKH
03 Espaciado
Escala base-4. Todos los márgenes, paddings y gaps deben ser múltiplos de 4px. Usar tokens, nunca valores arbitrarios.
sp-1
4px
sp-2
8px
sp-3
12px
sp-4
16px
sp-6
24px
sp-8
32px
04 Botones
El botón primario usa --color-primary con texto oscuro. Contraste mínimo 4.5:1 verificado. No usar texto blanco sobre verde neon.
Variante
Uso
Background
Hover
Primary
Acción principal única por pantalla
#BBF351
#A8DB3C (10% oscurecer)
Secondary
Acciones secundarias, outline
transparent / border #00BCFF
bg rgba(0,188,255,0.08)
Ghost
Cancelar, acciones terciarias
transparent / border #E5E7EB
bg #F9FAFB
Danger
Acciones destructivas, máx. 1 por vista
#DC2626
#B91C1C
05 Tarjetas de Telemetría
Componente de dato numérico con acento de color semántico en borde superior (3px). Tipografía display para el valor principal.
Carga batería
87%
↑ +3% última hora
Velocidad media
74km/h
— Estable
Autonomía restante
312km
↑ Ruta óptima
Temperatura motor
78°C
↑ Revisar en 15 min
Vehículos activos
24/28
↑ 4 en ruta nueva
Alertas críticas
2
↓ VLT-1093, VLT-2847
06 Badges de Estado
Estado de vehículo. Siempre con indicador visual de color + texto. No depender solo del color.
ActivoEn ruta confirmada
CargandoEstación Logista Norte
AlertaTemperatura elevada
OfflineSin señal GPS 42 min
07 Inputs
Focus visible con halo de color primario (3px). Estado de error con color danger. Label en monospace caps.
Búsqueda por matrícula, nombre o zona
Formato inválido. Ejemplo correcto: VLT-1093
08 Anti-patrones Prohibidos
Casos documentados de implementación incorrecta del sistema de diseño.
No hacer
Texto blanco sobre neon verde
El contraste blanco/#BBF351 es 1.4:1 — falla WCAG AA (mínimo 4.5:1). Siempre usar --color-text (#111827) sobre primary.
Hacer
Texto oscuro sobre neon verde
Contraste #111827/#BBF351 es 8.3:1 — supera WCAG AAA. Regla: sobre cualquier color brillante, usar siempre --color-text.
No hacer
ACTIVOCARGANDOALERTA
Badges con fondo sólido saturado compiten visualmente y generan ruido. Usar versiones con fondo tinted (10-15% opacidad) y borde coloreado.
Hacer
ActivoCargandoAlerta
Fondos tinted, borde semitransparente y texto en tono oscuro del mismo color. Balance entre semántica y jerarquía visual.
09 QA Checklist de Code Review
Ejecutar en cada PR que toque UI. Marcar como bloqueante cualquier fallo de accesibilidad (a11y).
a11y
Contraste texto/fondo ≥ 4.5:1 en todos los componentes de texto. Herramienta: axe-core o WebAIM Contrast Checker.
a11y
Focus visible presente en todos los elementos interactivos. Outline mínimo 2px con offset 2px usando --color-primary o --color-secondary.
token
No existen valores hexadecimales hardcodeados en CSS/JS. Todos los colores referencian tokens CSS custom properties.
token
Espaciados son múltiplos de 4px. No existen valores como margin: 7px, padding: 10px 13px.
visual
Botón primario usa texto --color-text (#111827), nunca blanco. Verificar en inspección de elemento.
a11y
Badges de estado incluyen texto además del color. No transmitir estado solo mediante color (WCAG 1.4.1).
ux
Estados de hover, focus, active y disabled implementados en todos los botones e inputs.
token
Tipografía usa las tres familias en su rol correcto: Roboto (body/UI), STIX Two Text (display numérico), Source Code Pro (labels/mono).
ux
Cada vista tiene máximo un botón Primary y máximo un botón Danger visible simultáneamente.
a11y
Inputs con error incluyen mensaje de error en texto (no solo borde rojo) asociado con aria-describedby.