1.4.4 Cambiar el tamaño del texto
Criterio de éxito oficial
El texto, excepto los subtítulos y las imágenes de texto, puede ser redimensionado sin ayuda técnica hasta un 200% sin pérdida de contenido o funcionalidad.
¿Qué significa esto?
Cuando una persona aumenta el tamaño del texto del navegador al 200%, todo el contenido y todas las funciones deben seguir siendo accesibles. No puede haber texto recortado, solapado ni botones que desaparezcan.
Este criterio se refiere al zoom de texto del navegador (Ctrl/Cmd + tamaño de fuente), no al zoom de página completa —aunque ambos deben funcionar correctamente.
El texto debe seguir siendo legible y funcional al 200% — sin pérdida de contenido
Simulación de zoom al 200%
Así se ve un diseño que usa tamaños de texto fijos comparado con uno que usa unidades relativas al ampliarse al 200%:
El texto fijo desborda el contenedor al ampliar
Unidades CSS: relativas vs absolutas
La elección de la unidad CSS determina si el texto responderá al zoom del navegador:
Unidades relativas (recomendadas)
- font-size: 1rem
- font-size: 1.25em
- font-size: clamp(1rem, 2vw, 1.5rem)
- font-size: 120%
Unidades absolutas (problemáticas)
- font-size: 16px
- font-size: 12pt
- font-size: 1cm
- font-size: 10mm
rem y em son más seguros y predecibles porque escalan con la preferencia de fuente base del usuario.
¿Por qué importa?
Millones de personas aumentan el tamaño de letra de su navegador como única forma de leer contenido web. Si el diseño se rompe al hacer esto, quedan excluidas sin ninguna alternativa.
No todas las personas que necesitan texto más grande utilizan lectores de pantalla o tecnologías asistidas avanzadas. Muchas son personas mayores o con visión moderadamente baja que simplemente ajustan las preferencias del navegador.
¿Quién se ve afectado?
Baja visión
Necesitan texto más grande para leer con comodidad, sin usar tecnología asistida.
Personas mayores
La presbicia (dificultad para enfocar de cerca) aumenta con la edad y hace necesario texto más grande.
Pantallas de alta densidad
Usuarios con pantallas 4K o retina pueden preferir aumentar el texto a pesar del tamaño físico de la pantalla.
Configuraciones de sistema
Usuarios que configuran un tamaño de fuente base mayor en su sistema operativo o navegador.
Cómo implementarlo
1. Usa unidades relativas para el texto
/* ✓ Correcto: escala con preferencias del usuario */
body { font-size: 1rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
/* ✗ Problemático: no responde al zoom de texto */
body { font-size: 16px; }
h1 { font-size: 32px; }2. Evita overflow:hidden en contenedores de texto
/* ✗ El texto puede quedar recortado al ampliar */
.card { height: 200px; overflow: hidden; }
/* ✓ Permite que el texto crezca */
.card { min-height: 200px; overflow: visible; }3. Diseña layouts flexibles
/* ✓ Flexbox y Grid se adaptan al contenido */
.nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }Ejemplos prácticos
Formulario que falla al ampliar
/* ✗ Campos de tamaño fijo que se desbordan */
.form-input { width: 300px; font-size: 14px; }
.form-label { font-size: 12px; white-space: nowrap; }Formulario que funciona al ampliar
/* ✓ Campos flexibles */
.form-input { width: 100%; max-width: 20rem; font-size: 1rem; }
.form-label { font-size: 0.875rem; }Técnicas WCAG
| Código | Tipo | Descripción |
|---|---|---|
G142 | Suficiente | Usar una tecnología que tenga agentes de usuario de soporte de zoom de texto |
C28 | Suficiente | Especificar el tamaño del texto usando unidades em |
C12 | Suficiente | Usar porcentajes para los tamaños de fuente |
C13 | Suficiente | Usar tamaños de fuente nombrados |
C14 | Suficiente | Usar unidades em para los tamaños de fuente |
G146 | Suficiente | Usar diseño fluido |
G178 | Suficiente | Proporcionar controles en la página web que permitan a los usuarios seleccionar tamaños de texto alternativos |
G179 | Suficiente | Asegurar que no se produce pérdida de contenido cuando el texto es redimensionado sin cambiar el ancho del elemento contenedor |
Errores frecuentes
| Código | Descripción del fallo |
|---|---|
F69 | Fallo por recorte o solapamiento de texto al redimensionarlo en contenedores de altura fija |
F80 | Fallo por usar controles de formulario en Flash que no admiten el redimensionado de texto |
F94 | Fallo por usar unidades de longitud vh para el tamaño del texto |