Playground de tokens
Dos herramientas en vivo y sin dependencias: el comparador de contraste APCA y el generador de temas por semilla OKLCH. Ambas aplican las reglas del documento maestro (§5 y §15).
Comparador APCA en vivo
Algoritmo apca-w3 0.0.98G-4g, el mismo de herramientas/medir_apca.py.
Lc positivo: texto oscuro sobre fondo claro; negativo: texto claro sobre fondo oscuro.
Se evalúa |Lc| contra el umbral de cada uso.
Texto grande o seminegrita (24 px / 600)
Texto de cuerpo a 16 píxeles para juzgar la legibilidad real del par.
Lc =
| Uso | Umbral |Lc| | Estado |
|---|---|---|
| Texto de cuerpo | 75 | |
| Texto grande o seminegrita | 60 | |
| Mínimo UI / texto no esencial | 45 | |
| Elementos no textuales (bordes, iconos) | 15 |
Generador de temas por semilla
Un tema de marca es un re-mapeo de la capa semántica derivado de una sola semilla: el matiz H. La luminosidad y el croma del original se conservan, así que el contraste medido se mantiene para cualquier matiz y la variante hereda la validación de accesibilidad.
Enlace de ejemplo
Badge suave
- primaria
- primaria-activa
- primaria-suave
CSS resultante