Contraste y legibilidad en interfaces

Cómo elegir color, tamaño y ritmo tipográfico para que el contenido sea legible en condiciones reales de uso.

¿Cuánto sabes de Accesibilidad Web?

📘 Teoría

Claves teóricas

Decisiones de diseño y CSS que mejoran lectura sin sacrificar identidad visual.

Ratio mínima de contraste

Texto normal: 4.5:1; texto grande: 3:1 como mínimo según WCAG AA.

No dependas del color

Estados como error o éxito necesitan señal adicional: icono, texto o patrón.

Tamaño y densidad

Fuentes demasiado pequeñas y líneas demasiado largas disparan fatiga de lectura.

Interlineado útil

Un `line-height` en torno a 1.5 mejora comprensión en bloques largos.

Contraste de foco

El indicador de foco debe destacar también sobre fondos complejos.

Error habitual

Texto gris claro en botones y placeholders que parece “desactivado” sin estarlo.

Aplicación en proyectos reales

Cómo auditar legibilidad en un sistema de diseño existente.

Empieza por tokens de color y define pares semánticos validados para texto, fondo y foco.

Revisa componentes de alta frecuencia: menús, etiquetas de formulario, botones y tablas de datos.

Haz pruebas con zoom al 200% y brillo bajo para detectar problemas que en escritorio pasan desapercibidos.

Crea una escala tipográfica con tamaños mínimos por contexto.
Evita combinaciones de color sin validación objetiva.
Documenta excepciones visuales y su justificación de accesibilidad.
Incluye revisión de contraste en QA visual antes de cada release.

Patrón de código

Base CSS para texto legible y foco visible consistente.

Tokens de lectura accesible

:root {
  --text-main: #111827;
  --text-muted: #374151;
  --bg-main: #ffffff;
  --focus-ring: #1d4ed8;
}

body {
  color: var(--text-main);
  background: var(--bg-main);
  font-size: 1rem;
  line-height: 1.6;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}