Técnica CSS WCAG 2.2
C12Usar porcentajes para el tamaño de la fuente
En resumen
Esta técnica recomienda definir el tamaño del texto en CSS con valores porcentuales en lugar de unidades absolutas como los píxeles. Así el tamaño se calcula de forma proporcional al del elemento padre y los agentes de usuario pueden ampliar el contenido correctamente cuando el usuario cambia el tamaño del texto. Beneficia a las personas con baja visión y a cualquiera que necesite agrandar la letra para leer con comodidad.
Aplicabilidad
CSS
Descripción
El objetivo de esta técnica es especificar el tamaño de la fuente del texto de forma proporcional, para que los agentes de usuario puedan escalar el contenido de manera eficaz. Si se especifica un font-size para el elemento body, todos los demás elementos heredan ese valor, a menos que un selector más específico lo anule.
Ejemplos
Tamaños de fuente en porcentaje con CSS
Este ejemplo define el tamaño de la fuente del elemento strong de modo que su texto sea siempre mayor que el texto que lo rodea, en cualquier contexto en que se use. Suponiendo que los encabezados y los párrafos usan tamaños de fuente distintos, cada una de las palabras resaltadas de este ejemplo será mayor que el texto que la rodea.
<style>
strong {font-size: 120%}
</style>
<h1>Letting the <strong>user</strong> control text size</h1>
<p>Since only the user can know what size text works for them,
it is <strong>very</strong> important to let them configure the text size.</p>Pruebas
Procedimiento
- Comprobar que el valor de la propiedad CSS que define el tamaño de la fuente es un porcentaje.
Resultados esperados
- La comprobación n.º 1 es verdadera.
Recursos
- Cascading Style Sheets, Fonts (módulo de fuentes de CSS).
-
Propiedad
font-sizede CSS.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica C12 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
