Identidad de Marca y Construcción
Normas oficiales de uso, áreas de protección y especificaciones de contraste cromático sobre fondos clave.
Principios de Diseño Fundamentales
Human First
Priorizamos la diversidad cognitiva, motriz, visual y auditiva de las personas. Ningún usuario debe quedar excluido por diseño o barreras tecnológicas.
Claridad Radical
Jerarquías obvias, tipografía contundente, contraste explícito y ausencia total de patrones oscuros o acciones ambiguas.
Rigor Normativo WCAG 2.2
Cumplimiento técnico verificado de niveles AA y AAA. Marcado semántico, tags ARIA nativos y navegación por teclado natural.
Autonomía Asistida
Herramientas diagnósticas y widgets diseñados para otorgar control absoluto al usuario final sobre sus preferencias de visualización y audio.
Paleta Cromática & Ratios de Contraste
Medición certificada con algoritmos WCAG 2.2 (mínimo 4.5:1 texto regular y 3:1 texto grande).
1. Colores Institucionales & Core Brand
Brand Deep Purple
Color institucional base para encabezados, banners y botones principales.
Brand Midnight
Fondos oscuros, footers, contenedores de inmersión y alto contraste.
Primary Indigo
Llamadas a la acción (CTA), hipervínculos activos, botones píldora.
Electric Indigo
Hover states, focos de interacción y elementos activos destacados.
Brand Magenta
Gradiente oficial del isotipo "A" y acentos de identidad de marca.
Bright Magenta
Detalles de luz, badges de innovación e ilustraciones digitales.
Surface Tint
Fondos suaves de tarjetas, módulos secundarios y tablas de datos.
Signature Gradient
Degradado heráldico reservado para el isotipo y botones clave.
2. Escala Neutra y Superficies (10 Steps Tokens)
3. Tokens Semánticos & Estados de Interfaz Accesibles
Formas, Espaciado & Elevación
Tokens físicos para coherencia espacial, curvaturas accesibles y foco de teclado sin solapamiento.
Escala de Curvatura (Border Radius)
Sistema de Elevación & Anillo de Foco (Keyboard Ring)
Borde sólido 1px, sin sombra. Para listas y agrupaciones.
0 1px 2px. Para tarjetas secundarias y chips.
0 4px 6px. Para cards interactivas al hover y dropdowns.
0 10px 15px. Para modales, diálogos y popovers flotantes.
Foco obligatorio WCAG 2.4.7 (3:1 contraste respecto al fondo).
Sistema de Espaciado (Grid Base 8pt / 4pt Micro)
Familia Tipográfica: Inter
Inter está diseñada para alta legibilidad en interfaces de usuario y lectura con tecnologías de apoyo.
Transformamos la accesibilidad digital
Creamos espacios digitales accesibles
Beneficios de implementar accesibilidad web en tu organización
Evaluación exhaustiva de barreras y conformidad técnica
Apoyamos a empresas, públicas y privadas a asegurarse de que sus plataformas digitales y sitios web sean accesibles e inclusivos para todas las personas.
Nuestra metodología combina software de diagnóstico algorítmico con pruebas empíricas junto a usuarios reales con discapacidad visual, auditiva y motora.
Más de 12.000 URLs evaluadas en nuestro software de diagnóstico en los últimos 12 meses continuos.
Catálogo de Componentes Accesibles
Componentes diseñados bajo atomic design, probados con teclado, soporte táctil (touch target min 44x44px) y lectores de pantalla.
A) Botones y Acciones Interactivas
Target Size: ≥ 44x44pxEscala de Tamaños (Altura accesible)
44px de altura es el estándar mínimo exigido por WCAG 2.2 para evitar toques accidentales en pantallas móviles.
Estados Accesibles (Focus & Disabled)
Los botones deshabilitados mantienen semántica sin romper el árbol de accesibilidad.
B) Formularios y Controles Accesibles
Labels explícitos & ARIA statesinfo Por favor ingresa un dominio válido (ej: .cl o .com).
Formato verificado y conectado al motor de diagnóstico.
C) Badges, Chips y Filtros Accesibles
Alta visibilidad & significado explícitoD) Tarjetas de Servicio, Beneficios & Métricas
Inspiradas fielmente en la plataforma realEvaluación y Diagnóstico
Analizamos tu producto digital para identificar barreras según pautas WCAG 2.2 con informe exhaustivo de prioridades.
Accesibilidad y SEO
La accesibilidad digital mejora directamente la indexación semántica en Google, potenciando la visibilidad orgánica de tu plataforma.
Equivalente a más de 40 organizaciones y usuarios activos diarios en entornos productivos.
"Gracias al diagnóstico logramos la certificación internacional en menos de 90 días, eliminando 140 barreras visuales críticas."
E) Navegación, Breadcrumbs, Pestañas & Paginación
Orientación contextual universalControles táctiles de tamaño completo y atributos aria-current en la página activa.
F) Feedback, Alertas & Diálogos Modales Accesibles
role="alert" & focus trappingEstamos escaneando la página en segundo plano. Esto tomará aproximadamente 15 segundos.
El portal cumple con el 100% de los criterios de contraste exigidos por la norma.
Se encontraron 4 textos pequeños con ratio 3.2:1 (mínimo requerido 4.5:1).
El menú desplegable móvil atrapa el foco sin posibilidad de escape (violación WCAG 2.1.2).
Confirmar Envío de Auditoría
¿Deseas enviar el análisis completo de accesibilidad a los 4 evaluadores asignados de tu equipo técnico?
G) Barras de Progreso, Tooltips & Acordeón Accesible
role="progressbar" & aria-expandedCasos de Uso en Producto: Personas Reales y Tecnologías Asistivas
Implementación viva del sistema de diseño en entornos corporativos, pruebas de usuario con tecnología asistiva y consultoría técnica de conformidad.
Interacción con Línea Braille y Lectores de Pantalla
El sistema de diseño valida cada componente con usuarios que emplean tecnología asistiva física. Cada foco, botón y campo de texto cuenta con respuesta táctil y auditiva fluida y sin bloqueos.
Presentación de Diagnósticos y Estrategia WCAG 2.2
Nuestros consultores exponen hallazgos técnicos y métricas de conformidad ante directivos y equipos de ingeniería, priorizando la remediación de barreras críticas en tiempo récord.
Nadia Rodríguez / Especialista Principal
«Diseñar accesible no es una limitación estética: es la máxima expresión de ingeniería de software empática, eficiente y rigurosa para toda la ciudadanía digital.»
¿Deseas implementar estos componentes accesibles en tu aplicación?
Descarga el paquete completo con tokens CSS, código semántico certificado y documentación paso a paso.
Matriz de Conformidad WCAG 2.2 aplicada al Design System
Los 4 principios esenciales POUR (Perceptible, Operable, Comprensible y Robusto) implementados en cada token, variable y componente de la plataforma.
| Principio POUR | Criterio WCAG 2.2 | Nivel | Implementación en este Sistema |
|---|---|---|---|
| visibility Perceptible | 1.4.3 Contraste Mínimo & 1.4.11 | AA / AAA | Textos ≥ 4.5:1 (normal) y componentes UI ≥ 3:1 certificados en paleta de color. |
| touch_app Operable | 2.4.7 Foco Visible & 2.4.11 Apariencia de Foco | AA | Anillo ring-4 ring-offset-2 de alto contraste en todo elemento interactivo. |
| pan_tool Operable | 2.5.8 Tamaño de Objetivo Mínimo | AA (WCAG 2.2) | Área táctil obligatoria mínima de 44x44px en botones móviles y controles interactivos. |
| psychology Comprensible | 3.3.2 Etiquetas e Instrucciones & 3.3.1 | A | Inputs con label visible permanente, descripción de error asociada y helper texts. |
| memory Robusto | 4.1.2 Nombre, Función, Valor (Name, Role, Value) | A | Atributos ARIA (aria-expanded, aria-checked, aria-invalid) vinculados con software asistivo. |
Sin trampas de foco (Keyboard Trap Free), soporte para Tab, Shift+Tab, Enter, Espacio y Escape.
Todo estado de error o éxito incluye iconos descriptivos, texto explicativo y cambio de borde.
Tabla de Tokens de Diseño Semánticos Normalizados
Mapeo exhaustivo de variables CSS con referencia W3C DTCG y certificación de contraste WCAG 2.2.
| Token Semántico | Variable CSS | Muestra | Valor Base / Hex | Ratio Contraste | Rol & Aplicación |
|---|---|---|---|---|---|
| color-background-primary | var(--color-bg-primary) | #F8FAFC | 15.8:1 AAA | Fondo raíz del viewport y canvas de la aplicación | |
| color-surface | var(--color-surface) | #FAF8FF | 15.4:1 AAA | Superficies de tarjetas elevadas, paneles y tablas | |
| color-text-primary | var(--color-text-primary) | #0F172A | 16.1:1 AAA | Encabezados, títulos y textos de máxima jerarquía | |
| color-text-secondary | var(--color-text-secondary) | #475569 | 5.9:1 AA | Párrafos de apoyo, descripciones y subtítulos secundarios | |
| color-action-primary | var(--color-action-primary) | #4338CA | 7.1:1 AAA | Botones de acción primaria, enlaces y elementos clave | |
| color-action-brand | var(--color-action-brand) | #2F1C77 | 12.4:1 AAA | Botones institucionales, badges de autoría y navegación | |
| color-border | var(--color-border) | #E2E8F0 | 3.2:1 UI AA | Divisores, contornos de tarjetas y separadores estructurales | |
| color-border-focus | var(--color-border-focus) | #4F46E5 | 5.6:1 AAA | Anillo perimetral del foco accesible WCAG 2.4.11 |
Anatomía de Componentes & Nomenclatura
Estructura estándar bajo la convención: [Component] / [Variant] / [State] / [Size].
② Title & Primary Label
③ Body Content: Explicación concisa del elemento interactivo con tipografía Inter y contraste mínimo 7:1.
- ① Container: Padding 20px, border-radius 12px (rounded-xl), shadow-sm.
- ② Header Slot: Icono descriptivo 32x32px + etiqueta semántica.
- ③ Body Slot: Heading 4 + párrafo regular Inter 14px (line-height 1.4).
- ④ Action Slot: Link interactivo con padding touch target accesible.
- ① Label: Etiqueta semántica permanente asociada por ID/for.
- ② Indicator: Asterisco con aria-hidden="true" o texto explícito.
- ③ Input Container: Min-height 44px, border 2px, padding horizontal 14px.
- ④ Helper/Error: Vinculado mediante aria-describedby.
Patrones de Interacción & Directrices WCAG 2.2
Garantía de retroalimentación en todos los estados y directrices obligatorias de diseño inclusivo.
Matriz de Estados Interactivos (Primary Action)
Touch Target Mínimo: 44x44px
Conforme al criterio WCAG 2.2 (2.5.8 Target Size), ningún control interactivo puede tener dimensiones efectivas inferiores a 44x44 píxeles CSS en pantallas táctiles o móviles.
Motion: prefers-reduced-motion
Todas las animaciones decorativas y transiciones quedan automáticamente deshabilitadas si el sistema operativo del usuario tiene activa la preferencia de reducción de movimiento (WCAG 2.3.3).
Arquitectura POUR W3C
Toda pantalla debe ser Perceptible (suficiente contraste y alternativas textuales), Operable (navegación vía teclado), Comprensible (mensajes no ambiguos) y Robusta (código ARIA validado).
Do's & Don'ts Ilustrados
Comparativa visual directa entre implementaciones conformes y errores de diseño comunes.
palette 1. Uso de Color & Contraste
Texto oscuro (#0F172A) sobre fondo claro (#F8FAFC) logrando ratio 16:1.
Texto gris claro sobre fondo blanco (ratio 2.1:1, rechazo WCAG).
format_size 2. Tipografía & Longitud de Línea
Líneas de lectura de 60 a 75 caracteres y line-height proporcional de 1.5 a 1.6.
El espaciado vertical alivia la fatiga visual en usuarios con dislexia.
Texto justificado en ambos lados o con interlineado colapsado menor a 1.2.
El texto completamente justificado produce ríos blancos que desorientan a lectores.
smart_button 3. Botones y Microcopy de Enlaces
Textos explicativos con destino claro: «Descargar informe PDF».
Enlaces ambiguos genéricos como «Haz clic aquí» o «Más info».
input 4. Formularios y Manejo de Errores
Label visible permanente + mensaje de error con icono y texto orientativo.
Placeholder como único reemplazo del label o señalar error solo con borde rojo.