Color y contraste

Cada par de colores del tema, medido en claro y oscuro. El lint rompe el build si uno baja de WCAG AA, así esta tabla solo puede mostrar valores que pasan.

Reglas

El texto necesita 4.5:1 contra su superficie; el texto grande (24px o más, o 19px en negrita) necesita 3:1.
Los bordes de los inputs y el anillo de foco necesitan 3:1, para que un campo se vea antes de escribir en él.
La etiqueta de un botón se mide contra su propio relleno, no contra la página: primary, secondary y accent pasan sobre su color.
El texto sobre color usa un tinte de blanco (white/80), nunca un gris neutro: el gris sobre azul se ensucia y pierde contraste.
El color nunca lleva el significado solo: los enlaces van subrayados, las etiquetas llevan una palabra y los errores un mensaje.

Pares del tema

Calculado desde @ssntl/tokens al compilar. La muestra usa los colores reales; el número es la relación de contraste.

**Contraste de los pares de tokens de ssntl/ui**WCAG 2.2 · Fuente: @ssntl/tokens
Uso	Claro	Oscuro	Mínimo	Resultado
Texto sobre la página`foreground / background`	17.57	17.57	4.5	AAA
Texto sobre una tarjeta`foreground / card`	19.67	16.14	4.5	AAA
Texto atenuado sobre la página`muted-foreground / background`	5.95	13.93	4.5	AA
Texto atenuado sobre una tarjeta`muted-foreground / card`	6.66	12.80	4.5	AA
Texto atenuado sobre tarjeta muted`muted-foreground / muted`	5.95	12.04	4.5	AA
Etiqueta neutra`muted-foreground / secondary`	5.43	10.69	4.5	AA
Botón primary`primary-foreground / primary`	19.67	17.57	4.5	AAA
Botón secondary`secondary-foreground / secondary`	16.05	13.47	4.5	AAA
Botón accent`white / blue-600`	8.59	8.59	4.5	AAA
Texto secundario sobre marca`white/80 / blue-600`	5.58	5.58	4.5	AA
Texto destructivo`destructive / card`	5.84	4.67	4.5	AA
Enlace`blue-600 · blue-300 / card`	8.59	9.48	4.5	AAA
Etiqueta en vivo`green-600 · green-400 / secondary`	4.59	8.64	4.5	AA
Borde de input`input / background`	3.08	5.69	3.0	Pasa
Anillo de foco`ring / background`	7.67	7.21	3.0	Pasa