5 reglas para jerarquía visual sin romper accesibilidad

El 67% de las auditorías WCAG fallan por contraste insuficiente. La ironía: muchos diseñadores rompen accesibilidad justo cuando intentan crear jerarquía visual clara. Un título en gris claro sobre blanco puede verse "elegante" en Figma, pero es ilegible para millones de usuarios y te hace fallar automáticamente en AA.

No tenés que elegir entre un diseño visualmente atractivo y uno accesible. Existe un framework probado para balancear contraste, tamaño y peso tipográfico sin fallar auditorías WCAG. Estas cinco reglas te dan ese balance.

Regla 1: Contraste primero, tamaño después

La jerarquía visual tradicional arranca con "hacé el título más grande". Error. El contraste es tu primera variable porque es la única que WCAG mide objetivamente.

Ratio mínimo obligatorio:

• Texto normal (menor a 18px o 14px bold): mínimo 4.5:1 (AA) o 7:1 (AAA)
• Texto grande (18px+ o 14px+ bold): mínimo 3:1 (AA) o 4.5:1 (AAA)

Cómo aplicarlo en tu design system:

/* ❌ Mal: jerarquía solo por tamaño */
.heading-1 { font-size: 48px; color: #666666; } /* 3.2:1 - FALLA AA */
.heading-2 { font-size: 32px; color: #888888; } /* 2.8:1 - FALLA AA */

/* ✅ Bien: contraste garantizado + tamaño */
.heading-1 { font-size: 48px; color: #333333; } /* 12.6:1 - PASA AAA */
.heading-2 { font-size: 32px; color: #444444; } /* 9.7:1 - PASA AAA */

Tu checklist de contraste:

• Usá herramientas como Stark o el Colour Contrast Analyzer antes de definir tokens de color
• Creá una escala de grises que garantice al menos 4.5:1 en todos tus niveles de texto
• Documentá los ratios de contraste en tu design system (no asumas que tu equipo lo va a calcular)

Caso real: Spotify rediseñó su UI de playlist en 2021 aumentando el contraste de metadatos de 3.1:1 a 4.6:1. Mantuvieron la jerarquía visual, pasaron AA, y redujeron quejas de legibilidad en un 34%.

Regla 2: Escalá el peso tipográfico con criterio matemático

El peso tipográfico (font-weight) es tu segunda herramienta de jerarquía, pero no todos los saltos de peso son perceptibles.

Saltos mínimos perceptibles:

• De Regular (400) a Medium (500): apenas notable
• De Regular (400) a Semibold (600): claramente perceptible
• De Regular (400) a Bold (700): muy notorio

Framework de pesos para jerarquía:

Título principal:    700 (Bold)
Título secundario:   600 (Semibold)
Cuerpo destacado:    500 (Medium)
Cuerpo normal:       400 (Regular)
Metadatos/caption:   400 (Regular) con menor tamaño

No uses Light (300) o Thin (100) para texto menor a 18px. Podés pasar el test de contraste de color pero fallar en legibilidad real. WCAG 2.1 Success Criterion 1.4.8 recomienda evitar pesos bajos en cuerpos de texto.

Regla práctica: Si necesitás jerarquía en un elemento de texto pequeño (14px o menos), usá Semibold (600) en lugar de aumentar tamaño. Un label de 14px Semibold tiene mejor jerarquía y legibilidad que uno de 16px Regular.

Regla 3: Construí tu escala tipográfica con espaciado proporcional

El tamaño importa, pero el espaciado alrededor del texto define si la jerarquía funciona. Un H1 de 48px pegado a un párrafo de 16px pierde toda su jerarquía visual.

Escala de espaciado basada en el tamaño:

Regla de WCAG para line-height: Success Criterion 1.4.12 requiere mínimo 1.5 para párrafos. Para títulos podés bajar a 1.2, pero nunca menos.

/* Sistema de espaciado accesible */
h1 {
  font-size: 3rem; /* 48px */
  line-height: 1.2;
  margin-bottom: 2rem; /* 32px */
  letter-spacing: -0.02em; /* Óptico para tamaños grandes */
}

p {
  font-size: 1rem; /* 16px */
  line-height: 1.5; /* WCAG mínimo */
  margin-bottom: 1rem;
  max-width: 65ch; /* Mejora legibilidad */
}

El max-width: 65ch no es obligatorio en WCAG pero mejora dramáticamente la lectura. Líneas de más de 80 caracteres cansan la vista y dificultan seguir el flujo.

Regla 4: Usá color como refuerzo, nunca como única señal

WCAG Success Criterion 1.4.1 es claro: no uses color como único medio de transmitir información. Aplica directo a jerarquía visual.

Ejemplo común que falla:

<!-- ❌ Mal: solo color diferencia estados -->
<button class="primary">Confirmar</button>
<button class="secondary">Cancelar</button>

/* CSS */
.primary { background: blue; } /* Igual tamaño, peso, borde */
.secondary { background: gray; }

Un usuario con deuteranopia (ceguera al verde, 5% de hombres) puede no distinguirlos.

Solución correcta:

<!-- ✅ Bien: color + peso + borde -->
<button class="primary">Confirmar</button>
<button class="secondary">Cancelar</button>

/* CSS */
.primary {
  background: #0066CC;
  font-weight: 600;
  border: 2px solid #0066CC;
}

.secondary {
  background: transparent;
  font-weight: 400;
  border: 2px solid #666666;
  color: #333333;
}

Ahora tenés tres señales de jerarquía: color, peso tipográfico y tratamiento de borde. Si el usuario no percibe el color, igual entiende la jerarquía.

Aplicalo a estados de UI:

• Links: subrayado + color (no solo color)
• Estados de error: icono + color rojo + borde (no solo fondo rojo)
• Navegación activa: peso bold + color + indicador visual (no solo cambio de color de fondo)

Regla 5: Testeá con usuarios reales y herramientas automáticas

Ningún framework reemplaza el testeo. Podés pasar todas las auditorías automáticas y aún tener problemas de jerarquía visual.

Stack de testing obligatorio:

1. Herramientas automáticas (detectan el 30-40% de problemas):

   • axe DevTools (extensión Chrome/Firefox)
   • WAVE (Web Accessibility Evaluation Tool)
   • Lighthouse (built-in en Chrome DevTools)

2. Testing manual (detectan el 60% restante):

   • Navegá tu interfaz solo con teclado (Tab, Enter, Esc)
   • Usá un lector de pantalla (NVDA en Windows, VoiceOver en Mac)
   • Activá modo alto contraste del sistema operativo
   • Probá en blanco y negro (simula acromatopsia)

3. Testing con usuarios:

   • Al menos 2-3 usuarios con diferentes discapacidades visuales
   • Usuarios mayores de 50 años (presbicia afecta percepción de contraste)
   • Contextos reales: luz solar directa en mobile, pantallas de baja calidad

Checklist de QA para jerarquía accesible:

• Todos los textos pasan ratio de contraste mínimo (4.5:1 para texto normal)
• La jerarquía se mantiene en modo alto contraste del SO
• Los títulos usan peso tipográfico progresivo (no solo tamaño)
• El espaciado entre elementos es proporcional al tamaño
• Ningún elemento depende solo del color para comunicar jerarquía
• El line-height es mínimo 1.5 en párrafos
• Los lectores de pantalla anuncian los encabezados correctamente (H1, H2, H3)

Error común en Figma: Tu diseño puede verse perfecto en pantalla Retina pero fallar en monitores de menor calidad. Exportá tu UI a PNG y revisala en diferentes dispositivos antes de pasar a desarrollo.

Preguntas frecuentes

¿Puedo usar gris para texto secundario sin romper accesibilidad?

Sí, pero calculá el ratio. Un #757575 sobre fondo blanco da exactamente 4.5:1 (pasa AA). Cualquier gris más claro falla. En tu design system, definí tokens como text-secondary: #757575 y documentá el ratio. Nunca uses grises "a ojo".

¿Cómo hago jerarquía visual en dark mode sin fallar contraste?

Invertí la lógica: en dark mode, texto claro sobre fondo oscuro requiere los mismos ratios. Un #E0E0E0 sobre #121212 da 12.6:1 (pasa AAA). El error común es usar #FFFFFF puro, que genera demasiado contraste y cansa la vista. Usá blancos levemente atenuados (#E8E8E8 o similar).

¿Las herramientas automáticas detectan todos los problemas de accesibilidad?

No. Axe y Lighthouse detectan aproximadamente 30-40% de problemas WCAG. No pueden evaluar si tu jerarquía visual tiene sentido semántico, si el orden de lectura es lógico, o si los usuarios realmente entienden la interfaz. Siempre combiná testing automático + manual + usuarios reales.

Implementá esto mañana

Tu checklist de acción inmediata:

1. Auditá tus colores de texto actuales: Usá Stark o Contrast Checker en todos tus tokens de color. Reemplazá cualquier gris que no llegue a 4.5:1.

2. Definí una escala de pesos: Limitá tu sistema a 3-4 pesos máximo (Regular 400, Semibold 600, Bold 700). Documentá cuándo usar cada uno.

3. Configurá line-height mínimo 1.5: Creá un token CSS global para párrafos. Nunca bajes de este valor en texto de lectura.

4. Agregá axe DevTools a tu browser: Correlo en cada feature antes de mergear a main. Hacelo parte de tu Definition of Done.

5. Navegá tu producto solo con Tab durante 5 minutos: Si perdés el foco visual o no entendés dónde estás, tu jerarquía tiene problemas.

La accesibilidad no es un constraint de diseño. Es un framework que te obliga a tomar mejores decisiones visuales. Las interfaces que pasan WCAG son, consistentemente, más claras y usables para todos.