01 · Concepto
Percepción: distinguir contenido y fondo
Una interfaz es legible cuando el contenido conserva suficiente separación visual, no esconde significado en el color y sigue funcionando al ampliarse.
El contraste es una relación entre dos colores, no una propiedad aislada. Una combinación puede funcionar para texto grande y fallar para texto normal. Además, cumplir un ratio no compensa tipografías diminutas, líneas excesivamente largas o componentes que se superponen al aumentar el tamaño.
Principio esencial
El contenido debe distinguirse claramente del fondo y conservar su significado cuando cambian la percepción, el dispositivo o el nivel de ampliación.
Diferencia perceptible
Texto, controles, foco y gráficos necesitan contraste suficiente respecto a los colores adyacentes.
Adaptación
La persona debe poder ampliar y personalizar el contenido sin perder información ni funcionalidad.
02 · Fundamentos
Cuatro decisiones que sostienen la legibilidad
La checklist de la presentación combina medidas objetivas con señales visuales redundantes.
Contraste de texto
Como referencia AA: 4.5:1 para texto normal y 3:1 para texto grande, considerando las excepciones del criterio.
Independencia del color
Estados, categorías y series deben distinguirse también mediante texto, forma, patrón o posición.
Enlaces reconocibles
El subrayado u otra señal no cromática permite encontrar enlaces dentro de un párrafo sin depender de diferencias de tono.
Ampliación y reflujo
No bloquees el zoom. El contenido debe reorganizarse sin recortes ni desplazamiento en dos direcciones para leer.
03 · Personas y contextos
¿A quién beneficia?
Las condiciones de percepción cambian entre personas, pantallas y entornos.
- Personas con baja visión: necesitan contraste, ampliación y reflujo para leer sin perder el contexto.
- Personas con deficiencias en la percepción del color: reconocen estados y categorías mediante etiquetas, patrones y formas.
- Personas con dislexia o dificultades de lectura: se benefician de texto claro, espacios consistentes y líneas de longitud moderada.
- Personas mayores: pueden experimentar menor sensibilidad al contraste y necesitar tamaños mayores.
- Cualquier persona bajo el sol, con brillo reducido o una pantalla de baja calidad: depende de una diferencia visual robusta.
04 · Barreras frecuentes
Cuando el contenido existe, pero cuesta percibirlo
05 · Criterios de diseño
Qué debe comprobarse
Mide el contraste y después prueba cómo se comporta la interfaz en condiciones reales.
Texto con contraste suficiente
El texto normal alcanza 4.5:1 y el texto grande 3:1. Logotipos y texto inactivo tienen consideraciones específicas.
Relacionado: WCAG 1.4.3 · Nivel AA
Controles y foco distinguibles
Los límites, iconos y estados necesarios para identificar componentes alcanzan al menos 3:1 frente a colores adyacentes.
Relacionado: WCAG 1.4.11 · Nivel AA
Información independiente del color
Acompaña el color con texto, símbolos, patrones o diferencias de forma que comuniquen el mismo significado.
Relacionado: WCAG 1.4.1 · Nivel A
Ampliación permitida
No bloquees el zoom del navegador y verifica que el texto pueda ampliarse hasta 200 % sin perder contenido ni funciones.
Relacionado: WCAG 1.4.4 · Nivel AA
Reflujo sin lectura bidimensional
A 320 píxeles CSS de ancho, el contenido común debe reorganizarse sin exigir desplazamiento horizontal y vertical para leer.
Relacionado: WCAG 1.4.10 · Nivel AA
Espaciado adaptable
El contenido continúa legible cuando la persona aumenta altura de línea, espacios entre párrafos, letras y palabras.
Relacionado: WCAG 1.4.12 · Nivel AA
06 · Ejemplo aplicado
Un estado que conserva su significado
Problema
Solo cambia el color
- El punto no contiene texto.
- El significado depende de distinguir el tono.
- En escala de grises puede perderse la diferencia.
Solución
Color, icono y texto
- La palabra identifica el estado.
- El icono refuerza la señal.
- El color se convierte en una ayuda adicional.
Decisión clave: el color puede reforzar el significado, pero nunca cargarlo por sí solo.
07 · Práctica
Comprueba lo aprendido
Mide una combinación, añade señales redundantes y observa el contenido ampliado.
Actividad 1: encuentra una combinación legible
Modifica los colores o prueba los ejemplos. La actividad se completa cuando el texto normal alcanza al menos 4.5:1.
Texto de muestra para comprobar la lectura.
Actividad 2: añade señales además del color
El ejemplo inicial usa color para estados y enlaces. Activa la mejora para incorporar texto, símbolos y subrayado.
Activa la mejora para revelar señales redundantes.
Actividad 3: explora la ampliación y el reflujo
Prueba 200 % y 400 %. El panel aumenta el texto y reorganiza su contenido sin recortarlo.
Inscripción abierta
Consulta requisitos, fechas y apoyos disponibles para completar el proceso.
Ver ficha rápidaExplora los niveles de 200 % y 400 %.
08 · Ficha rápida
Contraste y legibilidad en seis preguntas
- ¿El texto se distingue?
- Mide 4.5:1 para texto normal y 3:1 para texto grande.
- ¿Los controles se reconocen?
- Revisa límites, estados, iconos y foco frente a colores adyacentes.
- ¿El significado depende del color?
- Añade texto, símbolos, patrones o formas.
- ¿Los enlaces parecen enlaces?
- Incluye una señal no cromática, especialmente dentro de párrafos.
- ¿Puedo ampliar?
- No bloquees el zoom y prueba al menos 200 %.
- ¿El contenido se reorganiza?
- Comprueba reflujo, separación y ausencia de recortes.
Resultado
Progreso de las actividades
Completa las tres actividades para terminar el tutorial.