Accesibilidad
No es una capa opcional: está en los tokens y se verifica en cada compilación.
Contraste verificado, no prometido
pnpm tokens:test mide 244 pares reales —texto sobre superficie, texto de
badge sobre su relleno, puntos de estado, series de gráficos, bordes de control
y anillo de foco— y falla la compilación si alguno incumple.
Hoy pasan 244 de 244.
Lo que ese test encontró
La primera vez que se ejecutó cayeron 19 pares. Todos «se veían bien»:
- Texto blanco sobre el ámbar de acento: 2,45:1. El ámbar es un color claro; el blanco encima nunca iba a funcionar.
- Blanco sobre el rojo de peligro en tema oscuro: 3,76:1.
- Los puntos de estado en ámbar, naranja, gris, el verde de WhatsApp y el oro, entre 1,98:1 y 2,80:1 contra el blanco.
borderno llegaba a 3:1 y no podía llegar sin ensuciar la interfaz.
La corrección que enseña algo
Los tres primeros se arreglaron cambiando el tono. El cuarto no: se separó el concepto.
| Token | Contraste | Para qué |
|---|---|---|
border | ~1,3:1 | Divisores decorativos: filas, separadores, tarjetas |
borderStrong | ~1,6:1 | Controles con etiqueta visible: botones |
borderInput | ≥ 3:1 | Controles sin etiqueta propia: input, select, checkbox |
La diferencia está en si el borde es la única pista de que ahí hay un control. Un botón dice «Guardar» dentro; una caja de texto vacía no dice nada, y por eso su contorno cae bajo WCAG 1.4.11.
El color nunca va solo
Cada token de dominio expone color, etiqueta e icono, y los componentes renderizan los tres. Quien no distingue el violeta del verde distingue «Escalado» de «Resuelto» por el icono y el texto.
El test verifica además que dos valores del mismo registro nunca compartan punto de color: sin eso, un gráfico de tickets por estado pintaría «pendiente» y «cerrado» del mismo gris.
Lo demás
- Foco visible siempre.
focusRinges un token propio; el anillo del navegador se sustituye, nunca se elimina. - 44 pt de objetivo táctil mínimo en móvil.
- Movimiento reducido respetado en las dos plataformas.
- Formatos
es-PE, monedaPEN, con los helpers en el paquete de tokens para que ambas formateen igual.