Listo
Un solo tema compartido
Cada componente usa los mismos roles semánticos.
Leer la guíaHerramientas / Color
Probador de paletas
Asigna roles semánticos, previsualiza el mismo tema en contexto y encuentra riesgos de contraste.
Editor del tema
Checks de contraste enfocados
Escena de vista previa
Las simulaciones de visión son aproximaciones aplicadas solo a la vista previa.
1. Editor del tema
2. Escena de vista previa
Escena de vista previa
Sitio de producto
Navegación, contenido principal, tarjetas, enlaces y llamadas a la acción.
Escritorio
Northstar
Construye un flujo de producto más claro.
Un ejemplo compacto de jerarquía, acciones, enlaces y superficies trabajando juntos.
Auditoría de accesibilidad
Los 7 checks pasan.
Pasa
| Par de roles | Ratio | Umbral | Estado |
|---|---|---|---|
| Texto del cuerpo sobre el fondo de página Texto del cuerpo / Fondo de página El texto normal debe alcanzar al menos 4.5:1 contra la página. | 14.63:1 | 4.5:1 | Pasa |
| Encabezado sobre el fondo de página Texto de encabezado / Fondo de página El texto grande debe alcanzar al menos 3:1 contra la página. | 17.85:1 | 3:1 | Pasa |
| Texto del cuerpo sobre la superficie Texto del cuerpo / Superficie El texto normal debe seguir legible en tarjetas y paneles. | 13.98:1 | 4.5:1 | Pasa |
| Etiqueta primaria sobre relleno primario Etiqueta primaria / Relleno primario Las acciones primarias necesitan etiquetas legibles en cada estado. | 6.70:1 | 4.5:1 | Pasa |
| Etiqueta secundaria sobre relleno secundario Etiqueta secundaria / Relleno secundario Las acciones secundarias también necesitan etiquetas legibles. | 14.48:1 | 4.5:1 | Pasa |
| Indicadores de estado sobre la superficie Retroalimentación / Superficie El color más débil de éxito, aviso o error debe alcanzar 3:1. Rol más débil: Éxito | 4.79:1 | 3:1 | Pasa |
| Indicador de foco sobre el fondo de página Indicador de foco / Fondo de página El foco de teclado debe seguir visible contra la página. | 7.09:1 | 3:1 | Pasa |