WCAG explicado para diseñadores: niveles A, AA y AAA
WCAG son las pautas de accesibilidad web del W3C. Qué significan los niveles A, AA y AAA, sus cuatro principios y qué nivel conviene apuntar como diseñador.
¿Qué es WCAG y para qué sirve?
WCAG es el estándar de referencia para la accesibilidad web. Lo publica el W3C a través de su Iniciativa de Accesibilidad Web (WAI), y la versión vigente es WCAG 2.2, publicada como Recomendación del W3C el 5 de octubre de 2023 y actualizada el 12 de diciembre de 2024. El contenido que cumple WCAG 2.2 también cumple WCAG 2.0 y 2.1, porque la nueva versión no reemplaza a las anteriores. WCAG 2.2 es además un estándar ISO (ISO/IEC 40500:2025). WCAG 3.0 existe solo como borrador temprano y todavía no sustituye a nada.
WCAG 2.2 agregó 9 criterios de éxito. Los que más afectan al diseño de interfaces son el foco no oculto (2.4.11, AA), los movimientos de arrastre con alternativa (2.5.7, AA), el tamaño mínimo del objetivo (2.5.8, AA), la ayuda consistente (3.2.6, A), la entrada redundante (3.3.7, A) y la autenticación accesible (3.3.8, AA). También eliminó el criterio 4.1.1 (Procesamiento), que ya no se evalúa en 2.2.
Para un diseñador, WCAG es el lenguaje común con legal, con desarrollo y con el cliente. Cuando alguien pregunta “¿esto es accesible?”, la respuesta útil es “¿cumple qué criterio, en qué nivel?”.
¿Qué significan los niveles A, AA y AAA?
Los niveles son acumulativos. Para cumplir AA hay que cumplir todo A y todo AA. Para cumplir AAA, todo lo anterior y todo AAA.
| Nivel | Qué representa | Ejemplo de criterio |
|---|---|---|
| A | El mínimo. Sin esto, hay barreras graves | 1.1.1 Contenido no textual: las imágenes tienen alternativa textual |
| AA | El objetivo habitual para productos digitales | 1.4.3 Contraste mínimo: 4.5:1 para texto normal, 3:1 para texto grande |
| AAA | El nivel más exigente | 1.4.6 Contraste mejorado: 7:1 para texto normal |
El W3C aclara que AAA no se recomienda exigir como política general para un sitio entero. Algunos criterios de AAA son difíciles de cumplir en todo el contenido, por ejemplo la lengua de señas para todo el video o el contraste de 7:1. Lo razonable es aplicarlos donde aportan valor, como en un texto de salud o un servicio público.
¿Cuáles son los cuatro principios?
WCAG organiza todo en cuatro principios:
- Perceptible. La información debe presentarse de formas que el usuario pueda percibir: texto alternativo, subtítulos, contraste suficiente.
- Operable. La interfaz debe poder usarse: con teclado, con tiempo suficiente, sin provocar convulsiones y con objetivos táctiles de tamaño adecuado.
- Comprensible. La información y la operación deben ser claras: idioma definido, comportamiento predecible, errores explicados.
- Robusto. El contenido debe funcionar con tecnologías de asistencia presentes y futuras, como lectores de pantalla.
Cada criterio pertenece a uno de estos principios. Puedes recordarlos como cuatro preguntas: ¿se ve?, ¿se puede usar?, ¿se entiende?, ¿funciona con lo que las personas usan?
Cada criterio tiene un número, como 1.4.3. El primer dígito indica el principio (1 es perceptible), el segundo la pauta dentro de él (1.4 es distinguible: contraste y color) y el tercero el criterio concreto. Ese número sirve en una conversación de equipo: en lugar de decir “el contraste está mal”, puedes escribir “incumple 1.4.3” y todos revisan la misma regla. WCAG además documenta técnicas suficientes para cada criterio, con ejemplos de cómo cumplirlo, en sus páginas de comprensión (Understanding).
¿Qué nivel conviene apuntar?
La respuesta corta es AA. Cubre criterios clave de contraste, teclado, foco y formularios, sin exigir criterios de AAA en todo el producto. También es el nivel que suelen citar las normas: por ejemplo, la regla del Departamento de Justicia de EE. UU. para sitios y apps de gobiernos estatales y locales (ADA, Título II) exige WCAG 2.1 nivel AA, con plazos que una regla provisional de abril de 2026 movió a abril de 2027 (entidades de 50.000 habitantes o más) y abril de 2028 (las demás). Comprueba siempre qué versión y qué plazo aplican en tu país o sector.
Pero no es una decisión técnica. El W3C la presenta como una decisión de política: la organización elige qué nivel cumple y dónde aplica AAA. Por eso conviene que el nivel objetivo quede escrito en el producto, junto con el alcance (qué pantallas, qué flujos) y la forma de medirlo.
Un error frecuente es usar “cumple WCAG AA” como etiqueta sin auditar. Un sitio puede pasar un test automático y fallar en el uso real con lector de pantalla. Para eso sirven las pruebas con lectores de pantalla.
Ejemplo
Ejemplo ilustrativo: un equipo diseña un formulario de solicitud de crédito. Revisa tres puntos de nivel A y AA antes de la entrega. El contraste del texto de ayuda gris claro (1.4.3) no llega a 4.5:1, así que lo oscurece. Los errores de validación aparecen con texto y no solo en rojo (1.4.1 y 3.3.1). Y el botón de “Ver condiciones” tiene al menos 24 por 24 píxeles CSS, que es el tamaño que pide el criterio de tamaño de objetivo en WCAG 2.2 (2.5.8). El equipo documenta qué criterios cumple y cuáles deja para una segunda iteración.
Para tu próximo diseño: toma una pantalla, revisa el contraste de todo el texto con una herramienta y comprueba si el error de un campo se entiende sin ver el color. Son criterios de nivel A y AA que se pueden verificar en una hora.
Errores comunes
- Pensar que WCAG es solo contraste. Hay criterios de teclado, foco, idioma, errores y multimedia.
- Apuntar a AAA en todo sin un plan, y entregar con nada cumplido.
- Certificar “accesible” tras un test automático. Muchas barreras requieren una evaluación humana.
- Ignorar el foco visible, que es fácil de olvidar al diseñar componentes.
- Diseñar solo en color. Un estado de error o de éxito que depende únicamente del color no cumple el principio perceptible.
- Usar WCAG como checklist y no como base de decisiones. Los criterios explican por qué existe la barrera.
Relacionado en la wiki
Para entender la diferencia entre accesible e inclusivo, lee inclusivo vs. accesible. Si trabajas el contraste, la matemática del contraste de color explica cómo se calcula la razón. Y para la forma en que los lectores de pantalla interpretan la interfaz, mira el árbol de accesibilidad. Si estás definiendo la paleta del sistema, paletas y tokens de color es el siguiente paso natural.