Accesibilidad
Los pares de color del canon con su contraste medido en cada build, el foco enseñado en vivo y las reglas que lo sostienen.
Esta página tiene la tabla de contraste de todos los pares de color del canon, medida en cada build. Úsala para comprobar si un texto se lee sobre un fondo antes de publicarlo. darkGray #afafaf no vale como texto sobre claro; para eso está black #272727 . Debajo tienes el foco en vivo, lo que está prohibido y las reglas generales.
Pares de contraste en vivo
Cada razón de contraste sale de la fórmula de luminancia relativa de WCAG 2.2 aplicada en build a los hex del canon.Pasa AAA ≥7:1 — texto normal a cualquier tamaño.
Pasa AA ≥4.5:1 — texto normal; AAA solo como texto grande.
Ver la tabla completa
| Texto | Fondo | Ratio | Veredicto | Uso |
|---|---|---|---|---|
#272727 | #faf9f7 | 14.20:1 | AAA | Texto base |
#272727 | #f5f5f5 | 13.70:1 | AAA | Texto base alterno |
#f5f5f5 | #272727 | 13.70:1 | AAA | Texto sobre black |
#272727 | #f9be4a | 8.89:1 | AAA | Texto sobre amber |
#272727 | #8acdee | 8.57:1 | AAA | Texto sobre el blue claro |
#f5f5f5 | #114f82 | 7.82:1 | AAA | Texto sobre deep blue |
#f5f5f5 | #794224 | 7.36:1 | AAA | Texto claro sobre el orange profundo |
#272727 | #7fbf80 | 6.88:1 | AA | Texto sobre green |
#f5f5f5 | #674a98 | 6.40:1 | AA | Texto sobre lila |
#272727 | #e887a7 | 6.01:1 | AA | Texto sobre pink |
Niveles WCAG 2.2
Los dos techos del sistema
Dos usos del canon no llegan a AAA y no se maquillan: se declaran con la medición que sale de este build, y su empleo queda acotado.amber como texto de cuerpo
El paso más oscuro de la escala cálida se queda en AA sobre claro: llegar a AAA pediría oscurecerlo hasta que dejara de ser el color de la marca. Vale para énfasis display, marcador, filete y cifra — nunca para un párrafo.
#8d5d27 · #ffffff Campo orange con ink encima
El campo de portada con su texto en ink pasa AA, y AAA solo a tamaño display. Su sitio es la superficie de portada, no una página con párrafos.
#272727 · #da7835 El foco, en vivo
Pulsa Tab para recorrer los especímenes: el anillo se adapta a la superficie. Al pulsarlos no hacen nada — existen para enseñar el foco.Prohibido
- Amber como color de texto sobre fondo claro. Para escribir en claro está su tono text-safe; el amber crudo se reserva para los rellenos.
- Texto blanco sobre amber, a cualquier peso y a cualquier tamaño: encima de amber el que se lee es black.
- DarkGray como texto informativo sobre claro — ahí es decoración. Si el dato importa va en black, y darkGray se queda para escribir sobre fondo oscuro.
- El color como único portador de significado en estados, errores y avisos: cada uno lleva además su icono y su texto.
- Texto por debajo de 8 pt, el mínimo legible del canon. Si no cabe, se recorta el texto — nunca el cuerpo.
- Un relleno claro con párrafos encima. Si un bloque tiene que llevar texto corrido, va sobre papel o va sobre oscuro; encima de un relleno claro el único que se lee es black.
Reglas generales
- Contraste mínimo 4.5:1 para texto normal (WCAG 2.2 AA).
- Contraste mínimo 3:1 para texto grande (24px, o 18.66px bold).
- Contraste mínimo 3:1 para elementos de UI (bordes, iconos).
- Foco visible en todo interactivo: anillo blue de 2 pt; sobre amber, anillo doble en black con halo claro.
prefers-reduced-motion: duraciones a 0.01ms y delays a 0 — nada queda oculto esperando animar.- Objetivo táctil de 24 × 24 px como mínimo en los controles, y de 44 px en los CTA.